小程序开发框架的逻辑层使用 JavaScript
引擎为小程序提供开发者 JavaScript
代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript
文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。
在 JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:
App
和 Page
方法,进行程序注册和页面注册。getApp
和 getCurrentPages
方法,分别用来获取 App
实例和当前页面栈。注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript
在 web 中一些能力都无法使用,如 window
,document
等。
每个小程序都需要在 app.js
中调用 App
方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js App({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, one rror (msg) { console.log(msg) }, globalData: 'I am global data' })
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp
方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App
上的函数。
// xxx.js const appInstance = getApp() console.log(appInstance.globalData) // I am global data
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
对于小程序中的每个页面,都需要在页面对应的 js
文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
简单的页面可以使用 Page()
进行构造。
页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。
Page
构造器适用于简单的页面。但对于复杂的页面, Page
构造器可能并不好用。
此时,可以使用 Component
构造器来构造页面。 Component
构造器的主要区别是:方法需要放在 methods: { }
里面。
页面路由就是页面的一种跳转方式。在小程序中所有页面的路由全部由框架进行管理。
框架以栈的形式维护了当前的所有页面。它的最大特点就是先入后出,当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
重加载 | 页面全部出栈,只留下新的页面 |
可以使用 getCurrentPages()
函数获取当前页面栈,返回值是一个数组
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 |
调用 API wx.navigateTo 凡是tabbar定义的页面没法太跳转,url中路径使用的是相对路径的形式, 凡是这种形式的跳转都会保留页面在页面栈中的存储(不建议使用) 组件形式:<navigator open-type="navigateTo" url="../admin/admin">跳转新页面</navigator> |
onHide | onLoad, onShow |
页面重定向 |
调用 API wx.redirectTo 当前页面出栈,新页面入栈,优势就是保持页面栈中只有一个页面(推荐使用) 组件形式:<navigator open-type="redirectTo" url="../admin/admin">跳转新页面</navigator>
|
onUnload | onLoad, onShow |
页面返回 |
调用 API wx.navigateBack 页面不断出栈,直到目标返回页,在返回的过程中,不会去触发返回页中的onload事件,因为它在我们页面栈中保存,但是会触发show函数 页面重定向<navigator open-type="navigateBack" url="../index/index">页面返回</navigator>
|
onUnload | onShow |
Tab 切换 |
调用 API wx.switchTab |
各种情况请参考下表 | |
重启动 | 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/> |
onUnload | onLoad, onShow |
路由跳转注意事项: