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

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

  • 用於初始化迷你應用程式的根檔案 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",
});

如往常,各項細節會有所不同,但WeChat支付寶百度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 共同審查。