wxs脚本

什么是WXS

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

2.wxs 的应用场景

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

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对象

wxs脚本基础语法

内嵌 wxs 脚本

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

<view>{{m1.toUpper(username)}}</view>
<!-- 内嵌式wxs脚本 -->
<wxs module="m1">
  module.exports.toUpper = function(str) {
   return str.toUpperCase()
  }
</wxs>

外联 wxs 脚本

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

tool.wxs 文件：

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

module.exports = {
  toLower: toLower
}

使用外联的 wxs 脚本

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

• module用来指定模块的名称
• src用来指定要引入的脚本的路径，且必须是相对路径
  示例如下：
  wxml 文件：

<view>{{m2.toLower(country)}}</view>
<!-- 外联式微信脚本 -->
<wxs src="../../utils/tool.wxs" module="m2"></wxs>

注意：wxs不能作为组件的事件回调
wxs 的典型应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，例如：

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

但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：

<button bindtap=m2.toLower> 按钮 </button>