微信小程序交互性能优化利器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。尤