# WXS Response Events

Start from base library version 2.4.4. Please remaining backward compatible.

# background

The effect of frequent user interaction is more sluggish on the Mini Program, for example, the page has 2 Element A and B, the user is in A Updo touchmove Gestures, requests B Also follow the move,movable-view Is a classic example. first touchmove The response process for the event is:

a、touchmove Events are thrown from the view layer (Webview) to the logical layer (App Service）

B. Logical layer (App Service) Processing touchmove Event, and again through setData To change B The location of the

first touchmove The response needs to go through the 2 The communication between the second logical layer and the rendering layer and the first rendering, the communication time is relatively large. In addition setData Rendering also blocks execution of other scripts, resulting in a delay in the animation of the entire user interaction.

# Realization Program

The basic idea of this scheme is to reduce the number of communications, so that the event in the view layer (Webview) response. The framework of Mini Programs is divided into view layer (Webview) and logic layer (App The purpose of this layering is to control, and the developer's code can only run at the logical layer (App). Service), and this idea must allow the developer's code to run in the view layer (Webview), as shown in the following diagram:

use WXS Function is used to respond to Mini Program events. Currently, it can only respond to events from built-in components. Custom component events are not supported. WXS Functions in addition to pure logic operations, but also through the encapsulation of goodComponentDescriptor Instance to access and set the class And styles, for interactive animation, set the style and class That's enough. WXS Example of the function is as follows:

var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') // Returns an instance of a component
    instance.setStyle({
        "font-size": "14px" // Support rpx
    })
    instance.getDataset ()
    instance.setClass(className)
    // ...
    return false // Instead of bubbling up, you call both stopPropagation and preventDefault
}

Into which participation event It's a Mini Program.Event objectMore on the basis. event.instance Of the component that triggers the event ComponentDescriptor Instance.ownerInstance Represents the part of the component where the component that triggered the event ComponentDescriptor Instance, if the component that triggered the event is inside the page,ownerInstance Represents a page instance.

ComponentDescriptorIs defined as follows:

WXS Running in the view layer (Webview), the logic inside can do less events after all, there needs to be a mechanism and logic layer (App). Service) developer's code communication, the above callMethod yes WXS Call the logical layer inside (App Service) the method of the developer's code, and the WxsPropObserver Is the logical layer (App Service). The developer's code calls WXS The logical mechanism.

# Methods of Use

• WXML Definition Event:

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

Abovechange:prop(with change: prefix before the attribute) is used in the prop Triggered when the property is set WXS Function, the value must be specified with the{{}}Wrap it up. similar Component Defined properties Inside. observer Property, in thesetData({propValue: newValue})Is triggered after the call.

Be careful: The WXS function must be used with{{}}Wrap it up. when prop The value of the WXS The function fires, not just the value changes, so it's called once when the page is initialized.WxsPropObserverOf the function.

• WXS filetest.wxsIt defines and exports event handlers and functions triggered by property changes:

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)
    }
}

For more examples check out {% Minicode ('L1G0Dkmc7G8a') %}

# Tips

1. Not currently supportedNative componentsThe events,inputand[texting ]((texting ))Component bindinput event
2. 1.02.1901170 and later versions of the developer tools support interactive animation, the minimum version of the base library is 2.4.4
3. At present, the WXS function only supports console.log mode to play the log location problem, note that continuous duplicate logs will be filtered out.