微信小程序是如何工作的？
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
本节内容概要
- 目录结构
- 启动流程
- 全局配置
- 逻辑层
- 视图层
目录结构
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
app.js 必备文件，存放小程序逻辑
app.json 必备文件，存放小程序公共配置
app.wxss 存放小程序公共样式表
一个小程序页面由四个文件组成，分别是：
- js 必备文件，存放 页面逻辑
- wxml 必备文件，存放 页面结构
- json 存放 页面配置
- wxss 存放 页面样式表
启动流程
App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
App({
onLaunch(options) {
//小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
},
onShow(options) {
//小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
},
onHide() {
//小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
},
onError(msg) {
console.log(msg)
// 小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
},
globalData: 'I am global data'
})
Page(Object) 构造器
Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
// index.js
Page({
data: {
text: 'This is page data.'
},
onLoad(options) {
// Do some initialize when page load.
},
onReady() {
// Do something when page ready.
},
onShow() {
// Do something when page show.
},
onHide() {
// Do something when page hide.
},
onUnload() {
// Do something when page close.
},
onPullDownRefresh() {
// Do something when pull down.
},
onReachBottom() {
// Do something when page reach bottom.
},
onShareAppMessage() {
// return custom share data when user share.
},
onPageScroll() {
// Do something when page scroll
},
onResize() {
// Do something when page resize
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap() {
this.setData({
text: 'Set some data for updating view.'
}, function () {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
Object 参数说明：
- data 页面的初始数据
- onLoad 生命周期回调—监听页面加载
- onShow 生命周期回调—监听页面显示
- onReady 生命周期回调—监听页面初次渲染完成
- onHide 生命周期回调—监听页面隐藏
- onUnload 生命周期回调—监听页面卸载
- onPullDownRefresh 监听用户下拉动作
- onReachBottom 页面上拉触底事件的处理函数
- onShareAppMessage 用户点击右上角转发
- onPageScroll 页面滚动触发事件的处理函数
- onResize 页面尺寸改变时触发，详见 响应显示区域变化
- onTabItemTap 当前是 tab 页时，点击 tab 时触发
全局配置
小程序配置在app.json文件中进行，具体如下：
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
配置说明：
- pages 页面路径列表
- window 全局的默认窗口表现
- tabBar 底部 tab 栏的表现
- networkTimeout 网络超时时间
- debug 是否开启 debug 模式，默认关闭
- functionalPages 是否启用插件功能页，默认关闭
- subpackages 分包结构配置
- workers 代码放置的目录
- requiredBackgroundModes 需要在后台使用的能力，如「音乐播放」
逻辑层
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。
视图层
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
总结
本小节主要介绍了微信小程序的代码结构和框架调用流程，希望你能掌握：
- 目录结构
- 启动流程
- 全局配置
- 逻辑层
- 视图层
剧透：下一节我们会重点讲解小程序的视图容器和文本组件功能
