小程序数据绑定

小程序数据绑定
小程序的数据绑定，想必只要是掌握了Vue.js,Angularjs,React.js等数据操作脚本的框架，学习起来并不是很难，并且上手很快。除了了解组件以及标签配置的差异性，其他的对照API，是很快就能创建出属于你的小程序的。

页面数据绑定（双花括号）将变量包起来如下：
WXML
<view>{{ message }}</view>

js在头部data里面声明这个变量：
js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

//这里注意只要头部变量的值，改变，页面的值，就会跟着变化，小程序头部data里面的值一般以this.data."头部变量名称"的方法进行获取。如需要及时的更改页面数据可以。用小程序提供的以下方法：

this.setdata({
message:“你好，世界”
})
//这个值可以是变量，也可以是布尔值，塞值得时候同样可以做三运算，判断等操作。这个方法，用到的比较多，一定要牢记。再此，在透露一点，该方法的坑，也是我之前开发时候遇到。后来找到原因

很奇葩的一个坑，我检查了很多次代码，发现语法还有参数都是正确的，后来经过多方验证，
和小伙伴的帮助，原来，自己如果定义了方法，头部的数据通过this.data可能获取不到，这个时候我们在自己定义的方法里面就需要重新定义一下this：
var that = this
再通过that.data就可以取到。解决方式很简单，如果大家也遇到这样的错误，望谨慎入坑。
讲解只供理解，如需学习 请参考小程序数据绑定官方API:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

小程序数据循环展示

小程序里，数据的循环展示，也算是一个用的比较普遍的一个功能了，用处很大，实用简单，下面继续看代码：

//1.需要先创建一个循环体， 在开始循环的标签里写上循环的代码及循环方法  wx:for="{{menus}}" , 写循环体的时候记得一定要写 wx:key="union"  这个key是一定要写的，命名可以自己随意取，不写的画报错很烦.
//2.、循环体里面可以给当前的循环体命名wx:for-item="item"这个命名可以自己定义，不定义的话默认是item .多层循环最好定义一下。不然很容易混淆，这个打印出来就是当前对象的下标。循环一个数组里面很多对象的时候，取值就可以用以下方法{{item.你的属性名}} 如下：
//wxml文件

  <!-- 菜单项 -->
  <view class="links">
    <view class='link _flex box' wx:for="{{menus}}" wx:key="menus" bindtap="checkAndDircet" data-url="{{item.siteUrl || item.site}}">
      <view class='info _flex-1'>
        <view class='name'>{{item.name}}</view>
        <view class='en'>{{item.en}}</view>
      </view>
      <view class='icon'>
        <image src='{{item.icon}}' class='iconImg'></image>
      </view>
    </view>
  </view>
  <!-- 菜单项End -->

以上是页面数据绑定的写法。
相对于js来说就简单的多。只要把要循环的数组，通过this.setData方法塞到对应得循环体里面，页面就会根据你的数据有几个对象，循环几次，并做出展示。（这里一定要注意你塞得循环体的层级，不然是没办法循环展示的哦）基本的列表循环就是这么实现的，详细解释可以去小程序官方API：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html