小程序学习(四)之逻辑层(主要说的是对应的js文件)
本节知识点:
-
注册小程序
-
场景值
-
注册页面
-
路由
-
模块化
-
API
App()
App()函数用来注册一个小程序，接受一个object参数，其指定小程序的生命周期函数等。
object参数说明:
-
onLaunch
类型是function 作用监听小程序初始化，触发时机就是当小程序初始化加载，会触发onLaunch(全局只触发一次)
-
onReady
类型function 作用监听小程序加载。触发时机当小程序初次渲染完成。
onShow
类型是Function 作用是监听小程序显示。触发时机当小程序启动后，或者从后台进入前台显示，会触发onShow
- onHide
类型是Function 作用是监听小程序隐藏，触发时机当小程序从前台进入后台时候，会触发onHide
- OnError
类型function 作用错误监听函数 , 当小程序发生脚本错误，或者api调用失败。会触发onError并带上错误信息
- 其他
类型Any 开发者可以添加任意的函数或者数据到object参数中，用this可以访问
前台，后台定义。当用户点击左上角关闭，或者来电话的时候，小程序并没有直接销毁，而是进入了后台。当再次进入小程序就又会从后台进入前台。
特别注意：只有当小程序进入后台一定的时间，或者系统资源占用过高，才会被真正的销毁。
getApp()
我们提供了全局的getApp()函数，可以获取到小程序实例
var app = getApp();
console.log(app.globalData) //I am global data
特别注意:App()必须在app.js中注册，且不能是多个
不要在定义于App()内的函数调用getApp()使用this 就可以拿到app实例
不要在onlauch的时候调用getCurrentPages(),此时page还没有生成
通过getApp() 获取到实例后，不要私自调用或者启用生命周期函数
Page
Page()函数用来注册一个页面，接受一个object参数，其指定的页面的初始数据，生命周期函数，事件处理函数等等
Object参数说明:
data 类型object 作用页面的初始数据
onLoad 类型Function 作用监听页面加载(只执行一次)
onReady 类型Function 作用监听页面初次渲染完成
onShow 类型Function 作用监听页面显示
onHide 类型Function 作用监听页面隐藏
onUnload 类型Function 作用监听页面卸载
onPullDownRefresh 类型Function 作用监听用户下拉动作
onReachBottom 类型Function 作用页面上拉触底事件的处理函数
onShareAppMessage 类型Function 作用用户点击右上角转发
onPageScroll 类型Function 作用页面滚动触发事件的处理函数
其他 类型 Any 作用开发者可以添加任意的函数或者数据到object参数中。在页面的函数中用this可以访问
示例代码:
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
初始化数据
初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传输到渲染层。所以数据必须是可以转成JSON格式的。字符串，数字，布尔值，对象，数组
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
对应的在JS里面的data数据应该写成
Page({
data:{
text:"今天",
array:[{msg:'1'},{msg:'2'}]
}
})
生命周期函数
-
onLoad :页面加载
一个页面只会调用一次，可以在onLoad中获取打开当前页面所调用的query参数
-
onShow:页面显示
每次打开页面都会调用一次
-
onReady: 页面初次渲染完成
一个页面只会调用一次，代码页面已经准备妥当，可以和视图层交互
对界面的设置如:wx.setNavigationBarTitle请在onReady之后设置 -
onHide 页面隐藏
当navigateTo或者底部tab切换的时候调用
-
onUnload: 页面卸载
当redirectTo或者navigateBack的时候调用
页面相关事件处理函数
-
onPullDownRefresh :下拉刷新
（1）监听用户下拉刷新事件。
（2）必须需要在app.json的window选项中，或者在页面配置中开启enablePullDownRefresh
（3）当处理完数据刷新后。wx.stopPullDownRefresh可以停止当前页面的刷新 -
onReachBottom:上拉触底
(1)监听用户上拉触底事件。
(2)可以在app.json里面的window选项中或者页面配置中设置触发距离onReachBottomDistance
(3)在触发距离内滑动期间，本事件只会触发一次. -
onPageScroll：页面滚动
(1)监听用户滑动页面事件
(2)参数为object包含以下字段.
scrollTop 类型Num 页面在垂直方向已滚动的距离(单位Px)
(3)代码如下:
onPageScroll:function(options){
console.log(options.scrollTop);
}
-
onShareAppMessage : 用户转发
(1)只有定义了此事件处理函数，右上角菜单才会显示转发按钮.
(2)用户点击转发按钮的时候就会调用
(3)此事件需要return一个object用户自定义转发内容
onShareAppMessage: function () {
return {
title: '页面的主标题',
desc: '页面的描述',
path: '/pages/index/index?id=123'
}
}
事件处理函数
(1)除了初始化数据和生命周期函数，我们还可以自定义事件处理函数，在组件中加入事件绑定，当达到触发事件就会执行Page中定义的事件处理函数.
示例代码:
<view bindtap = "clickme">点击我</view>
在逻辑层(js)
Page({
clickme:function(){
console.log('Hello world!')
}
})
this.setData()
setData 函数用于将数据从逻辑层发送到视图层(异步)，同时改变对应的this.data的值(同步)
setData()参数格式
- data
类型object 必填:是 描述需要改变的数据
- callback 类型function 必填:否 描述回调函数
object以key,value的形式表示将this.data中的key对应的值变成value！callback是一个回调函数，在这次setData对界面渲染完毕后使用。
其中key可以非常灵活，以数据路径的形式给出。如arr[2].message,a.b.c.d并且不需要再this.data中预先定义.
注意:
直接修改this.data而不调用this.setData 是无法改变页面的状态的。还会造成数据不一致。
单次设置的数据不能超过1024KB，避免一次设置过多的数据.
示例代码:
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
在index.js文件里面
Page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() {
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})
页面路由
在小程序中所有的页面的路由全部由框架进行管理
getCurrentPages()
getCurrentPages()函数用于获取到当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页。
重要的事情说三遍。千万不要修改页面栈。千万不要修改页面栈。千万不要修改页面栈。
路由方式
-
打开新页面:
调用API wx.navigateTo
或者组件<navigator open-type="navigateTo"> -
页面重定向
调用API wx.redirecTo
或者使用组件<navigator open-type="redirectTo"> -
页面返回
调用API wx.navigateBack
或者使用组件<navigator open-type="navigateBack"> -
Tab切换
调用API wx.switchTab
或者使用组件<navigator open-type="switchTab"> -
重启动
调用API wx.reLaunch
或者使用组件<navigator open-type="reLaunch">
这几种路由跳转方式。对于前页面来说:
wx.navigateTo 对应的 onHide
wx.redirecTo 对应的 onUnload
wx.navigateBack 对应的onUnload
特别注意
- navigateTo,redirectTo只能打开不是底部导航指定的页面
- SwitchTab 只能打开tabBar页面
- reLaunch 可以打开任意页面
- 页面底部的tabBar由页面决定，即只要是定义了tabbar的页面，底部就有tabBar
- 调用页面路由带的参数可以在目标页面的onLoad中获取
