微信小程序 (页面用户行为)

小程序界面渲染
小程序界面渲染的基本原理:
由WXML通过数据绑定的语法绑定逻辑层传过来的数据,数据来自于页面Page构造器的data字段,data参数是页面首次渲染时从逻辑层传递到渲染层的数据。
双线程下的界面渲染:
小程序的逻辑层和渲染层是分开的两个线程
在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,渲染出正确的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是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024kB;
③不要把data中的任意一项的value设为undefined,否则可能会有引起一些不可预料的bug

页面用户行为
4个用户行为回调
①下拉刷新 onPullDownRefresh
②上拉触底 onReachBottom
③页面滚动 onPageScroll
④用户转发 onShareAppMessage

下拉刷新 onPullDownRefresh
监听用户下拉刷新事件,需要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上拉触底 onReachBottom
场景:多数的购物小程序会在首页展示一个商品列表,用户滚动到底部的时候,会加载下一页的商品列表渲染到列表的下方,我们把这个交互操作叫为上拉触底。
可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance的值。在触发距离内滑动期间,本事件只会被触发一次。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
页面展示效果
在这里插入图片描述
接下来在page.json中设置触发距离onReachBottomDistance的值
在这里插入图片描述
接下来在逻辑文件中绑定事件onReachBottom,监听事件上拉触底行为
在这里插入图片描述
此时上拉触底时,便会触发触底事件回调
在这里插入图片描述
接下来细化回调函数,当触发上拉触底时动态添加新闻列表内容。
在这里插入图片描述
完善内容加载,添加loading动画
在这里插入图片描述
开发场景代码,一般用接口调用获取数据,格式如下
在这里插入图片描述
页面滚动 onPageScroll
监听用户滑动页面事件,参数为 Object,包含 scrollTop 字段,表示页面在垂直方向已滚动的距离(单位px)
1.获取滚动条当前位置
在这里插入图片描述
此时滚动页面时,便会触发滚动事件回调
在这里插入图片描述
2.添加一键返回顶部功能
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意:需要判断当前微信是否支持wx.pageScrollTo滚动API,如果不支持则弹框提示用户给予反馈
在这里插入图片描述
补充说明:
①当然我们有些时候并不想整个页面进行滚动,而是页面中某一小块区域需要可滚动,此时就要用到宿主环境所提供的scroll-view可滚动视图组件。可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动scroll-view组件也提供了丰富的滚动回调触发事件
该API存在多个bug,但是官方暂时还没有修复pageScrollTo的bug

用户转发 onShareAppMessage
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,在用户点击转发按钮的时候会调用,此事件需要return一个Object,包含title和path两个字段,用于自定义转发内容
在这里插入图片描述
在这里插入图片描述
转发注意事项:
按需出现:并非所有页面都适合放置转发按钮,涉及用户隐私的非公开内容,或可能打断用户完成当前操作体验的场景,并不推荐使用转发。同时,由于转发过程中,微信将截取用户屏幕图像作为配图,因此,需要注意帮助用户屏蔽个人信息。
尊重意愿:理所当然,并非所有的用户,都喜欢与朋友分享你的小程序。因此,它不应该成为一个诱导或强制行为,如转发后才能解锁某项功能等。所以这类做法不仅不被推荐,还会违反小程序《运营规范》。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值