生命周期
小程序生命周期分为 应用生命周期、页面生命周期 和 组件生命周期。
应用生命周期
小程序应用生命周期写在
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 }
-