项目结构、生命周期和捆绑

Thomas Steiner

迷你应用项目结构

和之前提到的标记语言、样式语言和组件一样；使用迷你版应用 文件扩展名或默认名称等详细信息也会有所不同。不过，所有超级应用提供商的总体思路是相同的。项目结构始终由以下部分组成：

  • 用于初始化迷你版应用的根文件 app.js。
  • 配置文件 app.json，大致对应于 Web 应用清单。
  • 具有共享默认样式的可选通用样式表文件 app.css。
  • 一个包含 build 信息的 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、Baidu、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 格式）已不存在 reverse-engineered。

致谢

本文由以下人员审核： Joe Medley Kayce Basques、 Milica Mihajlija， Alan Kent， 和 Keith Gu。