谜之wxs，uniapp如何用它大幅提升性能

小程序里有几个谜一样的存在&＃xff0c;微信的WXS、支付宝的SJS、百度的Filter。

很多开发者都不明白为什么要造这种语言脚本的轮子出来&＃xff0c;甚至很多开发者根本不知道它们的存在。

其实几大小程序平台创造它们&＃xff0c;都是为了解决性能问题&＃xff0c;但不得不吐槽下&＃xff0c;设计的实在是很难用&＃xff0c;文档也语焉不详。

uni-app支持将WXS、SJS、Filter编译到这3家小程序平台&＃xff0c;同时还在App和H5实现了WXS的解析。为什么做这些事&＃xff1f;也是为了性能。

uni-ui库新版中的swiperaction组件&＃xff0c;就是列表项向左滑动时拉出几个挤压式联动的菜单按钮&＃xff0c;这种流畅的跟手动画&＃xff0c;正是借助于WXS机制实现的。

微信为何要创造WXS

WXS&＃xff08;WeiXin Script&＃xff09;是微信创造的一套脚本语言&＃xff0c;它的官方说法是&＃xff1a;“WXS 与 Javascript 是不同的语言&＃xff0c;有自己的语法&＃xff0c;并不和 Javascript 一致”。

那微信为何要脱离 Javascript &＃xff0c;单独创造一套语言呢&＃xff1f;这要从微信小程序的底层逻辑&＃xff08;运行环境&＃xff09;讲起。

小程序的运行环境分为逻辑层和视图层&＃xff0c;分别由2个线程管理&＃xff0c;其中&＃xff1a;

• WXML 模板和 WXSS 样式工作在视图层&＃xff0c;界面使用 WebView 进行渲染
• Javascript代码工作在逻辑层&＃xff0c;运行在JsCore或v8里

小程序在视图层与逻辑层两个线程间提供了数据传输和事件系统。这样的分离设计&＃xff0c;带来了显而易见的好处&＃xff1a;

• 逻辑和视图分离&＃xff0c;即使业务逻辑计算非常繁忙&＃xff0c;也不会阻塞渲染和用户在视图层上的交互

但同时也带来了明显的坏处&＃xff1a;

• 视图层&＃xff08;webview&＃xff09;中不能运行JS&＃xff0c;而逻辑层JS又无法直接修改页面DOM&＃xff0c;数据更新及事件系统只能靠线程间通讯&＃xff0c;但跨线程通信的成本极高&＃xff0c;特别是需要频繁通信的场景

什么是需要频繁通讯的场景&＃xff1f;最典型的例子就是用户持续交互的情况&＃xff0c;比如触摸、滚动等。我们以侧滑菜单为例&＃xff0c;假设在页面上滑动A元素&＃xff0c;要求B元素跟随移动&＃xff0c;一次滑动操作&＃xff08;touchmove&＃xff09;的响应过程如下&＃xff1a;

1. touchmove 事件从视图层&＃xff08;Webview&＃xff09;传递到逻辑层&＃xff0c;中间会由微信客户端&＃xff08;Native&＃xff09;做中转
   
2. 逻辑层处理 touchmove 事件&＃xff0c;计算需移动的位置&＃xff0c;然后再通过 setData 传递到视图层&＃xff0c;中间同样会由微信客户端&＃xff08;Native&＃xff09;做中转
   

一次 touchmove 的响应需要经过 视图层、Native、逻辑层三者之间2个完整来回的通信&＃xff0c;通信的耗时开销较大&＃xff0c;用户的交互就会出现延时卡顿的情况。

除了滚动、拖动交互外&＃xff0c;在for循环里对数据做格式修改&＃xff0c;也会造成逻辑层和视图层频繁通讯。

其实这类通信损耗问题&＃xff0c;在业内由来已久&＃xff0c;react native和weex都有类似问题&＃xff0c;weex提供了bindingx来解决。

但对于小程序来讲&＃xff0c;这类问题解决起来更容易。其实视图层的webview&＃xff0c;是有js环境的&＃xff0c;只不过过去不给开发者开放。

如果在视图层的js直接处理滚动或拖动交互、直接处理数据格式&＃xff0c;就能避免大量通信损耗。

但对于小程序平台而言&＃xff0c;大量开放webview里的js编写&＃xff0c;违反了它的初衷&＃xff0c;比如开发者会直接操作dom&＃xff0c;影响性能体验。所以小程序平台提出一种新规范&＃xff0c;限制webview里可运行的js的能力。这就是wxs、sjs、filter的由来。

从本质来讲&＃xff0c;wxs、sjs、filter是一种被限制过的、运行在视图层webview里的js。它并不是真的发明了一种新语言。

WXS特征及适用场景

WXS具备如下特征&＃xff1a;

• WXS是可以在视图层&＃xff08;webview&＃xff09;中运行的JS
• WXS无法修改业务数据&＃xff0c;仅能设置当前组件的class和style
• WXS是被限制过的Javascript&＃xff0c;可以进行一些简单的逻辑运算
• WXS可以监听touch事件&＃xff0c;处理滚动、拖动交互

故可以得出WXS的适用场景&＃xff0c;主要包括&＃xff1a;

• 用户交互频繁、仅需改动组件样式&＃xff08;比如布局位置&＃xff09;&＃xff0c;无需改动数据内容的场景&＃xff0c;比如侧滑菜单、索引列表、滚动渐变等
• 纯粹的逻辑计算&＃xff0c;比如文本、日期格式化&＃xff0c;通过WXS可以模拟实现Vue框架的过滤器,如下是一个通过wxs便捷实现首字母大写的示例&＃xff1a;

//首字母大写var capitalize &＃61; function(value) {if (!value) return &＃39;&＃39;value &＃61; value.toString()return value.charAt(0).toUpperCase() &＃43; value.slice(1)}module.exports &＃61; {capitalize: capitalize}

{{m1.capitalize(title)}}



uni-app如何支持WXS

uni-app遵循Vue单文件组件&＃xff08;SFC&＃xff09;规范&＃xff0c;组件/样式/脚本是写在一个.vue文件中的&＃xff0c;但微信小程序是多文件分离&＃xff08;wxml/wxss/js/json&＃xff09;的&＃xff0c;所以在微信端的主要工作是扩展vue-template-compiler&＃xff0c;解析template/style/script节点&＃xff0c;并正确生成到对应的wxml/wxss/js文件中&＃xff0c;具体编译工作如下图&＃xff1a;

Tips-1&＃xff1a;关于标签重构为


2. 在 wxs 文件中&＃xff0c;处理 touch 事件逻辑&＃xff0c;通过 translateX 移动元素位置