迷你應用程式專案結構
和之前一樣,標記語言、樣式設定語言和元件一樣;此外,最小的應用程式專案結構等詳細資料,例如副檔名或預設名稱也有所不同。不過,整體而言,所有超級應用程式供應商都是如此。專案結構一律由:
- 可初始化迷你應用程式的根檔案
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
中進行這項操作。最小的應用程式生命週期主要包含四個事件:launch
、show
、hide
和 error
。這些事件的處理常式能以設定物件的形式傳遞至 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、Alipay、百度、ByteDance 和 Quick App 的概念都相同。
頁面生命週期
頁面生命週期與應用程式生命週期類似,也提供開發人員可監聽和回應的生命週期事件。這些核心事件包括 load
、show
、ready
、hide
和 unload
。部分平台會提供額外事件,例如 pulldownrefresh
。設定事件處理常式需在為每個頁面定義的 Page()
方法中完成。針對來自專案結構的 index
或 other
頁面,請分別在 index.js
或 other.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.js 或 create-react-app
相當的建構體驗相當,若開發人員明確選擇不接觸,一律不接觸建構參數。產生的處理檔案最終會經過簽署、加密並封裝成一或多個 (子) 套件,然後上傳至超級應用程式供應商的伺服器。子套件適用於延遲載入,因此不必一次下載迷你應用程式。包裝詳細資料僅供參考,請勿加以記錄,但 WeChat 的 wxapkg
格式等部分套件格式也採用了反向工程。
特別銘謝
本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 審查。