小程序框架:包括逻辑层、视图层和flex模型
逻辑层由javascript编写,视图层由WXML和WXSS配合组件组成,flex布局确保页面适应不同屏幕尺寸时在恰当的位置。
本篇主要介绍逻辑层。视图层介绍见https://blog.csdn.net/maidu_xbd/article/details/102504302
flex布局介绍见https://blog.csdn.net/maidu_xbd/article/details/102566583
逻辑层
逻辑层又称为App Service
主要作用:处理数据后发送给视图层渲染以及接收视图层的事件反馈
涉及的方法有:
1.App()注册小程序:指定生命周期,该方法只能写在小程序根目录下的app.js文件中,并且只能注册1个。
生命周期:一个对象, 从创建到消亡, 这个过程中, 所经历的阶段集合, 称作"生命周期"
属性 | 类型 | 说明 | 触发时机 |
onLaunch() | Function | 生命周期函数--监听页面加载,全局只触发一次 | 初始化完成时触发 |
onShow() | Function | 生命周期函数--监听页面显示 | 由后台进入前台时触发 |
onHide() | Function | 生命周期函数--监听页面隐藏 | 由前台进入后台时触发 |
onError() | Function | 错误监听函数 | 发生脚本错误或api调用失败 |
onPageNotFound() | Function | 页面不存在函数 | 打开页面不存在 |
其他自定义函数 | Any | 用this可以访问 |
|
小程序后台:小程序没有在手机当前画面显示,但是并没有被销毁。
小程序前台:小程序在手机当前画面被使用。
小程序应用生命周期:小程序在被打开时会触发onLaunch()进行程序启动,完成后调用onShow()准备展开页面,如果被切换进入后台会调用onHide(),直到下次程序在销毁前重新被唤起再次调用onShow()。
2.onPageNotFound():用来监听小程序要打开的页面不存在的事件
字段 | 类型 | 说明 |
path | String | 不存在页面的路径 |
query | Object | 打开不存在页面的query |
isEntryPage | Boolean | 是否为本次启动的首个页面 |
3.getApp():在小程序的其他JS文件中可以通过该方法使用app.js中的公共数据,注意在App()函数内部则不需要使用该方法,使用this关键字获得全局变量。
示例:【test.js】
var app=getApp()
console.log(app.globalData.userinfo)
【app.js】
App({
globalData:{
userInfo:null
},
onLoad:function(options){
console.log(this.globalData.userInfo)
}
})
4.page()注册页面:小程序在每个页面的js文件中通过Page()方法注册页面,该方法可以用于指定小程序页面的生命周期函数。每个页面只能注册1个
属性 | 类型 | 说明 |
data | Object | 页面的初始数据 |
onLoad() | Function | 生命周期函数--监听页面加载 |
onReady() | Function | 生命周期函数--监听页面初次渲染完成 |
onShow() | Function | 生命周期函数--监听页面显示 |
onHide() | Function | 生命周期函数--监听页面隐藏 |
onUnload() | Function | 生命周期函数--监听页面卸载 |
onPullDownRefresh() | Function | 页面相关事件处理函数--监听下拉动作 |
onReachBottom() | Function | 页面上拉触底事件的处理函数 |
onShareAppMessage() | Function | 监听用户单击右上角转发事件 |
onPageScroll() | Function | 监听页面滚动事件 |
onTabItemTap() | Function | 若当前页是tab页,单击tab时触发 |
其他 | Any | 可添加函数或数据 |
【buding.js】文件如下
Page({
/**
* 页面的初始数据
*/
data: {
color:"blue",
msg:"Hello",
age:18,
array:[1,2,3]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log(this.route)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
在page()方法中,可以使用【this.route】查看当前页面的路径地址,可以使用【setData()】同步更新data属性中的数据值,也能异步更新相关数据到WXML页面中。
【buding.wxml】中为组件追加自定义单击事件【changeData()】
<view bindtap="changeData">{{msg}}</view>
【buding.js】中的Page()中追加自定义函数【changeData()】,当单击组件是,‘hello’将显示为‘你好’
Page({
changeData:function(){
this.setData({msg:'你好'})
}
})
小程序页面生命周期:在小程序应用生命周期调用完onShow()后就准备触发页面生命周期。
5. 页面路由
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
初始化 | 小程序打开的第一个页面 |
| 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() |
6.模块化
在根目录utils文件夹下新建公共的【common.js】
function sayHi(name){
console.log('Hi ${name}')
}
module.exports = {
sayHi:sayHi
}
在页面的js中引入【common.js 】并调用
var common=require('../../utils/common.js')
Page({
hi:function(){
console.log(common.sayHi('buding'))
}
})