一、元素定义
二、生命周期
1、注册小程序生命周期:
app.js:
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
onShow (options) {
// Do something when show.
console.log("显示")
},
onHide () {
// Do something when hide.
console.log("隐藏")
},
onError (msg) {
console.log(msg)
},
globalData: {
userInfo: null
}
})
2、注册页面生命周期
index.js:
// index.js
// 获取应用实例
const app = getApp()
// var是全局变量
// let是定义布局变量
// const是定义常量
for(let i=0;i<10;i++){
}
Page({
data: {
motto: '咕噜咕噜锤',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
onLoad: function(options) {
// 页面创建时执行
console.log("onLoad")
},
onShow: function() {
// 页面出现在前台时执行
console.log("onShow")
},
onReady: function() {
// 页面首次渲染完毕时执行
console.log("onReady")
},
onHide: function() {
// 页面从前台变为后台时执行
console.log("onHide")
},
onUnload: function() {
// 页面销毁时执行
console.log("onUnload")
},
})
生命周期:
三、页面路由
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
重加载 | 页面全部出栈,只留下新的页面 |
开发者可以使用 getCurrentPages()
函数获取当前页面栈。