小程序应用中WebView中原生组件限制问题解析，小程序ui组件

在微信的文档中有一个章节说明了『 原生组件的使用限制 』有这么一段话

『由于原生组件脱离在 WebView 渲染流程外因此在使用时有以下限制：

所谓的原生组件即非Web组件系统扩展Native组件。因为小程序在视图渲染层面使用了WebView而在VideoMap这类组件使用WebView的WebCore渲染之后体验不佳的诟病一直存在而且标准不一。小程序上因使用原生的WebView进行渲染而不是用修改的WebView内核（至少在iOS上没有这么干）而无法对web原生标签扩展。基于用户体验和坑爹的技术限制小程序提出了原生组件的概念也就是在WebView上面使用原生组件填充占位元素的方式修补这类组件用户体验问题。因为WebView和原生组件在应用层本身就不是一个渲染层级于是出现Web上面的标签无法浮于Video之上(直播应用的恶梦)在不修改技术思路的前提下position: fixed overflow: hidden这样的属性是不可能用于原生组件的样式的。不过伪同层渲染也不是说不可能即在渲染原生组件时候根据层级镂空面积。

Firefox：支持 Ogg Vorbis和WAV

Opera ：支持Ogg Vorbis和WAV

Safari ：支持MP3节省成本列出部分浏览器的支持的如下：

Firefox：支持 Ogg Vorbis和WAV

Opera ：支持Ogg Vorbis和WAV

Safari ：支持MP3AAC格式 和MP4

Chrome ：支持Ogg VorbisMP3WAVAAC和MP4

Internet Explorer 9+ ：支持MP3AAC格式 和MP4

IOS ：支持MP3AAC格式 和MP4

Android ：支持AAC和MP3

上述可以知道视频支持有限（限于版权）。而就我们关注的移动端iOS和Andoroid实现一个视频播放我们可能都会有以下几点的需求：

1、全屏处理；  2、覆盖层效果；  3、自动播放；  4、播放控制；  5、隐藏播放控件；

在iOS上如果使用WebView你无法修改全屏下的工具这一点体验已经足够让所有的产品经理抓狂更不用说Android的这么多的机型。覆盖层效果在微信上不得不使用微信提供原生组件cover-view实现而限于原生实现限制cover-view的支持有限。

1、组件层于WebView层之上  这也应该是微信小程序团队现阶段使用的方案通过特殊的占位标签使用getBoundingClientRect获取组件位置而原生组件跟随Webview滚动。  Talking is cheap. Show me your code那么用代码实现的效果的如下。

now_lowest_gif.gif

从图中可见覆盖层确实位于原生组件之下。

标签： 原生组件支持使用