推56論壇

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

QQ登錄

只需一步,快速開始

    查看: 1671|回復: 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生命周期函數


    推56論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與推56論壇立場無關
    2、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
    3、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
    4、如本帖侵犯到任何版權問題,請立即告知本站,本站將予與清除侵權內容或刪除該帖子并致以最深的歉意
    5、推56論壇管理員和版主有權不事先通知發貼者而刪除本文

    本版積分規則

    關閉

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

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

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

    推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回復 返回頂部 返回列表
    3分赛车计划软件 上海4d选四开奖结果 棋牌游戏网址谁有 青海快三遗漏数据 5分pk10走势怎么看 湖北十一选五 豆豆江苏宜兴麻将 雀友麻将机 qq麻将规则及番种介绍 上海11选5时时彩开奖 湖人比分直播 快中彩开奖结果查询 ag捕鱼王2平台官网