小程序项目结构
与之前的标记语言、样式语言和组件一样;对于小程序项目结构,文件扩展名或默认名称等细节也各不相同。不过,对于所有超级应用提供商来说,总体思路是相同的。项目结构始终包含:
- 一个根文件
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
中。小程序生命周期主要由四个事件组成: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",
});
通常,各个细节有所不同,但 微信、支付宝、百度、字节跳动 以及 快应用 的概念是相同的。
页面生命周期
与应用生命周期类似,页面生命周期也有生命周期事件,开发人员可以监听这些事件并做出反应。这些核心事件是 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 审阅。