wxs

简介

• wxs(WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结果
• 应用场景：wxml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是‘过滤器’

wxs和JavaScript的区别

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

1. wxs有自己的数据类型

number、string、boolean、object、function、array、date、regexp

2. wxs不支持类似于es6及以上的语法形式

// 支持
var定义变量、普通function函数等类似于es5的语法
// 不支持
let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc....

3. wxs遵循CommonJS规范

module 对象属
require()函数
module.exports对象

基本用法

1. 内嵌wxs脚本

• wxs代码可以编写在wxml文件中的<wxs>标签内
• wxml文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员
• wxs中定义的函数不能作为组件的事件回调函数

<wxs module="m1">
  module.exports.add = function (num) {
    return num + 1
  }
</wxs>
<view>
  {{m1.add(1)}}
</view> 

2. 定义外联的wxs脚本

• wxs代码还可以编写在以.wxs为后缀名的文件内
• 在wxml中引入外联的wxs脚本时，必须为<wxs>标签添加module（来指定模块名称）和src（来指定要引入的脚本路径，且必须是相对路径）属性

// filter.js
function setDate(value) {
  value = value.replace(".000+0000", "Z");
  var time = getDate(value);
  return time;
}
module.exports = {
  setDate: setDate
}

// *.wxml
<view>
  {{m1.setDate('2021-11-11 00:00:00')}}
</view>
<wxs module="m1" src='../../utils/filter.wxs'></wxs>

了解

• 隔离性：wxs的运行环境和其他JS代码是隔离的。wxs不能调用.js中定义的函数、wxs不能调用小程序提供的API
• 性能好：在ios设备上，小程序内的WXS会比JS代码运行效率快2~20倍，在android设备上二者的运行效率无差异