迷你应用项目结构
与之前标记语言、样式设置语言和组件一样，在迷你应用项目结构中，文件扩展名或默认名称等详细信息也会有所不同。但总体思路对于所有超级应用提供程序都是相同的。项目结构始终由以下部分组成：
- 用于初始化迷你应用的根文件
app.js。 - 配置文件
app.json，大致对应于 Web 应用清单。 - 具有共享默认样式的可选通用样式表文件
app.css。 - 包含 build 信息的
project.config.json文件。
所有页面都存储在 pages 文件夹中的各个子文件夹中。每个页面子文件夹都包含一个 CSS 文件、一个 JS 文件、一个 HTML 文件以及一个可选的配置 JSON 文件。除了文件扩展名之外，所有文件的名称都必须与所属文件夹的名称相同。这样，迷你应用只需要指向 app.json 文件（类似清单文件的文件）中的目录的指针，并且可以动态查找所有子资源。因此，从 Web 开发者的角度来看，迷你应用是多页面应用。
├── 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、支付宝、百度、ByteDance和快捷应用的概念都是相同的。
页面生命周期
与应用生命周期类似，页面生命周期也具有开发者可以监听并做出响应的生命周期事件。这些核心事件包括 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 的构建体验相当，如果开发者明确选择不这样做，则绝不会触碰构建参数。生成的已处理文件最终经过签名、加密并打包到一个或多个（子）软件包中，然后上传到超级应用提供商的服务器。子软件包用于延迟加载，因此不必一次性下载所有迷你应用。包装细节应保密并且不会记录，但一些软件包格式（例如微信的 wxapkg 格式）已经过逆向工程。
致谢
本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 审阅。