美文网首页
小程序 WXS

小程序 WXS

作者: Vergil_wj | 来源:发表于2021-05-22 14:54 被阅读0次

    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进行中转,中转的效率是及其低下的。所以有时候安卓的小程序用户在进行界面滑动时会感到页面卡顿。

    卡顿.png

    当阻塞大于200毫秒会明显感到卡顿。

    3、使用 WXS

    一方面由于setData在频繁更新、大数据更新、或者加载size很大的图片时上有瓶颈,影响渲染效率;另一方面WXS并不运行在逻辑线程中,而是运行在视图线程里,直接操作视图数据,避免了跨线程的通讯开销,所以微信引入了WXS编程语言。

    一般在开发时候我们这样处理:

    从后端接口接收回来的初始化数据,在页面onLoad之前,就塞在Data数据中,用于视图的初始化渲染,后续的视图交互与更新,如果不与后台有关,我们就使用WXS编程语言,直接在视图中进行完成,这样可以提高渲染效率。

    WXS 存在问题

    WXS虽然可以提高视图数据的更新效率,但它有一下这些问题:

    1. WXS的运行环境和其他JavaScript代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API,即WX开头的API
    2. WXS函数不能作为组件的事件回调。
    3. 由于运行环境的差异,在iOS设备上小程序内的WXS会比JavaScript代码快 2 ~ 20 倍。在android设备上二者运行效率无差异。

    参考

    微信开放文档

    相关文章

      网友评论

          本文标题:小程序 WXS

          本文链接:https://www.haomeiwen.com/subject/ytkwjltx.html