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

2021/6/30 11:21:08

编程Tag： 数据微信视图绑定 count score thisWeekMovie

本文主要是介绍微信小程序|视图数据的绑定，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题描述

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

解决方案

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

（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中可以很方便的对每个页面所包含的内部状态数据进行查看、调试和修改。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图1

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图2

结语

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

END

实习编辑 | 王文星

责编 | 9 5 0

where2go 团队

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

这篇关于微信小程序|视图数据的绑定的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！