详解微信小程序开发中的“数据绑定”和代码样例

简介

首先需要区分微信小程序的运行环境和框架系统。运行环境为小程序在手机当中运行的时候微信客户端所能提供的环境支持也就是在这种环境下如何进行数据渲染工作框架系统则是微信小程序在进行开发的过程中如何通过代码实现数据绑定以及在这种框架下是如何进行层级划分。

框架系统 - 逻辑层和视图层

整个小程序框架系统分为两部分逻辑层App Service和 视图层View。小程序提供了自己的视图层描述语言 WXML 和 WXSS以及基于 JavaScript 的逻辑层框架并在视图层与逻辑层间提供了数据传输和事件系统让开发者能够专注于数据与逻辑。

运行环境 - 逻辑层和渲染层

小程序的运行环境分成渲染层和逻辑层其中 WXML 模板和 WXSS 样式工作在渲染层JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理渲染层的界面使用了WebView 进行渲染逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面所以渲染层存在多个 WebView 线程这两个线程的通信会经由微信客户端下文中也会采用 Native 来代指微信客户端做中转逻辑层发送网络请求也经由 Native 转发小程序的通信模型下图所示。

数据绑定渲染层和逻辑层的通信

通过上述的介绍我们可以简单理解为逻辑层为视图层提供数据而将这些数据渲染从逻辑层显示到视图层的过程称之为渲染那么为渲染层工作的由wxml 和 wxss进行而为逻辑层工作的为由js编写的代码。而上述进行渲染的过程就需要进行数据的绑定。

框架的核心是一个响应的数据绑定系统可以让数据与视图非常简单地保持同步。当做数据修改的时候只需要在逻辑层修改数据视图层就会做相应的更新。

下面来看一个简单的代码样例

代码样例

1视图层的数据初始化
比如在pages里面当前只有一个页面index在index.js中逻辑层的数据对象data有一个数据msg 其初始化为一个字符串。

然后在视图层通过双层大括号Mustache语法mustache 是“胡子”的意思因为它的嵌入标记 {{ }} 非常像胡子。 {{ }} 的语法也被 vue 沿用来进行数据渲染和展示

当启动小程序的时候就会将数据自动渲染到页面中

这样逻辑层的数据就和视图层的变量进行了双向绑定。也就是说’ WXML 中的动态数据均来自对应 Page 的 data’ 。
通过调试器的AppData 可以查看每个页面所绑定的数据

2数据的修改和动态响应
和大部分前端框架比如React和Vue都是响应式框架当数据在逻辑层进行修改之后数据会同步渲染到视图层的界面上。
比如在index.js 的页面实例生命周期的钩子函数中比如onLoad(), onReady() 等

这里再onLoad回调函数中首先打印msg数据但是如何去获取msg呢我们使用this对象当前页面的实例对象。
通过console打印出的this对象为

我们可以看到this 对象中包含data数据。所以我们可以直接通过:
console.log(this.data.msg);
直接获取msg数据

同步修改数据

通过setData() 函数来进行数据的修改修改之后的数据会同步渲染到视图层的界面上

3非钩子函数也可进行数据的同步修改
在这里设置了一个定时函数两秒后就会自动更新界面中的数据。

因为操作的都是this对象所以会进行同步更新。

总结

微信小程序开发中的一大核心就是数据的绑定和渲染如果对这一部分充分理解后面的代码开发将会变得顺利很多加油