北京华网天下

小程序页面架构：渲染层、逻辑层与系统层的通信机制解析

2024-07-25

来源：网络整理

明星公众号（ID：）

如果你不知道如何操作

点击这里，

━━━━━━

我希望你保持杯子空着

边读边思考

更重要的是，你需要敲

如果你有三连击

作者 | 论文

ID|

前言

撰文：川川

在小程序中，各个页面都是相互独立的，一个页面分为渲染层（视图层）、逻辑层（）、系统层（底层）

从架构上来说，和都是独立的模块，并没有直接的数据共享通道。

也就是说，如果要将逻辑层的数据渲染到页面中，他们之间不能直接通信，往往需要通过系统层作为中介。

我们都知道视图层的数据来自于逻辑层的数据，如果视图层想要改变逻辑层的数据，就需要使用这个方法来触发，才能更新视图层的数据，那么具体的工作流程是怎样的呢？

· 文章正在更新 ·

它是什么？

定义：设置数据，改变数据

功能：该函数用于将数据从逻辑层发送到视图层（异步），并改变this.data对应值（同步）

如果你仔细看这句话，你会发现它包含了很多信息。

从上图可以看出，逻辑层的数据在渲染到界面时，逻辑层的数据需要经过系统层。

系统层将数据转发给渲染层，然后在渲染层进行显示，这个过程是异步的。

视图层与逻辑层之间的数据传输其实是通过双方提供的Core来实现的，也就是需要将用户传递过来的数据转换成字符串形式进行传输

同时将转换后的数据内容拼接成JS脚本，然后通过执行JS脚本传输到双方独立的环境中。

两个重要参数

从官方文档中看到这句话Page..(data,)，得知该方法是挂载当前页面实例Page原型的下一个公共实例方法

也就是说，在Page下的任意方法中，都可以使用该方法，该方法接收两个参数

为了方便理解，在小程序中创建一个页面命名，下面是逻辑层js文件

// miniprogram/pages/setdata/setdata.js Page({ /** * 页面的初始数据 */ data: { name: "itclanCoder" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { } })

wxml文件如下

在Web开发中，开发者通过DOM接口完成界面的实时更新，在小程序中则是利用WXML语言提供的数据绑定功能来完成这一功能。

小程序中不存在DOM、BOM等。

小程序是数据驱动的，逻辑层的数据发生变化，视图层也会随之变化，是单向的数据流，如果想触发视图中数据的更新，就需要使用这种方式。

上面的WXML使用{{变量名}}来绑定WXML文件和对应文件中的数据对象属性。

在上面的例子中，页面将显示如何在逻辑层中改变数据？

下面的例子演示了如何在逻辑层改变数据，在wxml中添加一个按钮，并绑定一个方法触发按钮去改变data下的数据。

{{name}} 更改data中数据

并在逻辑层JS

// miniprogram/pages/setdata/setdata.js Page({ /** * 页面的初始数据 */ data: { name: "itclanCoder" }, // 改变data的方法 handleChangeName() { console.log("name开始的数据", this.data.name); // itclanCoder this.setData({ name: "川川" }) console.log("name经过setData后的数据", this.data.name); // 川川 } })

上述示例代码中，通过一个方法修改了data下的name字段值，该方法接收一个参数，第一个参数是一个对象，以key:的形式表示，将this.data中key对应的值修改为

注意

微信小程序开发如何修改变量_小程序变量_微信小程序修改全局变量

这个key可以以data路径的形式给出，支持改变数组中的某一项或者某个对象的某个属性，比如[2].abcd，不需要预先定义在this.data中。但是对于任何需要在页面展示的变量数据，最好都挂载到data下并初始化，然后再使用。

也就是说改变变量的时候，只写键名，不用写this.data.属性，如下图

this.setData({ // this.data.name: "川川" // 这样写是会报错的 name: "川川" // 正确的写法 })

接收第二个参数是

handleChangeName() { console.log("name开始的数据", this.data.name); // itclanCoder this.setData({ name: "川川" }, () => { // 接收第二个回调函数 console.log("执行setData引起的界面更新渲染完毕后的回调函数"); }) console.log("name经过setData后的数据", this.data.name); // 川川 }

上述代码的执行顺序是

itclancoder 川川执行setData引起的界面更新渲染完毕后的回调函数

这个结果说明这个方法是异步的，等待主线程任务完成后，再执行第二个参数回调异步函数

如何改变对象的属性

有时候，我们的接口数据类型是对象，而不是基本数据类型（，，，null），但是由于业务需要，我们经常需要改变对象下的某个属性

如下所示我想改变age属性值

// miniprogram/pages/setdata/setdata.js Page({ /** * 页面的初始数据 */ data: { person: { name: "随笔川迹", sex: "男神", age: 20 } }, handleChangeName() { this.setData({ person: { age: 24 } }) } })

上述代码中，对象的age属性确实是可以改变的，但是随之而来的问题是，除了age属性之外，对象的其它属性全部消失。

这很令人沮丧

那么我们该如何解决这个问题呢？

this.setData({ "person.age": 24 // 注意要用双引号或单引号将属性给引起来 })

this.setData({ ['person.age']: "川川" // 访问对象下的属性可以用.也可以用中括号,中间代表是一个变量,需要用引号引起来 })

如下

这个在以后的开发中很有用，有时候需要改变某个对象下某个属性的值的时候，就可以使用这个方法。

防范措施

结论

本文主要介绍下面的使用，该函数用于修改挂载在data下的数据。当想要修改view视图的时候，需要使用该函数，该函数接收两个参数，第一个参数是必须的，也就是需要修改的view层的对象，第二个参数是可选的。

从逻辑层向视图层发送数据是异步的，而改变对应的this.data值却是同步的，并不是实时的，这也导致需要考虑性能的因素。

至此，使用注意事项就介绍完了，值得注意的是，如何修改某个对象下的某个属性，在以后的开发中会用到比较多。