Native components

Native components

In the development of Luffa mini program platform, some components are native components created by the client. These native components are implemented by the mini program client and have higher performance and richer functions

• camera： Camera component, used to call the camera to take pictures or record videos;
• Canvas： Canvas component, used to draw graphics, animations, etc.;
• input： Only behaves as a native component when focused;
• textarea： Multi-line input box component, used to enter multiple lines of text;
• video： Video component, used to play videos;
• liver-player： Live player component, used to play live streams;
• map： Map component, used to display maps and markers, routes, etc. on maps.

Restrictions on the use of native components

Since native components are separated from the WebView rendering process, there are the following restrictions when using them:

• Native components have the highest level, so other components on the page cannot cover native components no matter how much z-index is set. The native components inserted later can cover the previous native components.
• Native components cannot be used in <picker-view>.
• Some CSS styles cannot be applied to native components, for example:
  • CSS animations cannot be set for native components.
  • Cannot define native components as position: fixed.
  • Cannot use overflow: hidden in parent nodes to crop the display area of
• Native component event monitoring cannot use bind:eventname, only bindeventname is supported. Native components also do not support catch and capture event binding methods.
• Native components will block the debug panel popped up by vConsole.

TIP

In terms of tools, native components are simulated with web components, so in many cases the performance of real devices cannot be restored well. It is recommended that developers try to debug on real devices when using native components.