微信小程序文档框架部分导读

项目结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page，一个典型的小程序项目结构如下：

├── app.js
├── app.json
├── app.wxss
└── page
    ├── index.js
    ├── index.wxml
    ├── index.json
    └── index.wxss

各文件说明如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表
index.js	是	页面逻辑
index.wxml	是	页面结构
index.wxss	否	页面样式表
index.json	否	页面配置

如果按照功能进行分类的话，这些文件可以分为三类：

配置文件

包括各“.json”文件，它包括一些配置内容。其中页面.json不是必须的（你的页面配置可以直接写在逻辑层，不需要单独抽离出一个文件）；而app.json1是必须的，它决定页面文件（page）的路径、窗口表现、设置网络超时时间、设置多 tab 等。

逻辑层

微信小程序逻辑层结构如下：

图中：

• app.js指定小程序的生命周期函数、全局数据等2。
• page.js（page指某个页面名称）指定页面的生命周期、事件处理函数、页面数据等3（此js会与视图层进行数据绑定）。
• 其他模块化js指定公共的逻辑

注意：

• 这些js文件可以通过微信小程序的“模块化”接口进行代码共享4
• 微信小程序框架通过场景值机制5通知app.js小程序的进入方式
• 微信小程序框架通过路由机制6管理页面切换时页面生命周期变化
• js文件可以调用微信原生 API7

小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。在 JavaScript 的基础上，微信小程序框架有一些修改：

• 增加 App 和 Page 方法，进行程序和页面的注册。
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
• 每个页面有独立的作用域，并提供模块化能力。
• 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
• 开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

视图层

框架的视图层由 WXML 与 WXSS 编写，将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

其包括：

• WXML(WeiXin Markup language) 用于描述页面的结构8。
• WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构9。
• WXSS(WeiXin Style Sheet) 用于描述页面的样式10。
• 组件(Component)是视图的基本组成单元11。

其他

另外，微信小程序框架支持自定义组件12、插件13、分包加载14等个性化需求，具体信息请看原始文档。

微信小程序提供一个任务异步处理机制：worker机制15，具体信息请看原始文档。

---

1. app.json的具体信息请看微信小程序app.json相关 ↩
2. app.js最重要的部分是App()函数，具体信息请看微信小程序app函数相关 ↩
3. page.js最重要的部分是Page()函数，具体信息请看微信小程序page函数相关 ↩
4. 微信小程序框架模块化接口具体信息请看微信小程序数据、函数共享 ↩
5. 场景值机制的具体信息请看场景值 ↩
6. 路由机制的具体信息请看微信公众号页面路由 ↩
7. 微信原生API具体信息请看API ↩
8. WXML的具体信息请看微信小程序WXML ↩
9. WXS的具体信息请看WXS ↩
10. WXSS的具体信息请看WXSS ↩
11. 组件的具体信息请看组件 ↩
12. 自定义组件 ↩
13. 插件 ↩
14. 分包加载 ↩
15. worker机制 ↩