Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to unbind WeChat Mini Programs", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to unbind WeChat Mini Programs incident" article.

What is an event?

Events are the mode of communication from the view layer to the logical layer.

Events can feed back the user's behavior to the logical layer for processing.

The event can be bound to the component, and when the trigger event is reached, the corresponding event handling function in the logic layer will be executed.

Event objects can carry additional information, such as id, dataset, touches.

How events are used

Bind an event handler in the component.

For example, bindtap, when the user clicks on the component, it will find the corresponding event handler in the corresponding Page of the page.

Click me!

Write the corresponding event handler in the corresponding Page definition, and the argument is event.

Page ({tapName: function (event) {console.log (event)}})

You can see that the message from log is roughly as follows

{"type": "tap", "timeStamp": 895, "target": {"id": "tapTest", "dataset": {"hi": "WeChat"}}, "currentTarget": {"id": "tapTest", "dataset": {"hi": "WeChat"}}, "detail": {"x": 53, "y": 14}, "touches": [{"identifier": 0, "pageX": 53 "pageY": 14, "clientX": 53, "clientY": 14,}], "changedTouches": [{"identifier": 0, "pageX": 53, "pageY": 14, "clientX": 53, "clientY": 14,}],} event details event classification

Events are divided into bubbling events and non-bubbling events.

Bubbling event: when an event on a component is triggered, the event is passed to the parent node.

Non-bubbling event: when an event on a component is triggered, the event is not passed to the parent node.

List of bubbling events for WXML:

Type trigger condition touchstart finger touch action starts touchmove finger touch movement touchcancel finger touch action is interrupted, such as call reminder, pop-up window touchend finger touch action ends tap finger touch immediately leaves longtap finger touch, exceed 350ms before leaving

Note: except for the above table, other component custom events are non-bubbling events, such as submit event, input event, scroll event, (see each component for details)

Event binding

Event binding is written in the same way as the properties of the component, in the form of key and value.

Key starts with bind or catch, and then follows the type of event, such as bindtap, catchtouchstart

Value is a string, and you need to define a function with the same name in the corresponding Page. Otherwise, an error will be reported when the event is triggered.

Bind event binding does not prevent bubbling events from bubbling up, while catch event binding can prevent bubbling events from bubbling up.

For example, in the following example, clicking inner view will trigger handleTap3 and handleTap2 (because the tap event will bubble to middle view, while middle view prevents the tap event from bubbling and no longer passing to the parent node), clicking middle view will trigger handleTap2, and clicking outter view will trigger handleTap1.

Outer view middle view inner view event object

Without special instructions, when a component triggers an event, the handler that binds the event in the logical layer receives an event object.

BaseEvent basic event object attribute list:

Property type description typeString event type timeStampInteger event generation timestamp targetObject trigger event some property values collection of some property values collection of the current component CustomEvent custom event object property list (inheritance BaseEvent): property type description detailObject additional information

TouchEvent Touch event object attribute list (inheriting BaseEvent):

The attribute type describes the touchesArray touch event, an array of changedTouchesArray touch events of touchpoint information that currently stays on the screen, and an array of touchpoint information of current changes

Special events: touch events in cannot bubble, so there is no currentTarget.

Type generic event type timeStamp

The number of milliseconds after the page was opened to trigger the event.

Target

The source component that triggered the event.

Property type describes the type of the idtagNameString current component of the idString event source component the collection currentTarget consisting of custom attributes beginning with data- on the datasetObject event source component

The current component of the event binding.

Property type describes the type of idtagNameString of the current component of idString the collection of custom attributes beginning with data- on the current component datasetObject

Note: target and currentTarget can refer to the above example. When you click inner view, the event object target and currentTarget received by handleTap3 are inner, while the event object target received by handleTap2 is inner,currentTarget is middle.

Dataset

Data can be defined in the component, which will be passed to the SERVICE through events. How to write: start with data-, multiple words are hyphen-linked, no uppercase (uppercase will automatically be converted to lowercase) such as data-element-type, and eventually the hyphen will be converted to hump elementType in event.target.dataset.

Example:

DataSet Test Page ({bindViewTap:function (event) {event.target.dataset.alphaBeta = 1 / /-will be converted to hump event.target.dataset.alphabeta = 2 / / will be converted to lowercase}}) touches

Touches is an array, with each element being a Touch object (the touches carried in the canvas touch event is the CanvasTouch array). Represents the touch point that currently stays on the screen.

Touch object attribute type description identifierNumber touchpoint identifier pageX, the distance between pageYNumber and the upper left corner of the document, the upper left corner of the document is the origin, the horizontal is the X axis, the vertical is the Y axis clientX, the clientYNumber is the distance from the upper left corner of the page (the screen removes the navigation bar), the horizontal is the X axis, the vertical is the Y axis CanvasTouch object attribute type description special identifierNumber touch point identifier x, the distance between yNumber and the upper left corner of Canvas The upper left corner of the Canvas is the origin, the horizontal axis is the X axis, and the longitudinal axis is the Y axis changedTouches

ChangedTouches data format is the same as touches. Indicates that there are changes in touch points, such as touchstart, touchmove, touchend, touchcancel.

Detail

The data carried by the custom event, such as the submission event of the form component, will carry the user's input, and the error event of the media will carry the error message. For more information, please see the definition of each event in the component definition.

The detail of the click event has x, y and pageX, and pageY represents the distance from the upper-left corner of the document.

The above is the content of this article on "how to unbind WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.