微信小程序交互性能优化利器WXS的使用（一）

WXS简介

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

WXS原理

简单来说WXS就是跳过监听数据然后重新渲染页面视图这步，直接通过wxs来操作视图层。

注意事项（划重点）

先看一下微信官方的介绍：

1. WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和JavaScript 一致。
2. WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript
3. 文件中定义的函数，也不能调用小程序提供的API。 WXS 函数不能作为组件的事件回调。 由于运行环境的差异，在 iOS 设备上小程序内的
4. WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

很多人看到这里就被劝退了，觉得跟JS交互不理想，而且运行优化也不够理想。其实不然，经过本人实测：

1. WXS支持大部分es5规范的JS语法，(常用的setTimeout、setInterval等异步方法不支持)，详见WXS语法支持。
2. WXS可以用过callMethod方法调用页面逻辑层(即页面.js)的函数，例如：ins.callMethod('pageHandler',args:object) ins为当前wxs实例，pageHandler为逻辑层函数名，args为传递参数。
3. WXS虽然不能支持这些功能，但可以通过监听变量的方式来实现，后面会写。
4. 经过实测，WXS带来的性能提升在android设备上仍然强劲，稳定性和兼容性甚至优于IOS。尤其进行开发者工具连接真机调试时，流畅程度成吨提升。

WXS的使用

引入WXS

WXS通过直接直接在WXML代码中直接写todo...代码块的方式来使用，也可以通过todo...指定.wxs文件路径的方式，module指定此wxs的名称，用于WXML中调用。

WXS的响应事件（重要）

方法	参数	描述	最低版本
selectComponent	selector对象	返回组件的 ComponentDescriptor 实例。
selectAllComponents	selector对象数组	返回组件的 ComponentDescriptor 实例数组。
setStyle	Object/string	设置组件样式，支持rpx。设置的样式优先级比组件 wxml 里面定义的样式高。不能设置最顶层页面的样式。
addClass/removeClass/ hasClass	string	设置组件的 class。设置的 class 优先级比组件 wxml 里面定义的 class 高。不能设置最顶层页面的 class。
getDataset	无	返回当前组件/页面的 dataset 对象
callMethod	(funcName:string, args:object)	调用当前组件/页面在逻辑层（App Service）定义的函数。funcName表示函数名称，args表示函数的参数。
requestAnimationFrame	Function	和原生 requestAnimationFrame 一样。用于设置动画。
getState	无	返回一个object对象，当有局部变量需要存储起来后续使用的时候用这个方法。
triggerEvent	(eventName, detail)	和组件的triggerEvent一致。
getComputedStyle	Array.	参数与 SelectorQuery 的 computedStyle 一致。	2.11.2

WXS 运行在视图层（Webview），里面的逻辑毕竟能做的事件比较少，需要有一个机制和逻辑层（App Service）开发者的代码通信，上面的 callMethod 是 WXS 里面调用逻辑层（App Service）开发者的代码的方法，而 WxsPropObserver 是逻辑层（App Service）开发者的代码调用 WXS 逻辑的机制。

开始食用WXS

封装视图层WXML实用小方法

在很多WXML中我们需要使用一定的方法去控制是否渲染或者渲染样式，WXML本身支持的表达式太少，如果全在逻辑层就处理的话，代码会比较冗余，而且难看，频繁变动侦听的话也影响交互性能，这里我们就可以用到WXS了:

 <wxs module="tools">
      function indexOf(arr, value) {
        if (arr.indexOf(value) < 0) {
            return false;
        } else {
            return true;
        }
    }
    module.exports.indexOf = indexOf;
  </wxs>
  <view wx:for="Arr" class="{{tools.indexOf(activeArr,item)?'active':''}}"></view>

wxml本身是不支持indexOf方法的，这里利用wxs封装了一个indexOf的方法， 并且只返回true或false来判断我们渲染的样式类名，依此类推，很多视图层中的条件判断渲染等都可以wxs实现。