微信小程序开发-新闻简讯demo

闲来无聊体验了一把微信小程序开发，从开发的角度来说，还是蛮好的事，减少开发成本，不需要复杂的环境配置，api使用简单，开发出来的产品体验也还不错，确实很多不常用的app可以使用小程序来开发。不过现在还很多限制，API不够完善，我只是尝试使用几个常见的控件就遇到很多不支持，后期完善API后，是个不错的方向。

当然这个demo第一次尝试，只是学习使用，很多问题一起谈论，写的不好轻喷

效果图：

1.环境配置

官方下载开发工具包，安装完成就可以进入开发了。

2.项目结构

开发之前搞清楚项目结构

创建项目看见3个部分文件夹

App：属于全局配置，整个项目都可以使用到其定义的数据

utils： 主要包含一些工具方法

pages：页面，我们开发的东西都放在pages下

关于这3个东西详细介绍还是去看官网吧

3.创建页面

就拿index介绍

index.js、index.json、index.wxss，index.wxml这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文,.wxml后缀的界面布局数据显示。

4.代码实现

通过一个简单的实例，实现新闻列表，及其新闻详情展示

要实现这个功能需要熟悉view，image，text，swiper，navigator这几个组件

view：视图容器，用来包裹其他控件，呈现在页面上

view class="xxx">
<text>title</text>
<view class="content">
......
</view>
</view>

text文本显示

组件内只支持 嵌套，除了文本节点以外的其他节点都无法长按选中。

接收数据使用双大括号{{xxx}}

<text>{{text}}</text>

image 图片

<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{data.src}}"></image>

mode相当于android的image View的scaleType，图片模式

src=”{{data.src}}”访问远程链接，也可以直接把url贴进去

<image src="http://img5.imgtn.bdimg.com/it/u=2621845315,288777556&fm=21&gp=0.jpg"/>

本地图片,直接传入路径

<image src="../iamges/xx.png"/>

swiper 滑块容器

用来实现自动播放的广告栏

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="100%" height="200"/>
</swiper-item>
</block>
</swiper>

传入一个数组或列表的数据源

<block wx:for="{{imgUrls}}">

列表中的单个item，直接使用item接受数据

<swiper-item>
<image src="{{item}}"/>
</swiper-item>

navigator 页面链接

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

一个简单页面需要的元素就差不多了，有布局，有图片，有文案，还有页面之间的跳转。

接下来就是数据：

请求接口

这里要做功能比较简单，只是用到wx.request

wx.request({
url: 'http://news-at.zhihu.com/api/4/news/latest', //接口地址
data: {
//请求的参数
//数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String
x: '' ,
y: ''
},
//设置请求的 header
header: {
'content-type': 'application/json'
},
//收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
success: function(res) {
console.log(res.data)
}
})

把数据绑定到界面：

this.setData({
list:this.data.stories
})

this.data.stories是接口返回的对象



页面使用通过双大括号访问数据

{{list}}

这样就完成了请求数据–》数据显示的全部过程了

完整代码请下载：https://github.com/honjane/wxnewsDemo