WXS的基本使用

WXS脚本-概述

1.什么是wxs

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

2.wxs脚本

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

3.wxs和JavaScript的关系

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

1. wxs有自己的数据类型
   • number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
   • function 函数类型、array 数组类型、 data 日期类型、 regexp 正则
2. wxs不支持类似于ES6及以上的语法
   • 不支持：let、const、结构赋值、展开运算符、箭头函数、对象属性简写、etc
   • 支持：var 定义变量、普通function函数等类似于ES5的语法
3. wxs遵循CommonJS规范
   • module对象
   • require()函数
   • module.exports对象

WXS脚本-基本语法

1.内嵌wxs脚本

wxs 代码可以编写在wxml文件中的<wxs>标签内，就像JavaScript代码可以编写在html文件中的<script>标签内一样。

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

<view>{{m1.toUpper(username)}}</view>

<wxs module='m1'>
 // 将文本转为大写形式 zs -> ZS
  	module.exports.toUpper = function(str){
  		return str.toUpperCase()
  }
</wxs>

2.定义外联的wxs脚本

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

// tools.wxs 文件
function toLower(str){
 return str.toLowerCase()
}

module.exports = {
	toLower:toLoWer
}

3.使用外联的wxs脚本

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

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

示例代码如下：

<!-- 调用 m2 模块中的方法 -->
 <view>{{m2.toLower(country)}}</view>
 
<!-- 引用外联的 tools.wxs 脚本，并命名为 m2 -->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

WXS脚本-wxs的特点

1.与JavaScript不同

为了降低wxs的学习成本，wxs语言在设计时借鉴了大量的JavaScript的语法。但是本质上，wxs都喝JavaScript是完全不同的两种语言！

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

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

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

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

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

3.隔离性

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

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

4.性能好

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