0️⃣写在前面
开发者写的所有代码最终将会打包成一份
JavaScript
文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。
文章目录
- 0️⃣写在前面
- 1️⃣逻辑层
- 2️⃣页面路由
- 页面栈与路由方式
- Tips
- 3️⃣模块化
1️⃣逻辑层
1. 原理:小程序开发框架的逻辑层使用 JavaScript
引擎为小程序提供开发者 JavaScript
代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
2. 在 JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:
- 增加
App
和Page
方法,进行程序注册和页面注册。 - 增加
getApp
和getCurrentPages
方法,分别用来获取App
实例和当前页面栈。 - 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
- 提供模块化能力,每个页面有独立的作用域。
注意:小程序框架的逻辑层并非运行在浏览器中,因此
JavaScript
在 web 中一些能力都无法使用,如window
,document
等。
2️⃣页面路由
在小程序中所有页面的路由全部由框架进行管理。
页面栈与路由方式
1. 框架以栈
的形式维护了当前的所有页面。
2. 对于路由的触发方式
以及页面生命周期函数
如下:
路由方式 | 页面栈表现 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|---|
初始化 | 新页面入栈 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 新页面入栈 | 调用 API wx.navigateTo 使用组件 | onHide | onLoad, onShow |
页面重定向 | 当前页面出栈,新页面入栈 | 调用 API wx.redirectTo 使用组件 | onUnload | onLoad, onShow |
页面返回 | 页面不断出栈,直到目标返回页 | 调用 API wx.navigateBack 使用组件 用户按左上角返回按钮 | onUnload | onShow |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 如果从没有 tabBar 的页面跳转至有tabBar 的页面就一定要用这个 ,而不是上面的,否则会报错 | 调用 API wx.switchTab 使用组件 用户切换 Tab | 各种情况请参考下表 | |
重启动 | 页面全部出栈,只留下新的页面 | 调用 API wx.reLaunch 使用组件 | onUnload | onLoad, onShow |
2. 代码示例:
wx.navigateTo({ //当前页面被隐藏,缓存在栈中,最多存放10个页面
url: "/pages/posts/post" //跳转的页面路径
})
wx.redirectTo({ //当前页面被销毁
url: "/pages/posts/post"
})
3. 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() |
Tips
navigateTo
,redirectTo
只能打开非 tabBar 页面。switchTab
只能打开 tabBar 页面。reLaunch
可以打开任意页面。- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad
中获取。注意
:开发者可以使用getCurrentPages()
函数获取当前页面栈- 页面栈中最多存在
10
个
3️⃣模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 [
module.exports
] 或者exports
才能对外暴露接口。
更多推荐
【微信小程序】一文带你吃透小程序开发框架——逻辑层
发布评论