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

迷你应用项目结构

与之前涉及的标记语言、样式语言和组件一样;就迷你应用项目结构而言,文件扩展名或默认名称等详细信息也有所不同。不过,所有超级应用提供商的整体思路都是相同的。项目结构始终由以下部分组成:

  • 用于初始化迷你版应用的根文件 app.js
  • app.json大致对应网络应用清单的配置文件。
  • 可选的通用样式表文件 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 中执行。迷你应用生命周期本质上由四个事件组成: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",
});

与往常一样,具体细节会有所不同,但 WeChatAlipayBaiduByteDance快应用的概念是相同的。

页面生命周期

与应用生命周期类似,页面生命周期也有生命周期事件,开发者可以监听这些事件并做出响应。这些核心事件包括 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 类似,在这些平台中,如果开发者明确选择不使用,则永远不会接触构建参数。生成的已处理文件最终会进行签名、加密,并打包到一个或多个(子)软件包中,然后上传到超级应用提供商的服务器。子软件包用于延迟加载,因此无需一次性下载迷你应用。包装详细信息应保密且不会进行记录,但某些软件包格式(例如微信的 wxapkg 格式)已进行了逆向工程

致谢

本文由 Joe MedleyKayce BasquesMilica MihajlijaAlan Kent 和 Keith Gu 审核。