注册页面:
对于小程序中的每个页面,在页面对应的 page.js 文件中调用 Page 方法注册页面示例
作用:指定页面的初始数据、生命周期回调、事件处理函数等。
页面的用户行为:
小程序宿主环境提供了四个和页面相关的用户行为回调
页面构造/注册器Page()
宿主环境提供了Page()构造器用来注册小程序页面
Page()在页面脚本page.js中调用,page()的调用方式如下所示:
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
/*页面滚动*/
onPageScroll:function(){
}
})
Page构造器接受一个Object参数
data属性是当前页面的初始数据
onLoad、onReady、onShow、onHide、onUnload ,这5个回调是Page页面实例的生命周期函数,即页面生命周期
onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll ,这4个回调是页面的用户行为,即页面用户行为
Page构造器参数
小程序界面渲染
小程序页面渲染的基本原理:
程序的页面结构由WXML进行描述,WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段,数据来自于页面Page构造器的data字段,data参数是页面首次渲染时从逻辑层传递到渲染层的数据。
双线程下的页面渲染:
小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主坏境会把WWML转化成对应的js对象;在逻辑层通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,在=再经过对比前后差异,把差异应用在原来的DOM树上,渲染出正确的UI界面。
页面数据
1.页面数据:page构造器data参数
<view>{
{text2}}</view>
<view>{
{array[0].msg}}</view>
data:{
text:"初始化显示数据",
array: [{ msg:'数据1' }, { msg:'数据2' }]
}
宿主环境所提供的Page实例的原型中有setData函数,调用this.setData把数据传递给渲染层,可以达到更