使用微信小程序原生组件开发应用的限制及解决方案

微信小程序中的原生组件是由客户端创建的，在使用时需要注意一些限制。以下是原生组件的使用限制和相应的解决方案：

1. 原生组件层级最高

无论设置 z-index 为多少，其他组件都无法盖在原生组件上。后插入的原生组件可以覆盖之前的原生组件。

解决方案：cover-view和cover-image组件

为了解决原生组件层级的问题，小程序提供了 cover-view 和 cover-image 组件，这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。他们可以覆盖部分原生组件。

2. 不能在picker-view以及scroll-view, swiper, movable-view中使用

基础库版本2.4.4以下的原生组件不支持在 scroll-view、swiper、movable-view 中使用。

解决方案：升级基础库版本

可以通过升级基础库版本来解决该问题。

3. 部分CSS样式无法应用于原生组件

无法对原生组件设置 CSS 动画，不能定义原生组件为 position: fixed，在父级节点使用 overflow: hidden 时也无法裁剪原生组件的显示区域。

解决方案：使用自定义组件代替原生组件

可以将原生组件替换为自定义组件来实现所需的效果，或者通过JS控制达到类似的效果。

4. 原生组件事件监听的写法不同于其他组件

原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。

解决方案：注意语法规则

需要按照 bindeventname 的规则来书写事件监听函数。

5. 原生组件在调试面板上的遮挡问题

原生组件容易遮挡vConsole弹出的调试面板。

解决方案：在真机上进行调试

建议开发者在使用到原生组件时尽量在真机上进行调试，以获得更准确的效果。

6. 一些原生组件不支持同层渲染

当前video, map, live-player, live-pusher, canvas(2d) 组件不支持同层渲染。

解决方案：使用cover-view和cover-image组件、自定义组件或者JS实现同层渲染效果

可以将原生组件替换为自定义组件并使用cover-view和cover-image组件、或通过JS控制实现同层渲染的效果。

7. 原生组件之间的相对层级问题

在 v2.7.0 及以上版本中，小程序支持在样式中声明 z-index 来指定原生组件的层级。该 z-index 仅调整原生组件之间的层级顺序，其层级仍高于其他非原生组件。