小程序数据绑定和setData

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

我们wxml没有直接调用数据的能力，我们的逻辑是通过js调用数据，再由js传递给wxml才能够显示出来.那么怎么由js传递给wxml?

首先我的js里面有这样一段代码

process: function(){
　　var date = 'Nov 18 2019';
},

我需要将这个数据显示到wxml里面去。需要数据绑定，那么小程序里面的数据绑定是如何绑定到页面中的？我们只需要在data里面写上这个数据就可以数据绑定了。

data: {
　　date: 'Nov 18 2019'
},

wxml

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

双花括号是数据绑定的基本语法。data是page里面比较特殊的一个变量，只有在data下面的数据才能够进行一个数据绑定，其他key里面不行。

像小程序里面的这种数据绑定叫做单向数据绑定。就是js里面的变量的值变了，wxml会自动的变。但是如果wxml的数据变了，data里面的数据是不会自动的更新的。需要手动的设置

我们从服务器取数据一般是写在onLoad里面，我们模拟一段

onLoad: function (options) {
　　var post_content = {
　　　　date: 'Nov 18 2019',
　　　　title: '正是虾肥蟹壮时',
　　　　post_img: '/images/post/crab.png',
　　　　content: '菊黄蟹正肥，品尝秋之味。徐志摩把看初花的荻芦和到楼外楼吃蟹，并列为秋天来杭州不能错过到风雅之事；用林妹妹到话讲时“螯封嫩玉双双满',
　　　　view_num: '112',
　　　　collect_num: '96',
　　　　author_img: '/images/avatar/1.png'
　　}
　　this.setData(post_content);
},

这样设置好之后，页面就可以拿到数据了，setData的作用简单的来说就是拷贝到data里面去。

<view class='post-container'>
　　<view class='post-author-date'>
　　　　<image src='{{author_img}}'></image>
　　　　<text>{{date}}</text>
　　</view>
　　<text class='post-title'>{{title}}</text>
　　<image class='post-image' src='{{post_img}}'></image>
　　<text class='post-content'>{{content}}</text>
　　<view class='post-like'>
　　　　<image class='post-like-image' src='/images/icon/chat.png'></image>
　　　　<text class='post-like-font'>{{collect_num}}</text>
　　　　<image class='post-like-image' src='/images/icon/view.png'></image>
　　　　<text class='post-like-font'>{{view_num}}</text>
　　</view>
</view>