什么是WXS

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

WXS应用场景

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

wxs和JavaScript关系

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

wxs有自己的数据类型

number、string、boolean、object
function、array、date日期类型、regexp正则

wxs不支持类似ES6及以上的语法格式

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

wxs遵循CommonJS规范

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

WXS语法

内嵌wxs脚本

wxs代码可以编写在wxml文件中标签内，就像javascript代码可以编写在html文件中

wxml文件中每个标签，必须提供module属性，用来指定当前wxs模块名称，方便在wxml中访问模块中的成员

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

外联wxs脚本

wxs代码还可以编写在后缀为.wxs文件内，就像JavaScript可以写在.js文件内。如：

// tools.wxs    
function toLower(str){
  return str.toLowerCase();
}    
function splitPhone(str){
  if(str.length!==11) return str
  var arr = str.split("")
  arr.splice(3,0,"-")
  arr.splice(8,0,"-")
  return arr.join("")
}
module.exports={
  toLower:toLower,
  splitPhone:splitPhone
}

使用外联wxs脚本

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

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

<view>{{m2.toLower("QWERT")}}</view>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>

wxs特点

wxs大量借鉴了javascript语言，但本质上是两种不同的语言。

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

<view>{{m2.toLower("QWERT")}}</view>

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

<button bind:tap="m2.toLower">按钮</button>

隔离性

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

wxs不能调用js中定义的函数
wxs不能调用小程序提供的API

性能好

在IOS设备上，小程序内的wxs会比javascript代码快2—20倍
在android设备上，二者的运行效率无差异

初识小程序-wxs脚本