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

注册页面:
对于小程序中的每个页面,在页面对应的 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把数据传递给渲染层,可以达到更

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值