小程序踩坑记1——video组件上覆盖的文本视图在真机上不显示的解决办法

环境：

    微信版本号：6.6.6

    开发者工具调试基础库：2.2.2

    线上最低基础库：2.0.7

    手机设备：iphone6P

需求：

    视频全屏展示，上面覆盖如图位于底部的元素。

实现：

    使用video里内嵌cover-view的官方实现。

问题：

    在开发者工具上可以展示。在真机上，视频覆盖元素不显示。    

解决方案及过程：

    video组件层级最高一直就困扰着开发者，网上一搜，这个的提问者很多，最终找到一个正解，大体意思就是要设置宽高和定位，赶紧调试一番。

    1、发现最接近video的cover-view没有设置样式。给其设置相对定位和宽高。修改完之后的效果：

    2、发现文本框左侧椭圆部分不在了变成了直角。右边椭圆的出现排除了border-radius支持不友好的可能，猜想是padding-left的原因。于是 给文本再包一层cover-view 通过margin-left与父级 来实现 左间距。修改完之后的效果：

    3、又发现文本都好了，但icon仍没有显示。这个icon是通过iconfont来实现的，经各种查找调试，发现仍不能使用，但cover-image能正常显示。最终使用cover-image来代替iconfont来实现图标。

结果：

    经过上述调试，在真机上实现了预期的展示：

总结：

video组件，在上面展示的内容，实现需要注意：

    1、用内嵌cover-view/cover-image来实现，而且只能是这两个标签，否则会被忽视。 

    2、要设置定位和宽高，尤其高每一个都要设置。

    3、可能对一些样式支持效果不是很好，遇到此类问题，可以多方案调试，实现期望效果，比如：padding-left引起的问题可以通过margin-left来取代处理

    4、iconfont在cover-view不显示的问题已经反馈微信团队，有正解了待更新。

ps：很多时候开始发现是未解的，待解决之后发现原来并没什么，，希望我们在发现问题解决问题的路上结伴而行孜孜不倦～ 有写的不到之处望能不吝赐教，欢迎随时交流，共勉～