小程序界面渲染
小程序界面渲染的基本原理:
小程序的页面结构由WXML进行描述,WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段,数据来自于页面Page构造器的data字段,data参数是页面首次渲染时从逻辑层传递到渲染层的数据。
双线程下的界面渲染:
小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的DOM树上,渲染出正确的UI界面
双线程下界面渲染概念图
逻辑层传递数据到渲染层
小程序双线程→渲染层Webview、逻辑层JsCore
页面数据
页面数据:Page构造器data参数
<view>{{text}}</view>
<view>{{array[0].mag}}</view>
/**
* 页面的初始数据
*/
data: {
text: '初始化显示数据',
array:[
{mag:'数据1'},
{mag:'数据2'}
]
},
<!-- 渲染结果 -->
<page>
<view>初始化显示数据</view>
<view>数据1</view>
</page>
宿主环境所提供的Page实例的原型中有setData函数,调用this.setData把数据传递给渲染层,可以达到更新界面的目的。
页面数据data:
- 由于小程序的渲染层和逻辑层分别在两个线程中运行,所以setData传递数据实际是一个异步的过程,所以setData的第二个参数是一个callback回调,在这次setData对界面渲染完毕后触发。
- setData其一般调用格式是 setData(data, callback),其中data是由多个key: value构成的Object对象。
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
name:"二狗子"
}),function(){
console.log("setData对页面渲染完毕后出发");
}
},
- 实际在开发的时候,页面的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可以停止当前页面的下拉刷新。
②上拉触底 onReachBottom
- 场景:多数的购物小程序会在首页展示一个商品列表,用户滚动到底部的时候,会加载下一页的商品列表渲染到列表的下方,我们把这个交互操作叫为上拉触底。宿主环境提供了上拉的配置和操作触发的回调,如下代码所示。
- 监听用户上拉触底事件。可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance的值。在触发距离内滑动期间,本事件只会被触发一次。
新闻展示页效果
接下来在page.json中设置触发距离onReachBottomDistance的值
(当界面的下方距离页面底部距离小于100像素时触发回调)
{
"usingComponents": {},
"onReachBottom":100
}
接下来在逻辑文件中绑定事件onReachBottom,监听事件上拉触底行为
onReachBottom: function () {
console.log("您上拉了页面")
}
此时上拉触底时,便会触发触底事件回调
接下来细化回调函数,当触发上拉触底时动态添加新闻列表内容,并完善内容加载,添加loading动画
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("您上拉了页面")
wx.showLoading({
title: '请稍等一下',
})
var timer = setTimeout(()=>{
var new_array = [
{ title: '二狗', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' },
{ title: '二狗风的告白后投入方后投入方后投法仍', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' },
{ title: '二狗', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' },
{ title: '二狗', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' },
{ title: '二狗风的告白后投入方后投入方后投法仍', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' },
{ title: '二狗', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' },
{ title: '二狗', img: 'http://img1.imgtn.bdimg.com/it/u=3160107510,784197751&fm=26&gp=0.jpg' }
];
this.setData({
itemList: this.data.itemList.concat(new_array)
})
wx.hideLoading();
clearTimeout(timer);
}, 1500)
},
界面交互API:
wx.showLoading({})显示加载框
wx.hideLoading()隐藏加载框
开发场景代码,一般用接口调用获取数据,格式如下
③页面滚动 onPageScroll
监听用户滑动页面事件,参数为 Object,包含 scrollTop 字段,表示页面在垂直方向已滚动的距离(单位px)
应用场景案例:返回顶部
- 获取滚动条当前位置
onPageScroll(option){
console.log(option);
},
- 添加一键返回顶部功能
<view class="toTop" bindtap="toTopFn">↑</view>
.toTop{
width: 100rpx;
height: 100rpx;
background-color: rgba(0,0,0,.3);
border-radius: 50%;
line-height: 100rpx;
text-align: center;
color: #fff;
position: fixed;
bottom: 80rpx;
right: 80rpx;
}
/**一键返回顶部 */
toTopFn(option){
if (wx.pageScrollTo){
wx.pageScrollTo({
scrollTop: 0,
})
}else{
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本',
})
}
}
注意:需要判断当前微信是否支持wx.pageScrollTo滚动API,如果不支持则弹框提示用户给予反馈
补充说明:
①当然我们有些时候并不想整个页面进行滚动,而是页面中某一小块区域需要可滚动,此时就要用到宿主环境所提供的scroll-view可滚动视图组件。可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动,scroll-view组件也提供了丰富的滚动回调触发事件,这部分稍后详细介绍。
②该API存在多个bug,但是官方暂时还没有修复pageScrollTo的bug
④用户转发 onShareAppMessage
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,在用户点击转发按钮的时候会调用,此事件需要return一个Object,包含title和path两个字段,用于自定义转发内容。
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title:'自定义转发标题',
path:'page/home/home'
}
},
转发注意事项:
①按需出现:并非所有页面都适合放置转发按钮,涉及用户隐私的非公开内容,或可能打断用户完成当前操作体验的场景,并不推荐使用转发。同时,由于转发过程中,微信将截取用户屏幕图像作为配图,因此,需要注意帮助用户屏蔽个人信息。
②尊重意愿:理所当然,并非所有的用户,都喜欢与朋友分享你的小程序。因此,它不应该成为一个诱导或强制行为,如转发后才能解锁某项功能等。所以这类做法不仅不被推荐,还会违反小程序《运营规范》。