微信小程序（页面用户行为）

最新推荐文章于 2024-03-17 04:29:35 发布

wyk.wyk

最新推荐文章于 2024-03-17 04:29:35 发布

阅读量526

点赞数

本文链接：https://blog.csdn.net/weixin_45343973/article/details/100084406

版权

本文详细探讨了微信小程序的界面渲染原理，包括WXML与数据绑定，以及双线程下的界面更新机制。此外，还介绍了如何通过setData更新页面状态，强调了优化性能的关键在于只设置变化的数据。接着，文章讲解了四个关键的页面用户行为回调：下拉刷新、上拉触底、页面滚动和用户转发，并给出了实际应用场景及代码示例。

摘要由CSDN通过智能技术生成

小程序界面渲染

小程序界面渲染的基本原理：
小程序的页面结构由WXML进行描述，WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，数据来自于页面Page构造器的data字段，data参数是页面首次渲染时从逻辑层传递到渲染层的数据。

双线程下的界面渲染：
小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的DOM树上，渲染出正确的UI界面。

概念图：
在这里插入图片描述
页面数据
案例：（page构造器data参数）

宿主环境所提供的Page实例的原型中有setData函数，调用this.setData把数据传递给渲染层，可以达到更新界面的目的。

页面数据data：
由于小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。
setData其一般调用格式是 setData(data, callback)，其中data是由多个key: value构成的Object对象。
案例：
在这里插入图片描述
实际在开发的时候，页面的data数据会涉及相当多的字段，你并不需要每次都将整个data字段重新设置一遍，只需要把改变的值进行设置即可，宿主环境会自动把新改动的字段合并到渲染层对应的字段中。
只要保持一个原则就可以提高小程序的渲染性能：每次只设置需要改变的最小单位数据。
注意：
①直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致；
②由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置