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

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 @   阳光下的承诺  阅读(118)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示