迷你應用程式專案結構
和以往一樣，標記語言、樣式語言和元件。即使應用程式專案結構最小，副檔名或預設名稱等詳細資料也會不同。然而，對於所有超級應用程式供應商而言，總體概念是相同的。專案結構一律包含下列內容：
- 初始化迷你應用程式的根檔案
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。