native-component

Native components

Some of the components in the small program are native components created by the client, and these components are:

• camera
• canvas
• input (represented as a native component only when focusing)
• live-player
• live-pusher
• map
• textarea
• video

Limitations on the use of native components

Because native components are out of the WebView rendering process, there are the following limitations when using them:

• Native components have the highest level, so no other components on the page can be covered on the native component, regardless of how much z-index is set. The post-inserted native component can override the previous native component.
• Native components are not yet available in picker-view. The following version of the base library 2.4.4, native components are not supported in scroll-view, swiper, movable-view.
• Some CSS styles cannot be applied to native components, for example, CSS animations cannot be set on native components Cannot define native components as position: fixed cannot be used in parent nodes overflow: hidden to crop the display area of native components
• Event monitoring for native components cannot be written using bind:eventname and only supports bindeventname. Native components also do not support catch and capture event binding.
• Native components obscure the debug panel that vConsole ejects. O n tools, native components are simulated with web components, so many situations do not restore the performance of the real machine very well, it is recommended that developers use the native components as far as possible on the real machine debugging. *

Cover-View and Cover-Image

In order to solve the highest limitations of the native component levels.The applet provides the Cover-View and Cover-Image components, which can be overwritten on the part of the native component.These two components are also native components, but the use restrictions are different from other native components.

Original component is rendered

Same-layer rendering is designed to solve the hierarchical problem of native components, and when the same-layer rendering is supported, native components and other components can be superimposed at will, and hierarchical restrictions no longer exist. H owever, it is important to note that the inside of the component is still rendered natively, and the style is generally not valid inside the native component. The current video, map, live-player, live-pusher, canvas(2d) components already support same-layer rendering.

The relative hierarchy of the native components

In order to adjust the relative hierarchy between native components, the small program in v2.7.0 and above versions supports declaring z-index in styles to specify the hierarchy of native components. The z-index adjusts only the order of the hierarchies between native components, which are still higher than other non-native components.