【微信小程序】wxs脚本

1. 什么是 WXS

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

2. WXS 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数（不包括事件绑定），但是， wxml 中可以调用 wxs 中

定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”。

3. WXS 的特点

1. 与 JavaScript 不同：

   为了降低 wxs （ WeiXin Script ）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语
   法。但是本质上， 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 对象

2. 不能作为组件的事件回调：

   wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，例如：
   但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：

   隔离性
   隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：
   ① wxs 不能调用 js 中定义的函数
   ② wxs 不能调用小程序提供的 API

   性能好
   在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
   在 Android 设备上，二者的运行效率无差异

3. 使用WXS
   1）内嵌 wxs 脚本
   wxs 代码可以编写在 wxml 文件中的 标签内，就像 Javascript 代码可以编写在 html 文件中的 标
   签内一样。
   wxml 文件中的每个 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在wxml 中访问模块中的成员,示例代码如下：

<!-- 定义一个文本，调用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view>
<!-- 定义一个wxs的标签，并指定module模块名称 -->
<wxs module="m1">
<!-- 向外暴露一个方法 -->
module.exports.toUpper = function(str) {
 return str.toUpperCase()
}
</wxs>

2）外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 Javascript 代码可以编写在以 .js 为后
缀名的文件中一样。示例代码如下：

// 1.定义方法
function toLower(str) {
 return str.toLowerCase()
}
// 2.暴露成员
module.exports = {
 toLower: toLower
}

在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中：
module 用来指定模块的名称
src 用来指定要引入的脚本的路径，且必须是相对路径
示例代码如下：

<!-- 1.使用外联式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<!-- 2.调用 m2 模块的方法 -->
<view>{{ m2.toLower(country) }}</view>