微信小程序 逻辑层

1. 注册程序
小程序APP
在小程序的根目录下有一个app.js文件。有App(Object),App() 函数用来注册一个小程序。接受一个 Object 参数,其内便是小程序的生命周期。
App() 必须在app.js 中调用,必须调用且只能调用一次。
主要参数
onLaunch: 小程序的初始化函数
onShow: 小程序启动,或从后台进入前台显示时
onHide: 小程序从前台进入后台时
onError: 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
onPageNotFound: 小程序要打开的页面不存在时触发,会带上页面信息回调该函数

前台:当小程序呈现在用户屏幕前
后台:右上角关闭小程序,home键 之后的一段时间(目前五分钟)小程序处于后台状态
销毁:当进入后台一段时间或者系统资源占用过高会被销毁,一些场景进入在未置顶的情况下退出会被销毁。
getApp(Object)
全局的 getApp() 函数可以用来获取到小程序 App 实例。这个不是很懂

2. 场景值
场景指的是从哪些地方进入小程序,有对应的场景ID。App函数的 onlaunch onshow ,或者 wx.getLaunchOptionsSync 获取。
App({
onLaunch: function (options) {
console.log("[onLaunch] 本次场景值:", options.scene)
},
onShow: function (options) {
console.log("[onShow] 本次场景值:", options.scene)
}
})

3. 注册页面
页面 Page
Page(Object) 构造器
Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,初始化数据、生命周期回调和事件处理函数。
data: 页面的初始化数据
onLoad: 生命周期回调--监听页面加载
onShow: 生命周期回调--监听页面显示
onReady: 生命周期回调--监听页面初次渲染完成
onHide: 生命周期回调--监听页面隐藏
onUnload: 生命周期回调--监听页面卸载
onPullDownRefresh: 监听用户下拉动作
onReachBottom: 页面上拉触底事件的处理函数
onShareAppMessage: 用户点击右上角转发
onResize: 页面尺寸改变时触发,一般是屏幕旋转
onTabItemTap: 当前是tab页时,点击tab 时触发
还可以添加自定义字段,同app.js中App() 一样

初始数据
data 是页面第一次渲染使用的初始数据
因为页面加载时,data将会以JSON 字符串的形式由逻辑层传到渲染层,因此data 中的数据必须时可以转成 JSON 的类型:字符串、数字、布尔值、对象、数组
同大多数 mvvm 框架语言一样,也可以实现逻辑层到渲染层的双向绑定。

生命周期回调函数
有 onLoad(Object)、onShow()、onReady()、onHide()、onUnload()

页面事件处理函数
onPullDownRefresh()、onReachBottom()、onPageScroll(Object)

组件事件处理函数
就是渲染层的执行事件,点击之类的

route
当前页面的路径,类型为 String
Page({
onShow() {
console.log(this.route)
}
})

setData
Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)

页面生命周期
有一句在vue里面看到的话

下内容你不需要立马完全弄明白,不过以后它会有帮助


4. 路由
在小程序中所有页面的路由全部由框架进行管理。
页面栈
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈表现各不相同
初始化:新页面入栈
打开新页面:新页面入栈
页面重定向:当前页面出栈,新页面入栈
页面返回:页面不断出栈,知道目标返回页
Tab切换:页面全部出栈,只留下新的Tab页面
重加载:页面全部出栈,只留下新的页面

getCurrentPages()
此函数可以获取当前页面栈的实例,以数组的形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

路由方式
路由的触发和小程序生命周期处处相关哦

5. 模块化
文件作用域
每个js文件申明的变量,对当前文件有效
App 函数中可以这只全局变量
将公共代码块抽离出来,用export方式引用。

6. API
各种API

posted @ 2019-03-25 13:55  蓝空魔星  阅读(412)  评论(0编辑  收藏  举报