微信小程序快速入门03-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序快速入门03。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序快速入门03,微信小程序,微信小程序,小程序,java,前端,后端

🏡浩泽学编程：个人主页
🔥 推荐专栏：《深入浅出SpringBoot》《java项目分享》
《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境，不骄不躁，知行合一

前言

本文讲诉：生命周期、WXS脚本。

一、生命周期

生命周期(Life Cycle) 是指一个对象从创建 -> 运行 ->销的整个阶段，强调的是一个时间段。例如:

张三出生，表示这个人生命周期的开始

张三离世，表示这个人生命周期的结束

中间张三的一生，就是张三的生命周期

我们可以把每个小程序运行的过程，也概括为生命周期:

小程序的启动，表示生命周期的开始

小程序的关闭，表示生命周期的结束

中间小程序运行的过程，就是小程序的生命周期

在小程序中，生命周期分为两类，分别是

应用生命周期
特指小程序从启动->运行->销毁的过程

页面生命周期
特指小程序中，每个页面的加载->渲染->销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：

生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad 生命周期函数中初始化页面的数据。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

分类：
小程序中的生命周期函数分为两类，分别是:

应用的生命周期函数
- 特指小程序从启动->运行->销毁期间依次调用的那些函数
页面的生命周期函数
- 特指小程序中，每个页面从加载->渲染->销毁期间依次调用的那些函数

应用的生命周期函数
微信小程序快速入门03,微信小程序,微信小程序,小程序,java,前端,后端
页面的生命周期函数

二、WXS脚本

WXS (WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

应用场景
wxml 中无法调用在页面的js 中定义的函数，但是，wxml中可以调用 wxs 中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”。

wxs和JavaScript的关系

虽然 wxs 的语法类似于JavaScript，但是 wxs和JavaScript 是完全不同的两种语言：

wxs 有自己的数据类型
- number 数值类型、string 字符串类型、object 对象类型、boolean 布尔类型、
- function 函数类型、array 数组类型、date 日期类型、regexp 正则
wxs 不支持类似于 ES6 及以上的语法形式
- 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
- 支持：var 定义变量、普通function 函数等类似于ES5的语法
wxs 遵循 CommonJS 规范
- module 对象
- require()函数
- module.exports 对象

基础语法

内嵌wxs脚本

wxs代码可以编写在 wxml文件中的< wxs > 标签内，就像Javascript 代码可以编写在 html文件中的< script >标签内一样。
wxml 文件中的每个< wxs ></ wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在wxml中访问模块中的成员：

<view>{{m1.toUpper(useranme)}}</view>
<wxs module="m1">
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

定义外联的wxs脚本
wxs 代码还可以编写在以.wxs 为后缀名的文件内就像javascript 代码可以编写在以js 为后缀名的文件中一样。示例代码如下:

function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

微信小程序快速入门03,微信小程序,微信小程序,小程序,java,前端,后端
使用外联的wxs脚本

在wxml中引入外联的 wxs 脚本时，必须为标签添加 module 和 src 属性，其中

module 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是相对路径

示例代码如下:

<view>{{m2.toLower(country)}}</view>

<wxs src="../../utils/tools.wxs" module="m2">

wxs的特点

与JavaScript 不同
为了降低 wxs (WeiXin Script)的学习成本，wx 语言在设计时借大量鉴了JavaScript 的语法。但是本质上wxs和JavaScript 是完全不同的两种语言!
不能作为组件的事件回调
wxs典型的应用场景就是"过滤器"经常配合 Mustache 语法进行使用，例如:
微信小程序快速入门03,微信小程序,微信小程序,小程序,java,前端,后端
但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：

隔离性