小程序框架
逻辑层
1.小程序APP
App(Object object)
注册小程序。接受一个Object参数,其指定小程序的生命周期回调等。
App() 必须在 app.js
中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
onLaunch(Object object)
小程序初始化完成时触发,全局只触发一次。
** **
onShow(Object object)
小程序启动,或从后台进入前台显示时触发。
onHide(Object object)
小程序从前台进入后台时触发。
其他
开发者可以添加任意的函数或者数据变量到object参数中,用this可以访问。
如何获取到小程序全局唯一的APP实例。
在页面的js文件中写入以下代码:
var app = getApp();
console.log(app.globalData) //获取到定义在全局的变量
2.页面
Page(Object object)
注册小程序中的一个页面。接受一个Object类型参数。其指定页面的初始数据、生命周期回调、时间处理函数等。
生命周期回调:
data——页面的初始数据
onLoad——监听页面加载
onShow——监听页面显示
onReady——监听页面初次渲染完成
onHide——监听页面隐藏
onUnload——监听页面卸载
属性 | 类型 | 说明 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | function | 生命周期回调—监听页面加载。页面加载时触发,一个页面只会调用一次,可以在onLoad参数中获取打开当前页面路径中的参数。 |
onShow | function | 生命周期回调—监听页面显示 |
onReady | function | 生命周期回调—监听页面初次渲染完成。一个页面只会调用一次,代表页面已经准备好,可以和视图层进行交互。 注意:对界面内容进行设置的 API 如wx.setNavigationBarTitle,请在 onReady 之后进行。 |
onHide | function | 生命周期回调—监听页面隐藏。如 wx.navigateTo 或底部 tab 切换到其他页面,小程序切入后台等 |
onUnload | function | 生命周期回调—监听页面卸载。如wx.redirectTo或wx.navigateBack到其他页面时。 |
onPullDownRefresh | function | 监听用户下拉动作。 - 需要在 app.json 的window 选项中或页面配置中开启enablePullDownRefresh 。- 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。 - 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新 |
onReachBottom | function | 页面上拉触底事件的处理函数。 - 可以在 app.json 的window 选项中或页面配置中设置触发距离onReachBottomDistance 。- 在触发距离内滑动期间,本事件只会被触发一次。 |
onShareAppMessage | function | 用户点击右上角转发 |
onPageScroll | function | 页面滚动触发事件的处理函数 |
onResize | function | 页面尺寸改变时触发,详见 响应显示区域变化 |
onTabItemTap | function | 当前是 tab 页时,点击 tab 时触发 |
其他 | any | 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问 |
Page.route
获取当前页面的路径
Page({
onShow: function() {
console.log(this.route)
}
})
Page.prototype.setData(Object data, Function callback)setData
函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data
的值(同步)。
注意:
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
- 仅支持设置可 JSON 化的数据。
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为
undefined
,否则这一项将不被设置并可能遗留一些潜在问题。 - 如果要修改数组或者对象中的某个字段,需要在key的地方写字符串。
PageObject[] getCurrentPages()
获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。
注意:
- 不要尝试修改页面栈,会导致路由以及页面状态错误。
- 不要在
App.onLaunch
的时候调用getCurrentPages()
,此时page
还没有生成。
3.自定义组件
Component(Object object)
创建自定义组件,接受一个Object类型的参数。
页面路由
在小程序所有页面的路由全部由框架进行管理。
页面栈
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
重加载 | 页面全部出栈,只留下新的页面 |
路由方式
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/> | onHide | onLoad, onShow |
页面重定向 | 调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/> | onUnload | onLoad, onShow |
页面返回 | 调用 API wx.navigateBack 使用组件 <navigator open-type="navigateBack"> 用户按左上角返回按钮 | onUnload | onShow |
Tab 切换 | 调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab | 各种情况请参考下表 | |
重启动 | 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/> | onUnload | onLoad, onShow |
Tips:
navigateTo
,redirectTo
只能打开非 tabBar 页面。switchTab
只能打开 tabBar 页面。reLaunch
可以打开任意页面。- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad
中获取。