No Comments

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

壹 ❀ 引

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

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

<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.wxml和index.js中添加如下代码：

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

const app = getApp()

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

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

贰 ❀ 数据交互

贰 ❀ 壹 数据绑定{{}}

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

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

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

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

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

最后更新于 2021-09-30 12:00:26 并被添加「微信小程序入门 数据绑定 」标签，已有 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

相关文章

发表新评论