小程序学习（四）小程序逻辑层之注册页面

小程序学习（四）小程序逻辑层之注册页面

注册页面（Page）

小程序页面的注册，是通过 Page()  函数来完成的。接受一个 object 参数，指定页面的初始数据，生命周期、事件处理函数等。

object 参数的属性：

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面初次渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
其他	Any	开发者可以添加任意的函数或数据到 object 参数中 在页面的函数中用 this 可以访问

//index.js
Page({
  data: {
    text: "This is page data." //页面初始数据
  },
  onLoad: function(options) {
    // Do some initialize when page load. 页面加载
  },
  onReady: function() {
    // Do something when page ready. 页面初次渲染（加载）完成
  },
  onShow: function() {
    // Do something when page show. 页面显示出来
  },
  onHide: function() {
    // Do something when page hide. 页面隐藏
  },
  onUnload: function() {
    // Do something when page close. 页面卸载（彻底关闭）
  },
  onPullDownRefresh: function() {
    // Do something when pull down. //页面下拉
  },
  onReachBottom: function() {
    // Do something when page reach bottom. //上拉到接触到底部
  },
  onShareAppMessage: function () {
   // return custom share data when user share. //页面分享、转发
  },
  onPageScroll: function() {
    // Do something when page scroll //页面滑动
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.' //更新前台页面上值的事件函数
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化数据

初始化数据将作为页面的第一次渲染。data将会以Json的形式由逻辑层传递到渲染层，所以其数据必须是可以转为JSON的格式：字符串、数字、布尔值、对象、数组。

渲染层可以通过WXML（页面的前端） 对数据进行绑定。

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'Hello WeiXin App',
    array: [{msg: 'Hello'}, {msg: 'World'}]
  }
})

生命周期函数

onLoad：页面加载

　　一个页面只会调用一次，可以在onLoad中获取打开当前页面所调用的query值。

onShow：页面显示

　　每次打开页面都会调用一次。

onReady：页面初次渲染完成

　　一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

　　对界面的设置如：wx.setNavigationBarTitle 请在 onReady 之后设置。

onHide：页面隐藏

　　当 navigateTo 或者底部的 tab 切换时调用

onUnload：页面卸载

　　当 redirectTo 或 navigate'Back 的时候调用

 

onLoad参数： object ，其他页面打开当前页面所调用的 query 参数

页面相关事件处理函数

　　onPullDownRefresh：下拉刷新

　　　　监听用户下拉刷新事件。

　　　　需要在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh.

　　　　当处理完数据刷新后， wx.stopPullDownRefresh 可以停止当前页面的下拉刷新

　　onReachBottom：上拉触底

　　　　监听用户上拉触底事件

　　　　可以在 app.json 的window 选项中或页面配置中开启 onReachBottomDistance

　　　　在出发距离内滑动期间，本事件只会被触发一次

　　onPageScroll：页面滚动

　　　　监听用户滑动页面事件

　　　　参数为 Object ，包含一个字段 scrollTop  类型为：Number ，指当前页面在垂直方向已滚动的距离

　　onShareAppMessage：用户转发

　　　　只有定义了此事件处理函数。右上角点开才出出现“转发”按钮

　　　　用户点击转发按钮的时候，会调用该事件

　　　　此事件需要 return 一个 object ，用户自定义转发内容　　　　

　　　　自定义转发的字段： title 转发的标题（默认为小程序名称）；path 转发的路径，当前页面的 path 必须以 / 开头的完整路径

　　　　

Page({
  onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

事件处理函数

除了初始化数据和生命周期函数，Page中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数

<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('你点击了这个View')
  }
})

Page.prototype.route 

 route 字段可以获取当前页面的路径

Page.prototype.setData()

 setData 函数用户将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

setData()参数格式

字段	类型	必填	描述	最低版本
data	Object	是	这次要改变的数据
callback	Function	否	回调函数	1.5.0

object 以 key，value的形式表示将this.data中的 key 对应的值改变成 value。callback 是一个回掉函数，在这次 setData 对界面渲染完毕后调用。

其中 key 可以非常灵活，以数据路径的形式给出，如 array[1].message ,a,b,c,d 并且不需要在 this.data 中预先定义

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致
2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

生命周期

下面这张图，说明了 Page 实例的生命周期 。（图来自官方教程）

以下是我对这张图的理解，欢迎给出指正。

上图将整个生命周期划分为两个线程，或者可以说两个模块。一个是前端视图，另一个是页面的后端处理

第一步、首先前端页面初始化，后台注册页面。

第二布、当前端页面初始化完成后，通知后台，并等待数据进行加载；后台注册页面完成，等待前端通知。onLoad、onShow

第三部、后台接收到前端的通知后，后台传递数据给前端

第四步、前端开始加载后台传递的数据，加载完成后，通知后台

第五步、所有页面内容加载完成 onReady

第六步、前端操作和后台相应操作的事件函数，传递数据等等。每次前端与后台进行交互后，前端的页面需要重新构建。

第七步、后台执行隐藏页面操作，前端页面隐藏，当再次显示时，前端页面再次重新构建，但是后台的页面生命一直是存在的 Alive。（这一步可能不存在）

第八步、卸载页面。onUnload。结束页面生命。