推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 1402|回複: 0

[小程序教程] 微信小程序教程(2):微信小程序的生命周期實例演示

[複制鏈接]
發表于 2018-4-21 16:01:51 | 顯示全部樓層 |閱讀模式

上篇教程

微信小程序的文件結構 —— 微信小程序教程系列(1)



微信小程序的生命周期函數有2個

一個是App的生命周期

另一個是Page的生命周期



App的生命周期





示例:演示App的生命周期函數
app.js:
App({
  onLaunch: function () {
    console.log("App生命周期函數——onLaunch函數");
  },
  onShow: function () {
    console.log("App生命周期函數——onShow函數");
  },
  onHide: function () {
    console.log("App生命周期函數——onHide函數");
  },
  onError: function (msg) {
    console.log("App生命周期函數——onError函數");
  }
})

運行:
(1)程序啓動時,會觸發以下2個函數
第一執行onLauch函數——當小程序初始化完成時,會觸發 onLaunch(全局只觸發一次)
第二執行onShow函數——當小程序啓動,或從後台進入前台顯示,會觸發 onShow



(2)當點擊"後台"時,會觸發以下函數(即程序被轉到後台時)
onHide函數——當小程序從前台進入後台,會觸發 onHide

當點擊"前台"時,就會再次觸發onShow函數






Page的生命周期




示例: 演示Page的生命周期函數
home.js:
Page({
  data:{ },
  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函數");
  }

})

運行:
(1)
當啓動home頁面時,會觸發以下3個函數
第一執行onLoad函數——在文檔加載的時候會執行
第二執行onShow函數——在頁面顯示的時候會執行
第三執行onReady函數——在頁面初次渲染完成時執行


(2)在Home頁面時,當點擊左上角"返回",會觸發以下函數
onUnload函數——在頁面銷毀時執行


(3)在Home頁面時,當點擊"後台"時,會觸發以下函數(即程序被轉到後台時)
onHide函數——在頁面隱藏時會執行


(4)在Home頁面時,當點擊"前台"時,會觸發以下函數(即程序從後台被重新轉回前台時)
onShow函數——在頁面顯示時會執行







示例:演示App生命周期函數和Page生命周期函數的結合使用

app.js:

在app.js文件添加以下幾個生命周期函數

App({

  onLaunch: function () {

    console.log("App生命周期函數——onLaunch函數");

  },

  onShow: function () {

    console.log("App生命周期函數——onShow函數");

  },

  onHide: function () {

    console.log("App生命周期函數——onHide函數");

  },

  onError: function (msg) {

    console.log("App生命周期函數——onError函數");

  }

})

index.js:

在index.js文件添加以下幾個生命周期函數

Page({

  data:{ },

  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函數");

  }

})

運行:

(1)程序啓動時

首先執行的是App的生命周期函數

接著再執行Page的生命周期函數


(2)當點擊"後台"時,會觸發以下函數(即程序被轉到後台時)

首先執行Page的onHide生命周期函數

再執行App的onHide生命周期函數

(3)當點擊"前台"時(即程序返回前台時)

首先執行Page的onShow生命周期函數

再執行App的onShow生命周期函數

高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即注冊(限中文)

本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411

QQ|免責聲明|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.lifenize.com)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回複 返回頂部 返回列表
X-POWER-BY FNC V1.0.0 FROM 自制56