生命周期
小程序生命周期分为 应用生命周期、页面生命周期 和 组件生命周期。
应用生命周期
小程序应用生命周期写在
app.js
入口文件中。
生命周期 | 说明 |
---|---|
onLaunch | 小程序初始化完成时,只触发一次 |
onShow | 小程序启动 或 从后台进入前台 |
onHide | 小程序从前台进入后台 |
App({
// 初始化完成
onLaunch() {
...
},
// 进入前台
onShow() {
...
},
// 进入后台
onHide() {
...
}
})
页面生命周期
页面生命周期写在
.js
中的Page()
中。
生命周期 | 说明 |
---|---|
onLoad | 监听页面加载,一个页面只执行一次 |
onReady | 监听页面初次渲染完成,一个页面只执行一次 |
onShow | 监听页面显示 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
Page({
// 生命周期函数--监听页面加载
onLoad(options) {
// 上个页面传递过来的参数
console.log(options);
},
// 生命周期函数--监听页面初次渲染完成
onReady() {
...
},
// 生命周期函数--监听页面显示
onShow() {
...
},
// 生命周期函数--监听页面隐藏
onHide() {
...
},
// 生命周期函数--监听页面卸载
onUnload() {
...
},
})
组件生命周期
组件定义在
.js
的 lifetimes 中。
组件生命周期函数 | 参数 | 说明 |
---|---|---|
created | 组件实例被创建时执行 | |
attached | 组件实例进入页面节点树时执行 | |
ready | 组件在视图层布局完成后执行 | |
moved | 组件实例被移动到节点树另一个位置时执行 | |
detached | 组件实例从节点树移除时执行 | |
error | Object Error | 每次组件抛出错误时执行 |
{
// 组件生命周期
lifetimes: {
attached() {},
detached() {},
},
}
组件所在页面的生命周期
组件页面的生命周期写在
.js
中的pageLifetimes
。
Component({
pageLifetimes: {
show() {}, // 页面显示
hide() {}, // 页面隐藏
resize () {} // 页面尺寸变化
}
})
WXS 脚本
WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构建出页面的结构。
.wxml
中无法调用在页面的.js
中定义的函数(不包括事件绑定),但是.wxml
中可以调用wxs
中定义的函数,因此 小程序中wxs
一般作为过滤器使用。
数据类型
-
wxs
有自己的数据类型number 数值类型、 string 字符串类型、 boolean 布尔类型、 object 对象类型、 function 函数类型、 array 数组类型、 date 日期类型、 regexp 正则
-
wxs
不支持类似于 ES6 及以上的语法形式不支持: let 、 const 、解构赋值、展开运算符、箭头函数、对象属性简写、etc…;
支持: var 定义变量、普通 function 函数等类似于 ES5 的语法。
-
wxs
遵循 CommonJS 规范module
对象require()
函数module.exports
对象
基础语法
wxs 代码一般编写在
.wxml
文件中的<wxs>
标签内。
-
内嵌式
<!-- 语法格式 --> <text>{{ 模块名.方法名(属性名) }}</text> <wxs module="模块名"> module.exports.方法名 = function (参数) { return 结果 } </wxs>
-
示例
<!-- 页面wxml文件 --> <text>{{ m1.toUpper(username) }}</text> <wxs module="m1"> <!-- 转大写脚本 --> module.exports.toUpper = function (str) { return str.toUpperCase() } </wxs>
// 页面js文件 Page({ data() { username: 'zhangsan' } })
-
-
外链式导入
<!-- 语法格式 --> <wxs src="文件路径" module="模块名"></wxs>
-
示例
<text>m2.formatPhone(phone)</text> <wxs src="../../utils/utils.wxs" module="m2"></wxs>
// 格式化电话 function formatPhone (phone) { phone.split('') phone.splice(7,0,'-') phone.splice(3,0,'-') return phone.join('') } module.exports = { formatPhone }
-