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

矫情吗；* 2022-04-25 10:38 263阅读 0赞

## 一、说明 ##

这个讨论的是纯前端的数据传输，指的是从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来中转。  
    ![在这里插入图片描述][20190531170231904.png]

## 三、常用绑定方式 ##

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

### 3.1单个常量绑定 ###

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

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

![在这里插入图片描述][20190531170950976.png]

### 3.2 数组绑定 ###

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

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

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

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

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

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

页面渲染的结果如下：  
![在这里插入图片描述][2019053117263391.png]

[20190531170231904.png]: /images/20220125/05f77917da23406ebc89018ab3e10320.png
[http_www.w3school.com.cn_json_index.asp]: http://www.w3school.com.cn/json/index.asp
[20190531170950976.png]: /images/20220125/e79bc71bc4b24da1bf438a4008962248.png
[2019053117263391.png]: /images/20220125/6b584ffe7d6e48e4b723b6e2bbdd3b07.png