微信小程序的数据绑定--从Data传输到view

一、说明

这个讨论的是纯前端的数据传输，指的是从js文件的Data中获取数据，并在view页面显示的过程。微信小程序官方文档已经有很好的说明，比较全面。这里只是归类一下常用的方法，看起来会简单一些。

二、规则

WXML 中的动态数据均来自对应 Page 的 data。

这句话很重要，它告诉开发者，如何让一个页面访问到任何一个page的变量。

1. 前端页面只从Page中的data中获取数据。微信小程序的目录结构是固定的，每个wxml的数据一定来自于同目录的.js文件Page的data。
2. app.js是全局的，它里面的data也是全局变量，所有的页面都可以getApp实例后，获取到app.data数据。
3. 不同page之间的数据时相互独立的，他们之间数据交互需要通过，app的全局data来中转。
   

三、常用绑定方式

一下都基于同一个目录下的js数据传输到wxml并显示。不考虑不同页面之间数据传输。
读者一定要属性json数据格式，否则定义data数据复杂事会看不清楚数据的结构。
简单易懂的json教程： http://www.w3school.com.cn/json/index.asp

3.1单个常量绑定

定义一个变量，前端直接显示这个变量。

Page({
  data: {
    msg:'Hello World'
  }
})

<view>{{msg}}</view>

3.2 数组绑定

数组的特点是一个数据包含多个元素，关注点在于如何控制每个元素的获取和页面显示。

wx:for={{array}} 属性控制标签，我们后台传过来的数组绑定到了view这个标签上。这个view内部的模块会被重复渲染，渲染的次数等于array的元素个数。

index 和item 是固定的，不是自定义的。分别代表如下含义：

• index 代表了每个元素下表
• item 代表了每个元素的内容

Page({
  data: {
    blklist: ['张三','李四','王五','李磊']
  }
})

<view wx:for='{{blklist}}'>{{index}}、{{item}}</view>

页面渲染的结果如下：