壹 ❀ 引

我在从零开始的微信小程序入门教程(二)，初识WXML与WXSS一文中简单介绍了小程序组件与小程序样式相关概念，在了解这二者以后，其实咱们已经能够搭建出简单的静态页面，与书写HTML页面同样，小程序页面也只能经过多写多练提高。在构建完页面后就出现了一个问题，咱们该如何获取组件元素让数据与之关联呢？javascript

在网页开发中，咱们一样使用JS操做DOM，包括数据渲染，事件监听等，好比我如今要经过点击一个按钮后，替换段落中的本文信息，使用JS能够这么作：css

<p>我是谁？</p>
<button>点我点我</button>

let btn = document.querySelector("button"),
    p = document.querySelector("p");
btn.onclick = function () {
    p.innerHTML = '我是听风是风啊！'
};

没问题，效果虽然实现了，可是相似的操做咱们老是得获取并操做DOM，逻辑层与渲染层高度耦合，每一份数据咱们彷佛都得找到对应的DOM所在，并帮助它们相互关联，这很明显不太友好。伴随发展，angularjs，vue，react的出现，咱们知道了MVVM模式的存在，在开发中逻辑层与渲染也得以分离，微信小程序在开发模式上也借鉴了这一点，好比仍是上面的效果，用小程序就能够这么作，咱们分别在index.wxhl和index.js中添加以下代码：html

<text>{{myName}}</text>
<button bindtap="setName">点我点我</button>

const app = getApp()

Page({
  data: {
    myName:'我是谁？'
  },
  setName() {
    this.setData({ myName: "喷火龙" })
  }
})

接下来咱们解释下小程序数据绑定到底怎么玩，以及其它几种常见的数据交互方式。vue

贰 ❀ 数据交互

贰 ❀ 壹数据绑定{{}}

熟悉vue等相关框架的同窗对于上述例子必定十分熟悉，对于第一次了解这种用法的同窗也不用担忧，并不复杂，咱们来解释下到底什么是意思。java

首先看WXML，小程序使用{{}}表达式来绑定解析JS文件中定义的变量，而在JS文件的data对象中通常用于定义小程序初始化所需数据，好比例子中的变量myName有一个初始值。react

Page({
  data: {
    /* 页面初始数据写在这*/
  }
})

接下来就是如何经过点击事件让myName发生变化，在组件button上咱们经过点击事件bindtap绑定了一个setName方法，注意，这个方法一样定义在JS文件Page对象中，与data对象同级，以往咱们绑定方法通常会给方法名后带括号，小程序的方法绑定并无括号，好比上面的bindtap="setName"。angularjs

Page({
  data: {
    /* 页面初始数据写在这 */
  },
  方法名() {
    /* do something */
  }
});

数据绑定除了能用于解决组件文本内容的变动，还有一大做用就是支持组件属性动态变动，什么是组件属性？样式class是属性，组件内连样式style也是属性，好比咱们能够有这样一个组件：小程序

<text class="name" style="color:#fff;background:#e4393c">{{myName}}</text>

那么经过数据绑定表达式，咱们可让样式也动起来，好比下面这个例子：微信小程序

<text class="{{defaultClass}}" style="color:#fff;background:{{backgroudColor}};display:block">{{myName}}</text>
<button bindtap="setName">点我</button>

.my-name {
  height: 30px;
  width: 100px;
  text-align: center;
  line-height: 30px;
}

.my-name-new{
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}

const app = getApp()

Page({
  data: {
    myName: '我是谁？',
    defaultClass: 'my-name',
    backgroudColor: '#e4393c'
  },
  setName() {
    this.setData({
      myName: "喷火龙",
      defaultClass:'my-name-new',
      backgroudColor:'#bbded6'
    })
  }
})

在这个例子中，咱们定义了一个class变量，此class默认值由JS文件中提供，除此以外，在内联样式style中的background属性也是变量，当点击按钮，咱们切换了class的值以及background的值，在为属性使用数据绑定时，惟一须要注意的是{{}}始终被包裹在一对双引号中，关于数据绑定先说到这里，也算是WXSS的一部分补充。数组

贰 ❀ 贰基本逻辑语法

{{}}中除了单纯的解析变量，还能作简单的逻辑运算，好比算术计算：

<text>{{num1+num2}}</text>

Page({
  data: {
    num1: 1,
    num2: 2
  },
})

咱们还能用于字符串拼接，好比下面的例子：

<text>听风是风{{str}}</text>

<text>{{"听风是风"+str}}</text>

Page({
  data: {
    str: '很酷'
  },
})

这两种拼接方式都是能够的，由于在{{}}中解析的是变量，因此自己是字符时得加上引号。

另外，{{}}中还能使用三元表达式，也就是根据条件决定使用不一样的结果：

<text>{{userName?userName:'登陆'}}</text>

Page({
  data: {
    userName: ''
  },
})

好比上面这个例子就是一个简单的用户信息展现，若是有数据展现用户名，若是没有提示登陆。

三元的用途还不少，好比结合样式使用，经过条件判断来决定使用哪一种样式，这在实际开发中都很是实用，待你们执行探索。

贰 ❀ 叁条件逻辑

控制模板是否显示方面，在vue中有v-if，在angular中有ng-if，而在小程序中咱们可使用wx:if来达到一样的效果，固然咱们仍是得结合{{}}使用，好比：

<text wx:if="{{bool}}">我叫听风是风</text>

注意，wx:if与咱们以往使用框架中的效果同样，一旦变量为false，整个组件不会加载，在小程序解析的wxml模板中你都找不到它，这和组件加载但display:none是有区别的。

问题来了，假设咱们但愿wx:if不只是控制一个组件，而是好几个组件的显示隐藏怎么办？这时候咱们能够结合block组件使用，看下面的例子：

<block wx:if="{{bool}}">
	<text>我叫听风是风，</text>
	<text>听风是风你加点油好很差，真的是！</text>
</block>

block虽然是个组件，但它自己并不会被渲染，只是单纯起到容器的做用，好比当bool为true能够看到wxml中并无渲染block组件，因此你们不用担忧会不会增长无用组件层级的问题。

实际开发中有这样一种状况，好比购物车页面，若是当前用户能请求回购物车数据，咱们天然是展现购物车信息，若是请求回来没数据，咱们确定得给出购物车为空的友好提示，以angualrjs为例，我通常是提供2个盒子，大体这么个意思：

<div class="cart">
    <div ng-if="bool"></div>
    <div ng-if="!bool"></div>
</div>

由于angularjs只提供了ng-if状况，这里经过 ! 取反值，模拟了if else的状况。

值得庆幸的是小程序不只提供了wx:if，还提供了wx:elif以及wx:else，因此条件状况再多，咱们都能应对自如，好比：

<text wx:if="{{num > 0}}"> 大于0 </text>
<text wx:elif="{{num < 0}}"> 小于0 </text>
<text wx:else> 等于0 </text>

既然谈到了wx:if，用过vue的同窗必定会想问小程序有没有相似v-show的指令呢？固然有，咱们能够给组件添加hidden属性来达到v-show的效果，hidden接受一个Boolean值。wx:if与hidden的区别是，wx:if值为假时组件直接就不渲染，而hidden为真时组件仍是会渲染，只是display为none。

2020.7.7 更新修改

另外关于hidden有个小坑，好比下面这个例子：

<text hidden="false">1</text>

你会发现这个组件并不会显示，而正确的写法是这样：

<text hidden="{{false}}">1</text>

出于angularjs以及其它框架的习惯，我一直以为{{}}中应该解析变量，没想到这里小程序竟然要使用{{}}包裹一个明确的布尔值。感谢HZz.D.25'11💤指出。

因此站在个人角度，我仍是推荐使用变量表示布尔值，这样更符合使用习惯，好比下面的例子：

<view hidden="{{bool}}">1</view>

Page({
  data: {
    bool: false
  },
})

贰 ❀ 肆列表渲染

在上面的例子中咱们说起购物车有数据以及无数据时的实现场景，若是有数据，咱们其实就得将数据结合模板遍历出来，在angular中咱们可使用ng-repeat，vue中有v-for，很巧，小程序也提供了wx:for，咱们先来看一个简单的例子：

<view wx:for="{{array}}">
  {{index}}: {{item}}
</view>

Page({
  data: {
    array: [1,2,3,4]
  },
})

不难猜想，这里的index与item就是小程序默认给咱们提供的，当遍历数组时，当前元素的索引与当前元素自身。

那么假设数组中的每一个元素都是对象呢？其实仍是同样的访问，好比下面这样：

Page({
  data: {
    array: [{
      name:'echo'
    },{
      name:'听风是风'
    },{
      name:'时间跳跃'
    }]
  },
})

<view wx:for="{{array}}">
  {{item.name}}
</view>

有同窗确定要问了，小程序默认把索引和元素自身命名成了index与item，那我本身能不能改个名字呢？能，看下面例子：

<view wx:for="{{array}}" wx:for-index="a" wx:for-item="b">
  {{a}}: {{b}}
</view>

咱们可使用wx:for-index与wx:for-item来自定义index与item的名字，想取什么随你开心。

上面的例子都是将wx:for加在了一个组件上面，好比咱们要遍历购物车数据，那就有购物车图片，价格，总价，删除等等对应的组件，这么多组件怎么办？还记得前面提到的无私奉献的block组件吗？没错，咱们能够用它将重要的组件包裹起来，像这样：

<block wx:for="{{array}}">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>

最后，关于wx:for性能方法，咱们不得不提wx:key，这玩意有啥用呢？打个比方，咱们如今有数组[1,2,3,4]，小程序将这四项渲染了出来，如今咱们修改重排了数组，变成了[4,3,2,1]，若是咱们没添加wx:key，小程序会从新渲染，再次遍历新增四个组件。

而若是咱们在遍历时添加了wx:key，小程序会以key做为一个查找标准，判断当前已经渲染出来的组件还有没有用，咱们仔细看数组变化，它只是从新排了序，内容无变化，因此小程序会将以前已经建立好的组件直接再利用进行重排，而不是直接彻底从新渲染一遍，这样就提高了渲染过程。

再好比[1,2,3,4]变成了[1,2,3,4,5]，有key就是在原有基础上新增一个便可，而不用从新遍历五个组件，大概就这么个意思。

OK，咱们解释了wx:key做用以后，来讲说wx:key接受什么作参数，这里直接引用官方介绍：

wx:key 的值以两种形式提供：

能够是一个字符串，表明在 for 循环的 array 中 item 的某个属性，该属性的值须要是列表中惟一的字符串或数字，且不能动态改变。
保留关键字 this 表明在 for 循环中的 item 自己，这种表示须要 item 自己是一个惟一的字符串或者数字。

咱们分别对应这两种值给出两个例子：

字符串状况，表示item中的一个属性，且属性的值在整个数组中都是独一无二的数组或字符串：

<view wx:for="{{array}}" wx:key="id" > {{item.name}} </view>

Page({
  data: {
    array: [
      {id: 0, name: 'echo'},
      {id: 1, name: '听风是风'},
      {id: 2, name: '时间跳跃'},
      {id: 3, name: '行星飞行'},
    ]
  }
})

this状况，表示item自身，item应该是独一无二的数值或者字符串：

<view wx:for="{{array}}" wx:key="*this" > {{item}} </view>

Page({
  data: {
    array: [1, 2, 3, 4]
  }
})

注意，使用过程当中this前有个星号，虽然不加也没报错，但官方是加了因此仍是加吧。

肆 ❀ 总

好了，那么到这里，咱们大体介绍完了常见数据绑定的几种用法，只要有数据，咱们如今能利用各类手段将这些数据渲染到WXML中，这很是棒！

在上文中，咱们在了解数据绑定的同时，也知道了第一个事件bindtap，它属于点击事件，那么在小程序中还有哪些好玩的事件呢？这个问题咱们在下篇教程中揭晓，经过学习事件，让咱们的小程序页面更具交互性。

那么到这里，本文正式结束。

从零开始的微信小程序入门教程(三)，有趣且好玩的数据绑定

壹 ❀ 引

贰 ❀ 数据交互

贰 ❀ 壹 数据绑定{{}}

贰 ❀ 贰 基本逻辑语法