# WXS響應(yīng)事件

基礎(chǔ)庫(kù) 2.4.4 開(kāi)始支持，低版本需做兼容處理。

# 背景

有頻繁用戶(hù)交互的效果在小程序上表現(xiàn)是比較卡頓的，例如頁(yè)面有 2 個(gè)元素 A 和 B，用戶(hù)在 A 上做 touchmove 手勢(shì)，要求 B 也跟隨移動(dòng)，movable-view 就是一個(gè)典型的例子。一次 touchmove 事件的響應(yīng)過(guò)程為：

a、touchmove 事件從視圖層（Webview）拋到邏輯層（App Service）

b、邏輯層（App Service）處理 touchmove 事件，再通過(guò) setData 來(lái)改變 B 的位置

一次 touchmove 的響應(yīng)需要經(jīng)過(guò) 2 次的邏輯層和渲染層的通信以及一次渲染，通信的耗時(shí)比較大。此外 setData 渲染也會(huì)阻塞其它腳本執(zhí)行，導(dǎo)致了整個(gè)用戶(hù)交互的動(dòng)畫(huà)過(guò)程會(huì)有延遲。

# 實(shí)現(xiàn)方案

本方案基本的思路是減少通信的次數(shù)，讓事件在視圖層（Webview）響應(yīng)。小程序的框架分為視圖層（Webview）和邏輯層（App Service），這樣分層的目的是管控，開(kāi)發(fā)者的代碼只能運(yùn)行在邏輯層（App Service），而這個(gè)思路就必須要讓開(kāi)發(fā)者的代碼運(yùn)行在視圖層（Webview），如下圖所示的流程：

使用 WXS 函數(shù)用來(lái)響應(yīng)小程序事件，目前只能響應(yīng)內(nèi)置組件的事件，不支持自定義組件事件。WXS 函數(shù)的除了純邏輯的運(yùn)算，還可以通過(guò)封裝好的ComponentDescriptor 實(shí)例來(lái)訪問(wèn)以及設(shè)置組件的 class 和樣式，對(duì)于交互動(dòng)畫(huà)，設(shè)置 style 和 class 足夠了。WXS 函數(shù)的例子如下：

var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') // 返回組件的實(shí)例
    instance.setStyle({
        "font-size": "14px" // 支持rpx
    })
    instance.getDataset()
    instance.setClass(className)
    // ...
    return false // 不往上冒泡，相當(dāng)于調(diào)用了同時(shí)調(diào)用了stopPropagation和preventDefault
}

其中入?yún)?event 是小程序事件對(duì)象基礎(chǔ)上多了 event.instance 來(lái)表示觸發(fā)事件的組件的 ComponentDescriptor 實(shí)例。ownerInstance 表示的是觸發(fā)事件的組件所在的組件的 ComponentDescriptor 實(shí)例，如果觸發(fā)事件的組件是在頁(yè)面內(nèi)的，ownerInstance 表示的是頁(yè)面實(shí)例。

ComponentDescriptor的定義如下：

WXS 運(yùn)行在視圖層（Webview），里面的邏輯畢竟能做的事件比較少，需要有一個(gè)機(jī)制和邏輯層（App Service）開(kāi)發(fā)者的代碼通信，上面的 callMethod 是 WXS 里面調(diào)用邏輯層（App Service）開(kāi)發(fā)者的代碼的方法，而 WxsPropObserver 是邏輯層（App Service）開(kāi)發(fā)者的代碼調(diào)用 WXS 邏輯的機(jī)制。

# 使用方法

• WXML定義事件：

<wxs module="test" src="./test.wxs"></wxs>
<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>

上面的change:prop（屬性前面帶change:前綴）是在 prop 屬性被設(shè)置的時(shí)候觸發(fā) WXS 函數(shù)，值必須用{{}}括起來(lái)。類(lèi)似 Component 定義的 properties 里面的 observer 屬性，在setData({propValue: newValue})調(diào)用之后會(huì)觸發(fā)。

注意：WXS函數(shù)必須用{{}}括起來(lái)。當(dāng) prop 的值被設(shè)置 WXS 函數(shù)就會(huì)觸發(fā)，而不只是值發(fā)生改變，所以在頁(yè)面初始化的時(shí)候會(huì)調(diào)用一次WxsPropObserver的函數(shù)。

• WXS文件test.wxs里面定義并導(dǎo)出事件處理函數(shù)和屬性改變觸發(fā)的函數(shù)：

module.exports = {
    touchmove: function(event, instance) {
        console.log('log event', JSON.stringify(event))
    },
    propObserver: function(newValue, oldValue, ownerInstance, instance) {
        console.log('prop observer', newValue, oldValue)
    }
}

更多示例請(qǐng)查看在開(kāi)發(fā)者工具中預(yù)覽效果

# Tips

1. 目前還不支持原生組件的事件、input和textarea組件的 bindinput 事件
2. 1.02.1901170及以后版本的開(kāi)發(fā)者工具上支持交互動(dòng)畫(huà)，最低版本基礎(chǔ)庫(kù)是2.4.4
3. 目前在WXS函數(shù)里面僅支持console.log方式打日志定位問(wèn)題，注意連續(xù)的重復(fù)日志會(huì)被過(guò)濾掉。