WXS简介

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

WXS原理

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

注意事项（划重点）

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

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

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

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

WXS的使用

引入WXS

WXS通过直接直接在WXML代码中直接写<wxs module="handler">todo...</wxs>代码块的方式来使用，也可以通过<wxs src='./handle.wxs' module="handler">todo...</wxs>指定.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.<string>	参数与 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实现。

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

微信小程序语言c#,微信小程序推出最新脚本语言WXS，你需要知道的全在这里了...
原标题:微信小程序推出最新脚本语言WXS,你需要知道的全在这里了感谢"造程序"(微信ID:zaochengxucom)的授权发布. 责编:陈秋歌,关注微信开发等领域,寻求报道或者 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
微信小程序软件测试junit,微信小程序兼容性能测试方法
本文为微信小程序兼容.性能测试方法介绍. 兼容操作系统兼容由于小程序依赖微信客户端本身,因此理论上来说只要微信客户端兼容的小程序应该都可以兼容,这里推荐覆盖Android和iOS主流版本系统即可, ...
Asp.Net Core SignalR 与微信小程序交互笔记
什么是Asp.Net Core SignalR Asp.Net Core SignalR 是微软开发的一套基于Asp.Net Core的与Web进行实时交互的类库,它使我们的应用能够实时的把数据推送给 ...
小程序搜索框_微信小程序搜索及优化相关知识科普
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...
学习微信小程序开发框架之脚本语言WXS
此贴为学习9 小时搞定微信小程序开发的笔记. 文档:WXS · 小程序 WXS(WeiXin Script)是小程序的一套脚本语言.结合 WXML,可以构建出页面视图的结构和内容.一般使用WXS做过 ...
微信小程序：wxml中增加wxs脚本实现手机号/身份证等隐私信息显示
在js中,我们需要将手机号带星号显示是很容易的事情,只需要调用字符串截断与拼接就可以了:但是,在wxml中,我们如何处理呢? 微信小程序开发框架中有一个wxs,就是为了解决类似问题的,只需要在wmxl ...
android 分享小程序到微信,Android 分享微信小程序之图片优化
小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,虽然功能都正常,但整体测试发现图片展示效果不佳.于是小菜整理了一个简单的小 ...
三方App实现和微信小程序交互
近期因需求需要再次集成微信SDK,在实现app拉起程序的工程中是很顺利的,实现小程序唤醒app时着实被微信光放的文档坑了一把(想必很多人都很头疼微信的开发文档),最后[被迫]下载了demo看了其实现才 ...

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

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