生命周期、生命周期函数与分类、wxs脚本
一、生命周期
1.1 什么是生命周期
生命周期(Life Cycle)是指一一个对象从创建->运行->销毁的整个阶段，强调的是一一个时间段。
通常把每个小程序运行的过程，概括为生命周期:
- 小程序的
启动,表示生命周期的开始 - 小程序的
关闭，表示生命周期的结束 - 中间小程序运行的过程，就是
小程序的生命周期
1.2 生命周期的分类
在小程序中，生命周期分为两类，分别是:
应用生命周期
- 特指小程序,从
启动->运行->销毁的过程
页面生命周期
- 特指小程序中，每个页面的
加载->渲染->销毁的过程
其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示:
二、生命周期函数
2.1 什么是生命周期函数
生命周期函数：是由小程序框架提供的内置函数,会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。
注意：
生命周期强调的是时间段,生命周期函数强调的是时间点。
2.2 生命周期函数的分类
小程序中的生命周期函数分为两类,分别是:
应用的生命周期函数
- 特指小程序从
启动->运行->销毁期间依次调用的那些函数
页面的生命周期函数
- 特指小程序中，每个页面从
加载->渲染->销毁期间依次调用的那些函数
2.3 应用的生命周期函数
小程序的应用生命周期函数需要在app.js中进行声明(一共3个)，如下:
// app.js
App({
// 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作
onLaunch(options) {
},
//小程序启动，或从后台进入前台显示时触发
onShow(options){
},
//小程序从前台进入后台时触发
onHide(options){
},
globalData: {
userInfo: null
}
})
2.4 页面的生命周期函数
小程序的页面生命周期函数需要在页面的.js 文件中进行声明(一共有5个周期函数)，如下:
// pages/test/test.js
Page({
/**
* 生命周期函数（主要是初始化-常用函数之一）--监听页面加载-一个页面只调用1次
*/
onLoad(options) {
},
/**
* 生命周期函数（可以修改页面内容-常用函数之一）--监听页面初次渲染完成-一个页面只调用1次
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载-一个页面只调用1次
*/
onUnload() {
},
})
三、wxs脚本
3.1 什么是wxs
WXS (WeiXin Script)是小程序独有的一套脚本语言，结合WXML,可以构建出页面的结构。
3.2. wxs的应用场景
wxml中无法调用在页面的js中定义的函数,但是, wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”;
3.3 wxs和JavaScript的关系*
虽然WXS的语法类似于JavaScript,但是WXS和JavaScript是完全不同的两种语言:
- wxs有自己的数据类型
number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp正则
- WXS不支持类似于ES6及以上的语法形式
不支持: let、 const、 解构赋值、展开运算符、箭头函数、对象属性简写、etc…支持: var定义变量、普通function函数等类似于ES5的语法
- WXS遵循CommonJS规范
module对象require()函数module.exports对象
3.4 WXS脚本-基础语法
3.4.1 内嵌wxs脚本
wxs代码可以编写在wxml文件中的<wxs>标签内,就像Javascript代码可以编写在html文件中的<script>标签内一样。
wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员:
// pages/message/message.js
Page({
/**
* 页面的初始数据
*/
data: {
count:0,
username:'luochaobin'
}
})
<!--pages/message/message.wxml-->
<text>
姓名:{
{m1.toUpper(username)}}
</text>
<wxs module="m1">
// 小写转大写
module.exports.toUpper=function(str){
return str.toUpperCase()
}
</wxs>
3.4.2 定义外联的wxs脚本
wxs代码还可以编写在以.WXS为后缀名的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样。如下:
function toLower(str){
return str.toLowerCase()
}
// 向外暴露共享成员
module.exports = {
toLower:toLower
}
3.4.3 使用外联的wxs脚本
在wxml中引入外联的WXS脚本时，必须为标签添加module和src属性,其中:
module用来指定模块的名称src用来指定要引入的脚本的路径，且必须是相对路径
//tools
function toLower(str){
return str.toLowerCase()
}
// 向外暴露共享成员
module.exports = {
toLower:toLower
}
<!--pages/message/message.wxml-->
<!-- 小写转大写-内联 -->
<text>姓名:{
{m1.toUpper(username)}}</text>
<!-- 引用外联wxs-大写转小写 -->
<view>
城市：{
{m2.toLower(adress)}}
</view>
<wxs module="m1">
// 小写转大写
module.exports.toUpper=function(str){
return str.toUpperCase()
}
</wxs>
<!-- 引用外联wxs脚本，命名为m2 -->
<wxs src="../../utils/tools.wxs" module="m2"/>
3.5、WXS脚本-WXS的特点
3.5.1 与JavaScript不同
为了降低WXS (WeiXin Script)的学习成本，wxs语言在设计时借大量鉴了JavaScript的语法。但是本质上,WXS和JavaScript是完全不同的两种语言!
3.5.2 不能作为组件的事件回调
WXS典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用，如:
<text>姓名:{
{m1.toUpper(username)}}</text>
<!-- 引用外联wxs-大写转小写 -->
<view>
城市：{
{m2.toLower(adress)}}
</view>
注意：在wxs中定义的函数
不能作为组件的事件回调函数。
wxs的错误使用：
<!--wxs的错误使用：-->
<button bindtap="m2.toLower()">点击我</button>
3.5.3 隔离性
隔离性指的是WXS的运行环境和其他JavaScript代码是隔离的。体现在如下两方面:
- WXS不能调用js中定义的函数
- WXS不能调用小程序提供的API