项目结构、生命周期和打包

小程序项目结构

与之前的标记语言、样式语言和组件一样;对于小程序项目结构,文件扩展名或默认名称等细节也各不相同。不过,对于所有超级应用提供商来说,总体思路是相同的。项目结构始终包含:

  • 一个根文件 app.js,用于初始化小程序。
  • 一个配置文件 app.json,它大致对应于 Web 应用 manifest(web app manifest)。
  • 一个可选的通用样式表文件 app.css,其中包含共享的默认样式。
  • 一个 project.config.json 文件,其中包含构建信息。

所有页面都存储在 pages 文件夹中的各个子文件夹中。每个页面子文件夹都包含一个 CSS 文件、一个 JS 文件、一个 HTML 文件和一个可选的配置 JSON 文件。所有文件都必须以其所在的文件夹命名,文件扩展名除外。这样,小程序只需要在 app.json 文件(类似 manifest 的文件)中指向目录,就可以动态查找所有子资源。从 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 中。小程序生命周期主要由四个事件组成:launchshowhideerrorApp() 方法可以以配置对象的形式传递这些事件的处理程序,该对象还可以包含一个 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",
});

通常,各个细节有所不同,但 微信支付宝百度字节跳动 以及 快应用 的概念是相同的。

页面生命周期

与应用生命周期类似,页面生命周期也有生命周期事件,开发人员可以监听这些事件并做出反应。这些核心事件是 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 审阅。