微信开发入门第四章：文章列表页面

4.8 数据绑定

 4.8.1 数据绑定

        在真实的项目中，业务数据通常你放在自己的服务器中，然后通过HTTP访问服务器提供的API，从而实现数据获取。
代码清单 Js中的数据代码
Page({

data:{
object:{
date:"Jan 14 2017",
},
title:"小时候的冰棍和雪糕",
avatar:"/images/avatar/avatar-2.png",
postImg:"/images/post/post-4.jpg",
content:"冰棍儿和雪糕绝对不是一件东西，两者的价钱大不一样,......",
collectNum:{array:[108]},
messageNum:43,
readingNum:34,
}

}
)

将数据在视图层显示出来<view class="post-container">
<view class="post-author-date">
<image src="{{avatar}}" ></image>
<text> {{object.date}}</text>
</view>
<text class="post-title">{{title}}</text>
<image class="post-image" src="{{postImg}}" mdoe="aspectFill"></image>
<text class="post-content">{{content}}</text>
<view class="post-like">
<image src="/images/icon/wx_app_collected.png"></image>
<text>{{collectNum.array[0]}}</text>
<image src="/images/icon/wx_app_message.png"></image>
<text>{{messageNum}}</text>
<image src="/images/icon/wx_app_view.png"></image>
<text>{{readingNum}}</text>
</view>
</view>
4.8.2 查看数据绑定对象

当遇到数据显示不清的问题，可以打开AppData页面，查看情况。
4.8.3 数据绑定更新
        还可以使用setDa函数来做数据绑定，这种方法还可以看作数据更新，setData方法位于Page对象的原型链上，大多数情况下，我们是使用this.setData的方式来调用这个方法。
        setData的对象将接受一个参数，以key和value的方式将this.data中的key对应的值设置成value.
更改后的post.js代码Page({

data:{ },
onLoad:function(){
var iceCreamData={
object:{
date: "Jan 14 2017",
},
title: "小时候的冰棍和雪糕",
avatar: "/images/avatar/avatar-2.png",
postImg: "/images/post/post-4.jpg",
content: "冰棍儿和雪糕绝对不是一件东西，两者的价钱大不一样,......",
collectNum: { array: [108] },
messageNum: 43,
readingNum: 34,
}
this.setData({
postData:iceCreamData

})
}

})

正如代码所示，this.setData指定的key就为PostData,value是文章的数据iceCreamData。
视图层代码post.wxml
<view class="post-container">
<view class="post-author-date">
<image src="{{postData.avatar}}" ></image>
<text> {{postData.object.date}}</text>
</view>
<text class="post-title">{{postData.title}}</text>
<image class="post-image" src="{{postData.postImg}}" mdoe="aspectFill"></image>
<text class="post-content">{{postData.content}}</text>
<view class="post-like">
<image src="/images/icon/wx_app_collected.png"></image>
<text>{{postData.collectNum.array[0]}}</text>
<image src="/images/icon/wx_app_message.png"></image>
<text>{{pataData.messageNum}}</text>
<image src="/images/icon/wx_app_view.png"></image>
<text>{{pataData.readingNum}}</text>
</view>
</view>如果页面空白没有错误信息，多半是数据绑定出了问题，这个时候AppData的面板是最好的调试工具。