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

﹏ヽ暗。殇╰゛Y 2023-06-17 05:57 225阅读 0赞

## 课程大纲 ##

*  （1）页面构造/注册器Page()
 *  （2）页面注册器参数  
    data初始化数据  
    页面生命周期  
    页面用户行为  
    其他
 *  （3）页面用户行为

## 前言 ##

*  **注册页面：**
 *  对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例
 *  作用：指定页面的初始数据、生命周期回调、事件处理函数等。
 *  **页面的用户行为：**
 *  小程序宿主环境提供了四个和页面相关的用户行为回调

## 页面构造/注册器Page() ##

*  Page构造器参数  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    **关于页面用户行为，后期会结合API进行讲解**

## 小程序界面渲染 ##

*  **小程序界面渲染的基本原理：**  
    小程序的页面结构由WXML进行描述，WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，数据来自于页面Page构造器的data字段，data参数是页面首次渲染时从逻辑层传递到渲染层的数据。
 *  **双线程下的界面渲染：**  
    小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的DOM树上，渲染出正确的UI界面
 *  双线程下界面渲染概念图  
    逻辑层传递数据到渲染层  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

## 页面数据 ##

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

## 页面用户行为 ##

*  **小程序宿主环境提供了四个和页面相关的用户行为回调**  
    ①下拉刷新 **onPullDownRefresh**  
    ②上拉触底 **onReachBottom**  
    ③页面滚动 **onPageScroll**  
    ④用户转发 **onShareAppMessage**
 *  **①下拉刷新 onPullDownRefresh**  
    监听用户下拉刷新事件，需要在app.json的window选项中或页面配置page.json中设置**enablePullDownRefresh为true**。当处理完数据刷新后，**wx.stopPullDownRefresh**可以停止当前页面的下拉刷新。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  **②上拉触底 onReachBottom**
    
     *  场景：多数的购物小程序会在首页展示一个商品列表，用户滚动到底部的时候，会加载下一页的商品列表渲染到列表的下方，我们把这个交互操作叫为上拉触底。宿主环境提供了上拉的配置和操作触发的回调，如下代码所示。
     *  监听用户上拉触底事件。可以在app.json的window选项中或页面配置page.json中设置触发距离**onReachBottomDistance**的值。在触发距离内滑动期间，本事件只会被触发一次。
 *  正式讲解之前，先将前提工作做好，一般上拉触底都需要做列表页，这里模拟做新闻展示页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  **新闻展示页效果**  
    ![在这里插入图片描述][20191127193952386.png]
 *  接下来在page.json中设置触发距离onReachBottomDistance的值  
    当界面的下方距离页面底部距离小于100像素时触发回调  
    ![在这里插入图片描述][20191127194023205.png]
 *  接下来在逻辑文件中绑定事件onReachBottom，监听事件上拉触底行为  
    ![在这里插入图片描述][20191127194042593.png]
 *  此时上拉触底时，便会触发触底事件回调  
    ![在这里插入图片描述][20191127194052252.png]
 *  接下来细化回调函数，当触发上拉触底时动态添加新闻列表内容。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]
 *  完善内容加载，添加loading动画  
    **界面交互API：**  
    wx.showLoading(\{\})显示加载框  
    wx.hideLoading()隐藏加载框  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]
 *  开发场景代码，一般用接口调用获取数据，格式如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]
 *  ③页面滚动 **onPageScroll**  
    监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示页面在垂直方向已滚动的距离（单位px）
 *  应用场景案例：返回顶部  
    （1）获取滚动条当前位置  
    此时滚动页面时，便会触发滚动事件回调  
    ![在这里插入图片描述][20191127194258803.png]  
    （2）添加一键返回顶部功能  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]
 *  注意：需要判断当前微信是否支持wx.pageScrollTo滚动API，如果不支持则弹框提示用户给予反馈  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]
 *  **补充说明：**
    
     *  1.当然我们有些时候并不想整个页面进行滚动，而是页面中某一小块区域需要可滚动，此时就要用到宿主环境所提供的scroll-view可滚动视图组件。可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动，scroll-view组件也提供了丰富的滚动回调触发事件，这部分稍后详细介绍。
     *  2.该API存在多个bug，但是官方暂时还没有修复pageScrollTo的bug
 *  ④用户转发 **onShareAppMessage**  
    只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]
 *  **转发注意事项：**
    
     *  ①按需出现：并非所有页面都适合放置转发按钮，涉及用户隐私的非公开内容，或可能打断用户完成当前操作体验的场景，并不推荐使用转发。同时，由于转发过程中，微信将截取用户屏幕图像作为配图，因此，需要注意帮助用户屏蔽个人信息。
     *  ②尊重意愿：理所当然，并非所有的用户，都喜欢与朋友分享你的小程序。因此，它不应该成为一个诱导或强制行为，如转发后才能解锁某项功能等。所以这类做法不仅不被推荐，还会违反小程序《运营规范》。

## 完毕，有问题留言小编… ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127193242811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191127193256990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191127193437485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191127193509915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191127193616510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191127193837314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2019112719393453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191127193952386.png]: https://img-blog.csdnimg.cn/20191127193952386.png
[20191127194023205.png]: https://img-blog.csdnimg.cn/20191127194023205.png
[20191127194042593.png]: https://img-blog.csdnimg.cn/20191127194042593.png
[20191127194052252.png]: https://img-blog.csdnimg.cn/20191127194052252.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191127194112759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191127194142991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191127194203257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191127194258803.png]: https://img-blog.csdnimg.cn/20191127194258803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191127194351872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191127194418269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2019112719453518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70