基础库 2.4.4 开始支持,低版本需做兼容处理。
本方案基本的思路是减少通信的次数,让事件在视图层(Webview)响应。小程序的框架分为视图层(Webview)和逻辑层(App Service),这样分层的目的是管控,开发者的代码只能运行在逻辑层(App Service),而这个思路就必须要让开发者的代码运行在视图层(Webview),如下图所示的流程:
使用 WXS 函数用来响应小程序事件,目前只能响应内置组件的事件,不支持自定义组件事件。WXS 函数的除了纯逻辑的运算,还可以通过封装好的ComponentDescriptor
实例来访问以及设置组件的 class 和样式,对于交互动画,设置 style 和 class 足够了。WXS 函数的例子如下:
var wxsFunction = function(event, ownerInstance) {
var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
instance.setStyle({
"font-size": "14px" // 支持rpx
})
instance.getDataset()
instance.setClass(className)
// ...
return false // 不往上冒泡,相当于调用了同时调用了stopPropagation和preventDefault
}
其中入参 event
是小程序事件对象基础上多了 event.instance
来表示触发事件的组件的 ComponentDescriptor
实例。ownerInstance
表示的是触发事件的组件所在的组件的 ComponentDescriptor
实例,如果触发事件的组件是在页面内的,ownerInstance
表示的是页面实例。
ComponentDescriptor
的定义如下:
方法 | 参数 | 描述 | 最低版本 |
---|---|---|---|
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 |
setTimeout | (Function, Number) | 与原生 setTimeout 一致。用于创建定时器。 | 2.14.2 |
clearTimeout | Number | 与原生 clearTimeout 一致。用于清除定时器。 | 2.14.2 |
getBoundingClientRect | 无 | 返回值与 SelectorQuery 的 boundingClientRect 一致。 | 2.14.2 |
WXS 运行在视图层(Webview),里面的逻辑毕竟能做的事件比较少,需要有一个机制和逻辑层(App Service)开发者的代码通信,上面的 callMethod
是 WXS 里面调用逻辑层(App Service)开发者的代码的方法,而 WxsPropObserver
是逻辑层(App Service)开发者的代码调用 WXS 逻辑的机制。