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

迷你应用项目结构

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

  • 用于初始化迷你版应用的根文件 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 审核。