小程序 – WXS脚本语言说明

简介

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

应用场景

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

与 JavaScript 的关系

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

①wxs 有自己的数据类型

number 数值类型、string 字符串类型、boolean 布尔类型、bobject 对象类型、

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(username)}}</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
}

引入 wxs 文件，要设定module

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

wxs 特点

wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用。

以下方式是错误的，wxs 代码不能定义方法调用。

隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：

① wxs 不能调用 js 中定义的函数

② wxs 不能调用小程序提供的 API

性能

在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍

在 android 设备上，二者的运行效率无差异