微信小程序|视图数据的绑定

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

问题描述

小程序的数据都是进行实时更新的，难道每次更新的时候都要在密密麻麻的代码中找到要更改的数据重新敲吗？显然这种方法是不可取的，不仅效率低而且容易出错。那么应该如何来解决这种问题呢？如何才能做到简单方便而且不会出错呢？

解决方案

视图的数据绑定需要让这个视图的每一个部分与对应的数据做一个映射。建立这种映射了之后开发者就只需要关注如何获取到这个数据，然后进行更新。这样在更新的时候我们只需要对映射的内容进行修改，视图就会自动的更新。

（1）在js中调用page函数来给页面注册所需要的页面对象，再通过data属性给页面定义所需要的各种数据

thisWeekMovie 、count和score是定义的内部状态变量。

Page({

data: {

thisWeekMovie:{

name:"复仇者联盟4",

comment:"最精彩的科幻片",

imagePath:"/pages/img/图片1.jpg"

count:123,

score:80

}

})

表1

（2）绑定数据输出到视图中进行显示

将定义的变量渲染输出显示是通过{{ }}进项数据绑定的

{{count+score}}是进行简单数据的运算

{{(score>=60)?"及格":"不及格"}}对数据进行判断

<view >

<text>{{thisWeekMovie.name}}</text>

<text>点评：{{thisWeekMovie.comment}}</text>

<text>{{count+score}}</text>

<text>{{(score>=60)?"及格":"不及格"}}</text>

</view>

表2 wxml代码

（3）在开发者工具的AppData中可以很方便的对每个页面所包含的内部状态数据进行查看、调试和修改。

微信小程序|视图数据的绑定

图1

微信小程序|视图数据的绑定

图2

结语

将视图的每一部分与对应的数据做一个映射，定义内部状态变量将数据与变量绑定，然后到wxml中用双大括号进行渲染输出。

END

实习编辑 | 王文星

责编 | 9 5 0

where2go 团队

微信号：算法与编程之美

微信小程序|视图数据的绑定

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！