小程序的啓動流程

當我們啓動一個小程序時，會按照下面的流程開始執行

第一步：下載小程序包
首先，我們需要知道的是，當我們使用小程序的時候就跟使用一個手機上的 app 一樣，都需要下載，只不過，小程序的包文件很小，所以下載就很快，我們幾乎就感受不到它的下載過程

第二步：啓動小程序
當小程序下載好之後，就開始了小程序的啓動

第三步：加載解析 app.json
當小程序啓動之後，第一件做的事情就是加載解析 app.json 文件，這個文件裏面包含着許多重要的全局配置，比如 pages（定義了頁面的路徑）、window（定義了窗口的如何展示）、tabBar（定義了底部tab 欄的展示）

第四步：註冊 App（App裏面包含了許多的聲明週期函數），當註冊 App 的時候也會執行 App裏面的生命週期函數

第五步：加載自定義組件代碼註冊自定義組件

從這一步開始，就開始了每個頁面的相關解析以及界面的渲染，一個小程序會有許多的頁面，而每個頁面都會執行下面的這些步驟

第六步：加載解析 page.json
page.json裏面包含了許多局部配置

第七步

渲染層加載渲染 page.wxml
邏輯層註冊 Page（邏輯層也有對應的生命週期）並執行 Page 生命週期

以上的步驟可以如圖下圖所示

註冊 App

每個小程序都需要在 app.js 文件中調用 App 方法註冊小程序實例
另外在註冊的同時，也可以綁定不同的生命週期函數；
除此之外，還可以根據各個生命週期函數的不同特點從而在不同的生命週期函數裏執行不同的代碼

常用的幾個生命週期函數

App({
  // 當小程序初始化完成時，會觸發 onLaunch (全局只觸發一次)
  onLanuch: function() {
   console.log('小程序初始化完成，onLaunch');
  },
  // 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
  onShow: function() {
    console.log('小程序第一次啓動，或者從後臺進入前臺，onShow');
  },
  // 當小程序從前臺進入後臺，會觸發 onHdie
  onHide: function() {
    console.log('小程序從前臺進入後臺，onHide');
  },
  // 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
  onError: function(err) {
    console.log('小程序發生錯誤，err');
  }
})

註冊 App 時，我們能夠做的事情

1.判斷小程序的進入場景
常見的進入場景：羣聊會話中打開、小程序列表打開、微信掃一掃打開、另一個小程序中打開

在 onlaunch 和 onShow 聲明週期回調函數中，有一個 options 參數，options 中有一個值 scene，我們可以將得到的 scene 的值去和官方文檔比較從而得知小程序的進入場景是什麼

2.監聽聲明週期函數，在不同的生命週期函數中執行對應的業務邏輯，比如可以在某個生命週期函數中或獲取用戶的信息

獲取用戶信息
第一種方式

wx.getUserInfo({
  success: function(res) {
    console.log(res);
  }
})

第二種方式

<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授權</button>

獲取的用戶的信息之後，可一通過使用 open-data組件將用戶的信息展示到界面上

<open-data type="userAvatarUrl"></open-data>

3.保存全局變量
因爲 App() 實例只有一個，並且是全局共享的，所以我們就可以在 App 裏面保存一些可以共享的數據

globalData: {
    name: '木子雨',
    age: 18
  }

const app = getApp();
Page({
  data: {
    name: '',
    age: app.globalData.age
  },
  getData() {
    this.setData({
      name: app.globalData.name,
      age: app.globalData.age
    })
  },
})

註冊 Page

註冊 Page 和註冊 App類似，並且它們的作用也是類似的
官方文檔

 onLoad: function (options) {
    console.log('頁面加載：onLoad');
  },
  onShow: function () {
    console.log('頁面展示：show');
  },
  onReady: function () {
    console.log('頁面渲染：ready');
  },
  onHide: function () {
    console.log('頁面隱藏：hide');
  },
  onUnload: function () {
    console.log('頁面卸載：unload');
  },

註冊 App 時，我們能夠做的事情
1.在生命週期函數中發送網絡請求，從服務器獲取數據；
2. 初始化一些數據，以方便被wxml引用展示；
3.監聽wxml中的事件，綁定對應的事件函數；
4.其他一些監聽（比如頁面滾動、上拉刷新、下拉加載更多等）；

Page 實例的生命週期

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

小程序的啓動流程