微信小程序開發之(zhī)詳解生命周期方法 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序開發之(zhī)詳解生命周期方法

發表時(shí)間:2021-3-31

發布人(rén):融晨科技

浏覽次數:71

在(zài)小程序中 ,通過App()來(lái)注冊一個(gè)小程序 ,通過Page()來(lái)注冊一個(gè)頁面

先來(lái)看一張小程序項目結構

從上(shàng)圖可以(yǐ)看出(chū),根目錄下面有包含了(le/liǎo)app.js,app.wxss,app.json三個(gè)文件

這(zhè)是(shì)小程序的(de)全局文件,app.js是(shì)小程序邏輯 ,app.json是(shì)小程序公共設置,app.wxss是(shì)小程序公共樣式表

在(zài)app.js文件中 , 定義了(le/liǎo)一些生命周期方法 , onLaunch,onShow,onHide,onError,以(yǐ)及任意開發者添加的(de)函數或者數據(通過this可以(yǐ)訪問)

以(yǐ)下是(shì)各個(gè)生命周期方法作用和(hé / huò)描述

onLaunch 生命周期函數--監聽小程序初始化 當小程序初始化完成時(shí),會觸發 onLaunch(全局隻觸發一次)

onShow 生命周期函數--監聽小程序顯示 當小程序啓動,或從後台進入前台顯示,會觸發 onShow

onHide 生命周期函數--監聽小程序隐藏 當小程序從前台進入後台,會觸發 onHide

onError 錯誤監聽函數 當小程序發生腳本錯誤,或者 api 調用失敗時(shí),會觸發 onError 并帶上(shàng)錯誤信息

其他(tā) Any 開發者可以(yǐ)添加任意的(de)函數或數據到(dào) Object 參數中,用 this 可以(yǐ)訪問

我們在(zài)app.js文件中定義以(yǐ)下方法 ,并打印出(chū)來(lái)

App({
  onLaunch: function (options) {
    console.log("app.js ---onLaunch---" + JSON.stringify(options));
  },
  onShow:function(){
    console.log("app.js ---onShow---");
  },
  onHide:function(){
    console.log("app.js ---onHide---");
  },
  onError: function (msg){
    console.log("app.js ---onError---" + msg);
  },
  globalData: {
    userInfo: null
  }
})

這(zhè)是(shì)我們打開一個(gè)小程序打印出(chū)來(lái)的(de)一些方法

可以(yǐ)看出(chū), 打開程序依次執行了(le/liǎo)app.js下面onLaunch和(hé / huò)onShow方法,以(yǐ)及page頁面中的(de)onLoad,onShow和(hé / huò)onReady方法

其中 , onLaunch, onShow 方法會返回一個(gè)參數對象, 裏面包含了(le/liǎo)三個(gè)參數 , path,query和(hé / huò)scene ,path是(shì)打開小程序的(de)路徑

query是(shì)打開小程序頁面url的(de)參數,scene是(shì)打開小程序的(de)場景值

更多場景值可以(yǐ)查看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/scene.html

小程序切換到(dào)後台會執行以(yǐ)下2個(gè)方法

返回小程序前台

在(zài)page頁面中定義的(de)生命周期方法

onLoad 生命周期函數--監聽頁面加載

onReady 生命周期函數--監聽頁面初次渲染完成

onShow 生命周期函數--監聽頁面顯示

onHide 生命周期函數--監聽頁面隐藏

onUnload 生命周期函數--監聽頁面卸載

Page({
  onLoad: function (options) {
    console.log("page ---onLoad---");
  },
  onReady: function () {
    console.log("page ---onReady---");
  },
  onShow: function () {
    console.log("page ---onShow---");
  },
  onHide: function () {
    console.log("page ---onHide---");
  },
  onUnload: function () {
    console.log("page ---onUnload---");
  }
})

其中,打開小程序後會依次執行onLoad,onReady和(hé / huò)onShow方法

前後台切換會分别執行onHide和(hé / huò)onShow方法,

當小程序頁面銷毀時(shí)會執行 onUnload方法

例如,我們在(zài)details.js中定義onUnload方法

onUnload: function () {
    console.log("details.js  --onUnload")
  },

當我們從首頁打開一個(gè)新頁面details.wxml,然後再關閉着這(zhè)個(gè)頁面

從上(shàng)圖可以(yǐ)看到(dào)頁面執行了(le/liǎo)onUnload方法

另外, 小程序爲(wéi / wèi)我們提供了(le/liǎo)全局數據管理 ,在(zài)page頁面中通過getApp()方法獲取app.js實例

例如:

我們在(zài)app.js通過定義一個(gè)globalData數據對象

App({
  globalData: {
    userInfo: null
  }
})

// other.js
var appInstance = getApp()
console.log(appInstance.globalData)

注意:
App() 必須在(zài) app.js 中注冊,且不(bù)能注冊多個(gè)。
不(bù)要(yào / yāo)在(zài)定義于(yú) App() 内的(de)函數中調用 getApp() ,使用 this 就(jiù)可以(yǐ)拿到(dào) app 實例。
不(bù)要(yào / yāo)在(zài) onLaunch 的(de)時(shí)候調用 getCurrentPages(),此時(shí) page 還沒有生成。
通過 getApp() 獲取實例之(zhī)後,不(bù)要(yào / yāo)私自調用生命周期函數。

參考文章

微信小程序開發詳解(七)---微信小程序APP生命周期

相關案例查看更多