一、生命周期（微信小程序开发【有基础】-组件篇）

1.小程序生命周期

  • onLaunch：小程序初始化完成，全局只触发一次
  • onShow：当小程序启动，或从后台进入前台时触发
  • onHide：前台进入后台时触发
  • onError：小程序发生错误时触发
  • 其他：详见 官方开发手册（小程序生命周期）

app.js：

 1 App({
 2     onLaunch() {
 3         console.log("小程序初始化完成，全局只触发一次");
 4     },
 5     onShow() {
 6         console.log("当小程序启动，或从后台进入前台时触发");
 7     },
 8     onHide() {
 9         console.log("前台进入后台时触发");
10     },
11     onError() {
12         console.log("小程序发生错误时触发");
13     }
14 })

 2.页面生命周期

  • onLoad：监听页面加载
  • onReady：页面初次渲染完成
  • onShow：页面显示
  • onHide：页面隐藏
  • onUnload：页面卸载

index.js（页面js文件）：

 1 /**
 2  * 生命周期函数--监听页面加载
 3  */
 4  onLoad(options) {
 5       console.log("页面生命周期：加载中...");
 6  },
 7  
 8 /**
 9  * 生命周期函数--监听页面初次渲染完成
10  */
11  onReady() {
12       console.log("页面生命周期：页面初次渲染完成");
13  },
14  
15 /**
16  * 生命周期函数--监听页面显示
17  */
18  onShow() {
19      console.log("页面生命周期：页面显示");
20  },
21  
22 /**
23  * 生命周期函数--监听页面隐藏
24  */
25  onHide() {
26      console.log("页面生命周期：页面隐藏");
27  },
28  
29 /**
30  * 生命周期函数--监听页面卸载
31  */
32  onUnload() {
33      console.log("页面生命周期：页面卸载");
34  }

3.页面事件处理函数

  • onPullDownRefresh：监听用户下拉动作
  • onReachBottom：页面上拉触底事件的处理函数
  • onShareAppMessage：用户点击右上角分享
  • onResize：页面大小发生变化
  • 其他：详见 官方开发手册（页面事件处理函数）

index.js（页面js文件）：

 1  /**
 2   * 页面相关事件处理函数--监听用户下拉动作
 3   */
 4   onPullDownRefresh() {
 5         console.log("页面相关事件处理函数：用户下拉动作");
 6   },
 7 
 8   /**
 9    * 页面上拉触底事件的处理函数
10    */
11   onReachBottom() {
12         console.log("页面相关事件处理函数：页面上拉触底");
13   },
14 
15   /**
16    * 用户点击右上角分享
17    */
18   onShareAppMessage() {
19         console.log("页面相关事件处理函数：用户点击右上角分享");
20   },
21   /**
22    * 页面大小发生变化
23    */
24   onResize(){
25         console.log("页面相关事件处理函数：页面大小发生变化");
26   }

4.整个小程序只有一个 App 实例，是全部页面共享的。可通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用注册在 App 上的函数。

app.js：

1 /**
2  * 定义在app.js的数据
3  */
4 App({ 
5   object:{
6       data:"全局"
7   }
8 })

index.js（页面js文件）：

 1 /**
 2  * 获取App实例
 3  */
 4  const app = getApp();
 5 
 6  Page({
 7      /**
 8       * 生命周期函数--监听页面加载
 9       */
10       onLoad(options) {
11            console.log(app.object.data);
12       },
13  }）

 

posted @ 2022-05-15 11:47  阳光下的承诺  阅读(132)  评论(0)    收藏  举报