目录
一. 框架介绍
二. 视图层 View
2.1 视图层介绍
2.2 WXML
数据绑定
列表渲染
条件渲染
模板
2.3 事件系统
什么是事件
事件的使用方式
三. 逻辑层 App Service
3.1 页面路由
页面栈
路由方式
3.2 页面生命周期
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML
和 WXSS
,以及基于 JavaScript
的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
用以下一些简单的例子来看看 WXML 具有什么能力:
a页面
{{message}}
// pages/a/a.js
Page({
data: {
message: '派大星你好,我是海绵宝宝'
}
})
a页面
{{item}}
// pages/a/a.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
a页面
WEBVIEW
APP
MINA
// pages/a/a.js
Page({
data: {
view: '1'
}
})
a页面
FirstName: {{firstName}}, LastName: {{lastName}}
// pages/a/a.js
Page({
data: {
staffA: {firstName: 'yunahui', lastName: 'shania'},
staffB: {firstName: 'lijie', lastName: 'meinv'},
staffC: {firstName: 'HaHa', lastName: 'ha'}
}
})
具体的能力以及使用方式在以下章节查看:
数据绑定、列表渲染、条件渲染、模板、引用
如bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
Click me!
Page({
tapName: function(event) {
console.log(event)
}
})
小程序开发框架的逻辑层使用 JavaScript
引擎为小程序提供开发 JavaScript
代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript
文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。
在 JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:
App
和 Page
方法,进行程序注册和页面注册。getApp
和 getCurrentPages
方法,分别用来获取 App
实例和当前页面栈。在小程序中所有页面的路由全部由框架进行管理。
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
重加载 | 页面全部出栈,只留下新的页面 |
开发者可以使用
getCurrentPages()
函数获取当前页面栈。
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 调用 API wx.navigateTo 使用组件 |
onHide | onLoad, onShow |
页面重定向 | 调用 API wx.redirectTo 使用组件 |
onUnload | onLoad, onShow |
页面返回 | 调用 API wx.navigateBack 使用组件 用户按左上角返回按钮 |
onUnload | onShow |
Tab 切换 | 调用 API wx.switchTab 使用组件 用户切换 Tab |
各种情况请参考下表 | |
重启动 | 调用 API wx.reLaunch 使用组件 |
onUnload | onLoad, onShow |
Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):
当前页面 | 路由后页面 | 触发的生命周期(按顺序) |
---|---|---|
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打开) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(从转发进入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(从转发进入) | B | D.onUnload(), B.onLoad(), B.onShow() |
注意事项
navigateTo
,redirectTo
只能打开非 tabBar 页面。switchTab
只能打开 tabBar 页面。reLaunch
可以打开任意页面。- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad
中获取。
page实例的生命周期
更多详细内容,请前往官网查看https://developers.weixin.qq.com/miniprogram/dev/framework/