推56論壇

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

QQ登錄

只需一步,快速開始

    查看: 1060|回複: 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 )

    豫公網安備 41172202000143號

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

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回複 返回頂部 返回列表