微信小程序：生命周期及WXS脚本

生命周期

小程序生命周期分为 应用生命周期、页面生命周期 和 组件生命周期。

应用生命周期

小程序应用生命周期写在 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
    }