專案結構、生命週期及套裝組合

如同前述的標記語言、樣式語言和元件,迷你應用程式專案結構的詳細資料 (例如檔案副檔名或預設名稱) 也各不相同。不過,所有超級應用程式供應商的整體概念都相同。專案結構一律包含下列項目:

  • 用於初始化迷你應用程式的根檔案 app.js
  • 網頁應用程式資訊清單大致對應的設定檔 app.json
  • 選用的常用樣式表單 app.css,其中包含共用的預設樣式。
  • 包含版本資訊的 project.config.json 檔案。

所有網頁都儲存在 pages 資料夾中的個別子資料夾中。每個頁面子資料夾都包含 CSS 檔案、JS 檔案、HTML 檔案和選用的設定 JSON 檔案。除了檔案副檔名外,所有檔案的名稱都必須與包含該檔案的資料夾相同。同樣地,迷你應用程式只需要 app.json 檔案 (類似資訊清單的檔案) 中目錄的指標,就能動態尋找所有子資源。從網頁開發人員的角度來看,迷你應用程式就是多頁應用程式。

├── app.js               # Initialization logic
├── app.json             # Common configuration
├── app.css              # Common style sheet
├── project.config.json  # Project configuration
└── pages                # List of pages
   ├── index               # Home page
      ├── index.css         # Page style sheet
      ├── index.js          # Page logic
      ├── index.json        # Page configuration
      └── index.html        # Page markup
   └── other               # Other page
       ├── other.css         # Page style sheet
       ├── other.js          # Page logic
       ├── other.json        # Page configuration
       └── other.html        # Page markup

迷你應用程式生命週期

微型應用程式必須透過呼叫全域定義的 App() 方法,向超級應用程式註冊。參考前文所述的專案結構,這項操作會在 app.js 中發生。迷你應用程式生命週期基本上包含四個事件:launchshowhideerror。這些事件的處理常式可透過設定物件形式傳遞至 App() 方法,該方法也可能包含 globalData 屬性,可儲存應在所有頁面中全域提供的資料。

/* app.js */
App({
  onLaunch(options) {
    // Do something when the app is launched initially.
  },
  onShow(options) {
    // Do something when the app is shown.
  },
  onHide() {
    // Do something when the app is hidden.
  },
  onError(msg) {
    console.log(msg);
  },
  globalData: "I am global data",
});

如往,各項細節會有所不同,但WeChatAlipay百度ByteDance快速應用程式的概念都相同。

網頁生命週期

與應用程式生命週期類似,網頁生命週期也有生命週期事件,開發人員可以監聽這些事件並做出回應。這些核心事件為 loadshowreadyhideunload。部分平台提供其他事件,例如 pulldownrefresh。設定事件處理常式時,會在為每個網頁定義的 Page() 方法中進行。對於先前專案結構中的 indexother 頁面,這會分別發生在 index.jsother.js 中。

/* index.js */
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do something when the page is initially loaded.
  },
  onShow: function () {
    // Do something when the page is shown.
  },
  onReady: function () {
    // Do something when the page is ready.
  },
  onHide: function () {
    // Do something when the page is hidden.
  },
  onUnload: function () {
    // Do something when the page is closed.
  },
  onPullDownRefresh: function () {
    // Do something when the user pulls down to refresh.
  },
  onReachBottom: function () {
    // Do something when the user scrolls to the bottom.
  },
  onShareAppMessage: function () {
    // Do something when the user shares the page.
  },
  onPageScroll: function () {
    // Do something when the user scrolls the page.
  },
  onResize: function () {
    // Do something when the user resizes the page.
  },
  onTabItemTap(item) {
    // Do something when the user taps the page's tab.
  },
  customData: {
    foo: "bar",
  },
});

建構程序

開發人員不必處理迷你應用程式的建構程序,實際上,它會使用 Babel 編譯器等業界工具進行轉譯和壓縮,以及 PostCSS CSS 轉換器。這個建構體驗與 Next.jscreate-react-app 相當類似,開發人員可以選擇不接觸建構參數。處理後的結果檔案最後會經過簽署、加密,並封裝成一或多個 (子)套件,然後上傳至超級應用程式供應者的伺服器。子套件是用於延遲載入,因此不需要一次下載所有小型應用程式。包裝詳細資訊屬於機密資訊,因此未記錄在文件中,但 WeChat 的 wxapkg 格式等部分套件格式已進行逆向工程

特別銘謝

本文由 Joe MedleyKayce BasquesMilica MihajlijaAlan Kent 和 Keith Gu 共同審查。