WXS

21 3月

WXS与JS不同(虽然长的很像),因为MINA的双线程架构,setData在频繁更新或大数据更新上有性能瓶颈,影响渲染效率,所以微信自创了WXS视图脚本,在WXML代码中可以直接使用WXS。WXS并不运行在小程序的APP Service逻辑线程里,而是运行在View视图线程内,直接操作视图数据,不需要通过JSBridge进行通信,这样就避免了跨线程的通信开销,解决了数据更新操作视图的性能瓶颈。

WXS有以下缺陷:

  • WXS的运行环境与JS是隔离的,WXS不能调用写在JS代码里的函数,也不能调用小程序提供的wx-api
  • WXS不能作为视图模板中的事件回调句柄
  • WXS在iOS里比JS快2~20倍,但在Android上两者执行效率差不多

后端接口取到的数据在页面onLoad之前,塞在Data里用于初始化视图渲染。后续页面交互与更新,如果与后端无关,就用WXS直接在视图层完成,这样可以提高渲染效率。

WXS的事件处理比较特殊,只能响应内置组件的事件,不支持自定义组件事件。所以你在自定义组件内triggerEvent无法执行绑定的WXS的方法。例如:

// 自定义组件 custom-comp.js
ready(){
  this.triggerEvent('ready')
},

// WXS里定义 onComponentReady
wxs.onComponentReady = function (e, owner) {
  ...
}

// view里绑定WXS里定义的方法
<custom-comp onClose="closePopUp" bindready="{{region.onComponentReady}}">  // onComponentReady不会被触发

WXS里数据绑定到view里需要初始化的话,可以用change:prop来实现,由wxsPropObserver机制调用,当属性被绑定到视图上时,就会被执行。例如:

// WXS里定义 onPropSigned
wxs.onPropSigned = function(newValue, oldValue, ownerInstance, instance){
  ...
  ownerInstance.callMethod("setData", { // 在APP Service线程里执行setData,初始化数据
    ...
  })
}

// 这里监听class属性的绑定,因为class属性是一次性绑定,后续不会变化,比较适合用于首次渲染时初始化数据用
// dummy-class可以没有实际定义,就是弄个无用样式类,绑定到view上,首次渲染时初始化数据用
<view change:class="{{region.onPropSigned}}" class="dummy-class"> 

发表评论

邮箱地址不会被公开。 必填项已用*标注