WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXS
直接写在WXML
视图页面内,而不是js
逻辑文件内:
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
微信为什么要造一个 WXS
结论:因为小程序双线程架构在数据更新上有瓶颈,所以微信才打造了一个 WXS
视图脚本。
1、先看下视图持续更新原理:
在程序中,视图层和逻辑层的数据传输实际上是通过底层WeixinJSBridge
,通过原生的evaluateJavascript
实现的。
小程序通过setData
实现视图更新,底层是通过webView
调用evaluateJavascript
实现的。
//Hybird 执行 js 示例
webView.evaluateJavascript("javascript:方法名()",
new ValueCallback<String>() {
@Override
public void onReceiveValue(String value){
...
}
}
);
setData
要求更新的数据,首先会将这个数据转化为字符串,接着将这个字符串和代码拼接成一个Javascript
脚本,最后把拼接的内容传给evaluateJavascript
的原生方法去执行,从数据到达视图层的更新并不是实时进行的。
2、使用setData
可能会遇到的问题:
由于视图线程和逻辑线程分属两个线程,两个线程之间使用前置的setData
方法,驱动数据交换,还要通过WeixinJSBridge
进行中转,中转的效率是及其低下的。所以有时候安卓的小程序用户在进行界面滑动时会感到页面卡顿。
当阻塞大于200毫秒会明显感到卡顿。
3、使用 WXS
一方面由于setData
在频繁更新、大数据更新、或者加载size
很大的图片时上有瓶颈,影响渲染效率;另一方面WXS
并不运行在逻辑线程中,而是运行在视图线程里,直接操作视图数据,避免了跨线程的通讯开销,所以微信引入了WXS
编程语言。
一般在开发时候我们这样处理:
从后端接口接收回来的初始化数据,在页面onLoad
之前,就塞在Data
数据中,用于视图的初始化渲染,后续的视图交互与更新,如果不与后台有关,我们就使用WXS
编程语言,直接在视图中进行完成,这样可以提高渲染效率。
WXS 存在问题
WXS
虽然可以提高视图数据的更新效率,但它有一下这些问题:
-
WXS
的运行环境和其他JavaScript
代码是隔离的,WXS 中不能调用其他JavaScript
文件中定义的函数,也不能调用小程序提供的API
,即WX
开头的API
。 -
WXS
函数不能作为组件的事件回调。 - 由于运行环境的差异,在
iOS
设备上小程序内的WXS
会比JavaScript
代码快 2 ~ 20 倍。在android
设备上二者运行效率无差异。
网友评论