微信小程序学习第6天——生命周期函数与WXS脚本

一、生命周期

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 对象