小程序 | 5-页面生命周期

小程序中的每个页面都有一个对应的 js 文件，在小程序初始化过程中，会调用其中的 Page() 实现该页面实例的注册。

在注册页面实例时，我们可以做以下事情:

• 在生命周期函数中发送网络请求，从服务器获取数据

• 初始化一些数据，以方便被 wxml 引用展示

• 监听 wxml 中相关的事件

js 函数的两种写法：

<!--方式1-->
onLaunch:function(){
}
​
<!--方式2-->
onLaunch(){
}

1. 页面生命周期

页面展示时，生命周期函数会依次执行 onLoad、onShow、onReady。onReady 仅在初次渲染完成时执行。

某个页面被销毁时，会触发 onUnload.

如上图，页面在渲染时会使用两个线程，这就是双线程渲染模型。View Thread 负责页面渲染，AppService Thread 负责监听和数据处理，为 View Thread 提供数据。

2. 初始化数据

通常是在 onLoad 中发送网络请求，获取页面展示所需的数据。

注意：在请求数据时，如果不使用 => 箭头函数，就需要按照如下写法。

Page({
  data: {
    list: []
  },

  const that = this;
  wx.request({
    url: `xxxx`,
    success: function (res) {
      const data = res.data.data.list;
        //此处不能用 this，this 指向的不再是 page 对象
        that.setData({
          list: data
        })
    }
  })
})

箭头函数写法：

Page({
  data: {
    list: []
  },

  wx.request({
    url: `xxxx`,
    success: (res)=> {
      const data = res.data.data.list;
      	  // 在使用 => 箭头函数时，其中的 this 会指向正确的对象，此处会指向 Page 实例
        this.setData({
          list: data
        })
    }
  })
})

3. 监听 wxml 中的事件

在 wxml 的组件中注册的事件需要在 js 文件中定义对应的方法，这样当用户触发 wxml 中的事件后就会调用 js 中对应的方法

4. 其他事件监听

如页面滚动，上拉和下拉等事件。

 

---