1. The frame assembly Exparser (built-in components, custom components)
WXML attribute value transmitted from the parent component subassembly to the basic communication mode, and the event system from the sub-assembly components to the parent basic communication mode.
Events and non-events can be divided into bubble bubbling event. Bubbling event can also be divided on the Shadow Tree bubbling and bubbling events on Composed Tree event. If the bubble in the Shadow Tree, the bubble will only go through nodes on this component Shadow Tree, which can effectively control event bubbling through the scope.
//input-with-label的WXML
<label> <input /> <slot /> </label>
// page WXML
<view> <input-with-label> <button /> </input-with-label> </view>
Using the above example, when an event is triggered on the button:
l If the event is non-bubbling, you can only listen to the event on the button;
l If the event is bubbling on the Shadow Tree, that button, input-with-label, view can in turn listen to the event;
l If the event is bubbling on Composed Tree, that button, slot, label, input-with-label, view can in turn listen to the event.
2. The primary component (by the client to participate in the native rendering components)
Common primary components:
| video | video | Yes | Play Video |
| map | map | Yes | Show map |
| canvas | canvas | Yes | Providing a free drawing area |
| picker | Pop-up Selector | no | When no initial interface, pop-up selector is clicked |
The main [limit]: Some CSS styles can not be applied to the native components, for example, can not be used in the parent node overflow: hidden to tailor the display area native components; you can not use transformrotate let the native assembly produces rotation.
Native components will float to the top of the page other components (equivalent to have positive infinity z-index value) so that other components can not be displayed on the cover of native components. Want to solve this problem, consider using a cover-view and cover-image components. These two components are native components, also from the outer WebView rendering process, and the level between the native component can control according to certain rules.
The communication performance optimization
Page initialization time substantially by the initial page data communication time and the initial rendering time constitute two parts.
After the initial rendering is complete, the View layer can be updated after the developer calls setData execution interface. Logical layer also the data field of the data provided setData combined, so that the developer can be changed with data read this.data .
Developers in the implementation setData call, it is best to follow the following principles:
1. Do not call the setData too often, consideration should be given several times setData combined into one setData call;
performance and the amount of data 2. Data communication positively correlated, so if there are a number of data field is not shown and the interface, or more complex data structure containing the long string, should not be used to set these data setData ;
3 and interface rendering independent data is preferably not provided in the data, a page may be considered provided the object In other fields.
When the view logic layer event feedback to the layer, direction of communication from the logical layer to the view layer. Because this process is asynchronous communication, it would produce a certain delay, the same time a positive correlation with the amount of delay of data transmission, the amount of data in less than 30ms 64KB. Method of reducing the delay time of two main reasons:
1. to remove unnecessary event binding (bind and the catch WXML), thereby reducing the amount of data and the number of times of communication;
need to transmit the dataset target and currentTarget 2. event binding and therefore do not place too much data in the prefix of the attribute data (data-XXX) node.