(五)、生命周期
1.什么是生命周期
生命周期 是指一个对象从 创建-》运行-》销毁的整个阶段，强调的是一个时间段。列如:
- 张三出生，表示生命周期的开始
- 张三离世，表示生命周期的结束
2.声明周期的分类
在小程序中，生命周期分为两类
- 应用生命周期
- 特指小程序从启动 -> 运行 -> 销毁的过程
- 页面生命周期
- 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程
其中,页面的声明周期范围比较少，应用程序的生命周期范围比较大。应用生命周期包含页面生命周期。
3.什么是生命周期函数
生命周期函数: 是有小程序框架提供的内置函数，会伴随着生命周期，自动依次执行。
生命周期函数的作用: 允许程序员在特定的事件点，执行某些特定的操作。列如: 在页面钢架在的时候，可以在onLoad生命周期函数中初始化页面的数据。
生命周期强调的是时间段，生命周期函数强调的是时间点。
4.生命周期函数的分类
小程序中的生命周期函数分为两类，分别是:
- 应用的生命周期函数
- 特指小程序从启动-> 允许-> 销毁依次调用的哪些函数
- 页面的生命周期函数
- 特指小程序中，每个页面从加载-> 渲染->销毁期间依次调用的那些函数
5.应用的生命周期函数 ⭐
小程序的应用生命周期函数需要在app.js中进行声明:
app.js: 1.小程序初始化完成。2.前台到后台<->后台到前台
// app.js App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { // 1.这个函数通常用于初始化数据的..... console.log('小程序初始化完成.. app.js') }, /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */ onShow: function (options) { console.log('从桌面到了小程序') }, /** * 当小程序从前台进入后台，会触发 onHide */ onHide: function () { console.log('从小程序到了桌面') }, /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */ onError: function (msg) { } })
6.页面的声明周期函数
小程序的页面生命周期函数需要在页面的.js文件中进行声明。
// pages/message/message.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载,一个页面只调用一次⭐⭐(挂载) */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成⭐⭐(初次渲染成功时) */ onReady() {}, /** * 生命周期函数--监听页面显示⭐ */ onShow() {}, /** * 生命周期函数--监听页面隐藏⭐ */ onHide() {}, /** * 生命周期函数--监听页面卸载只用一次⭐() */ onUnload() {}, /** * 页面相关事件处理函数--监听用户下拉动作⭐(下拉) */ onPullDownRefresh() {}, /** * 页面上拉触底事件的处理函数⭐(上拉) */ onReachBottom() {}, /** * 用户点击右上角分享 */ onShareAppMessage() {} })
(六)、WXS脚本
1.WXS脚本-概述
(1).什么是WXS
WXS(WeXin Script)是小程序独有的一套脚本语言，结合WXML可以构建页面的结构。
(2).WXS的应用场景
wxml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是 "过滤器"。
(3).WXS和JavaScript的关系
虽然WXS的语法类似于JavaScript,但是WXS和JavaScript是完全不同的两种语言。
- WXS有自己的数据结构。
- number数值类型、string 字符串数据类型、boolean布尔类型、objet对象类型。
- function函数类型、array数组类型、data日期类型、regexp正则
- WXS不支持类似于ES6及以上的语法形式。
不支持: let、const、解析复制、展开运算符、箭头函数、对象属性简写、etc…- 支持:
var定义变量、普通function函数等类似于ES5的语法…
- WXS遵循CommnJS规范。
- module 对象
- require()函数
module.exports对象: 主要作用就是共享出去..(类似于Vue)
(4).基本步骤
------定义和配置wxs过滤器 1.设置wxs的普通函数 2.将这个函数return出去 3.将这个过滤器共享出去: module.exports.函数名
2.内嵌WXS脚本
wxs代码可以编写在wxml文件中的< wxs>标签内，就像javascript代码可以编写在html文件中的< script>标签内一样。
wxm文件中的每个< wxs>< /wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方便再wxml中访问模块中的成员。
(1).利用wxs实现过滤大写
内嵌的时候 module属性一定要写,并且一定要return。
message.wxml
1. 定义 module.exports.wxml调用得到方法名=function(形参){ return 形参.toUpperCase() ->转换为大写的脚本 } <wxs module="m1"> module.exports.toUpper=function(str){ return str.toUpperCase() } </wxs> 2.使用 module.方法名(data区域的值)
<!--pages/message/message.wxml--> <view>小写: {{username}}</view> <view>过滤: {{m1.toUpper(username)}}</view> <!-- 1.设置大写的过滤器方法 --> <wxs module="m1"> module.exports.toUpper=function(str){ return str.toUpperCase() } </wxs>
3.外嵌WXS脚本
wxs 代码还可以编写在以 .wxs为后缀名的文件内，就像javaScript代码可以编写在以.js为后缀名的文件中一样。
(1).利用wxs过滤为小写
- 配置wxs脚本
在utils包中创建tools.wxs
// 1.将字符串转换为小写的方法 ->一定要return function toLower(str){ return str.toLowerCase() } // 2. 将这个方法共享出去 ->一定要共享出去 module.exports={`在这里插入代码片` toLower:toLower }
- 使用外观的wxs脚本
在wxml中引入外联的wxs脚本时，必须为< wxs>标签添加module和src属性，其中:
module用来指定模块的名称src用来指定要引入的脚本的路径，其必须是相对路径。
``
<!--pages/message/message.wxml--> <view>小写: {{username}}</view> <view>过滤为大写: {{m1.toUpper(username)}}</view> <view> 国家: {{country}} </view> <view> 过滤为小写: {{m2.toLower(country)}} </view> <!-- 2.外嵌WXS --> <wxs src="../../utils/tools.wxs" module="m2"></wxs> <!-- 1.设置大写的过滤器方法 --> <wxs module="m1"> module.exports.toUpper=function(str){ return str.toUpperCase() } </wxs>
4.WXS脚本-WXS的特点
(1).与JavaScript不同
为了降低wxs(WeiXin Script)的学习成本，wxs语言在设计时借鉴了JavaScript的语法，但本质上，wxs和JavScript是完全不同的两种语言。
(2).不能作为组件的事件回顾
wxs典型的应用场景就是: 过滤器，经常配合Mustache语法进行使用。
<view>过滤: {{m1.toUpper(username)}}</view>
但是,在wxs中定义的函数不能作为组件的事件回调函数。下面是错误的
<button bindtap="m2.toUpper"></button>
(3).隔离性
隔离性指的是 wxs的运行环境和其他JavaScript代码是隔离的。
- wxs不能调用js中定义的函数
- wxs不能调用小程序提供的API
(4).性能好
- 在IOS设备上，小程序内的WXS会比JavaScript代码快2 -20 倍。
- 在安卓的设备上，二者的运行效率无差异。
