一、生命周期
1、生命周期
生命周期(Life Cycle)是指一个对象从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。
分类 | 过程 |
---|---|
应用生命周期 | 小程序从启动 - > 运行 - > 销毁的过程 |
页面生命周期 | 每个页面的加载 - > 渲染 - > 销毁的过程 |
2、生命周期函数
指小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行
作用:允许程序员在特定的时间点,执行某些特定的操作
。
《1》应用的生命周期函数
时间点 | 生命后期函数 |
---|---|
小程序初始化完成时触发(全局只触发一次) | onLaunch:function(){} |
从后台进入前台时触发 | onShow:function(){} |
从前台进入后台 | onHide:function(){} |
《2》页面的生命周期函数
时间点 | 生命后期函数 |
---|---|
监听页面加载(一个页面只调用一次) | onLoad:function(){} |
监听页面显示 | onShow:function(){} |
监听页面初次渲染完成(一个页面只调用一次) | onReady:function(){} |
监听页面隐藏 | onHide:function(){} |
监听页面卸载(一个页面只调用一次) | onUnload:function(){} |
二、WXS脚本
WXS
(WeiXin Script)是小程序独有的一套脚本语言
wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上,wxs 和 JavaScript 是完全不同的两种语言
1、 基础语法
《1》 内嵌wxs脚本: wxml 文件中的每个 <wxs></wxs>
标签,必须提供 module 属性
,用来指定当前 wxs 的模块名称
<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.toUpperCase()
}
</wxs>
《2》外联wxs脚本:编写在以 .wxs 为后缀名的文件内
function toLower (str){
return str.toLowerCase()
}
module.exports = {
toLower:toLower
}
《3》使用外联wxs脚本:必须
为 <wxs>
标签添加 module
和 src
属性
<view>{{m2.toLower(value)}}</view>
// 引入外联wxs
<wxs module="m2" src="./message.wxs"></wxs>
2、WXS 特点
① wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用
② 在 wxs 中定义的函数不能作为组件的事件回调函数
③ 隔离性: wxs 不能调用 js 中定义的函数,wxs 不能调用小程序提供的 API
④ 性能好:在 iOS 设备上,小程序内的WXS会比JavaScript代码快2~20倍, 在android设备上,二者的运行效率无差异
3、注意点
①wxs 不支持类似于 ES6 及以上的语法形式
②wxs 遵循 CommonJS 规范
module 对象
require() 函数
module.exports 对象