WXS(WeiXin Script)是小程序的一套脚本语言，结合WXML，可以构建页面的结构。 ----WXS
创建与使用WXS
创建WXS
我们可以在微信开发者工具或者IDE中，直接新建一个文件，只需要指定文件的后缀名为.wxs即可创建一个WXS文件。
使用WXS
WXS支持两种使用方式，一种是创建单独的.wxs文件，然后在wxml文件中引入这个wxs文件，这也是我们课程中使用的方式。另一种方式是可以直接在wxml文件中书写，但通常情况下不推荐使用这种方式来使用wxs，这里引用小程序开发文档中的一段示例代码：
<!--wxml-->
<!--下面的getMax函数，接收一个数组，且返回数组中最大的元素的值-->
<wxs module="m1">
var getMax = function(array){
var max = undefined;
for(var i = 0;i<array.length;++i){
max = max === undefined ?array[i]:(max>=array[i]?max:array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 调用wxs里面的getMax函数，参数为page.js里面的array -->
<view>{{m1.getMax(array)}}</view>
这种方式有两个缺点，第一，降低了Page的可读性；第二，无法在其他页面复用该wxs的实现。
使用WXS的注意事项
这里引用小程序开发文档中内容：
1.WXS不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2.WXS与JavaScript是不同的语言，有自己的语法，并不和JavaScript一致。
3.WXS的运行环境与其他JavaScript代码是隔离的，WXS中不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API。
4.WXS函数不能作为组件的事件回调。
5.由于运行环境的差异，在IOS设备上小程序内的WXS会比JavaScript代码快2~20倍。在android设备上二者运行效率无差异。
这里再补充两点：
1.只能使用JavaScript的ES5语法。
2.可以支持console.log来调试，但是调试体验非常差。考虑到一般WXS里面不会书写特别复杂的JS逻辑，建议是在外部页面测试好逻辑之后，复制粘贴在WXS中。
WXS的使用场景
当为了实现某个功能，会导致视图层与逻辑层频繁交互时，就需要考虑是否能使用WXS来代替这部分的实现。比如以下两种场景：
1.需要在WXML中对数据进行较复杂的格式化或者转换。
有些时候我们需要对WXML中的数据做一些特殊的格式化处理。最简单的实现 就是在js中处理好，然后执行数据绑定渲染到wxml上。这种做法多数情况下并不是什么太大问题。但是在比较好的工程实践中，这种处理就应该被封装起来，每个组件或者页面的JS都应该体现单一职责，即只做跟自己确切相关的事。但有人会觉得，我们封装一个处理函数，然后引用，只做数据绑定不就可以了？是的，但这并没有解决视图层与逻辑层多余的交互问题。我们完全可以把这件时，都放在渲染层去做。WXML本身是支持一些简单的逻辑运算的，比如在wXMl中使用if、for、三元表达式。但一些比较复杂的逻辑运算，我们就需要借助
WXS了。因为在WXS中我们可以编写相对复杂的JS代码，并且可以直接作用到WXML中，省去了数据绑定的过程。
2.引用微信开发文档中一个很好的例子：有频繁用户交互的效果在小程序上表现是比较卡顿的，例如页面有2个元素A和B，用户在A上做touchmove手势，要求B也跟随移动，movable-view就是一个典型的例子。
一次touchmove事件的响应过程为：
a、touchmove事件从视图层(Webview)抛到逻辑层(App Service)
b、逻辑层（App Service）处理touchmove事件，再通过setData来改变B的位置 一次touchmove的响应需要经过2次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外setData渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。 像这种频繁的触发事件又做数据绑定的，使用WXS可以明显提升性能。我们可以把事件的处理函数定义在WXS中，在WXS里面进行逻辑处理，只在必要时才通过触发事件或者调用页面组件方法来进行视图层和逻辑层的通信。
WXS通信
1.最简单的情况下，使用WXS中的函数来做数据处理，并且是有返回值的，那么WXML在调用WXS中的函数后，就能拿获取到返回值。
<!--wxml-->
<!-- 下面的getMax函数，接收一个数组，且返回数组中最大的元素的值-->
<wxs module = "m1">
var getMax = function(array){
var max = undefined;
<!-- 省略一些逻辑-->
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 调用wxs里面的getMax函数，参数为page.js里面的array-->
<view>{{m1.getMax(array)}}</view>
2.使用WXS中的函数来响应小程序事件，可以通过使用ownerInstance.callMethod('函数名','参数')来调用页面/组件的函数，并给这个方法传递参数。
WXS所在的组件或者页面。必须已经存在要调用的函数。 3.使用WXS中的函数来响应小程序事件，可以通过使用ownerInstance.triggerEvent('事件名称','参数')来触发一个自定义事件。 想要监听到这个事件，必须是在使用了这个WXS的自定义组件外部，即父组件或者页面，才能监听到。
