本篇经验将继续分享视图容器类组件中 cover-view 覆盖类视图容器组件的使用详解。本篇经验将基于第一个手工构建的微信小程序演示，具体构建步骤，可以参考如下经验引用。

0微信小程序开发实战--手工开发第一个小程序

工具/原料

  • 微信开发者工具

方法/步骤

  1. 1

    先百度搜索查看 cover-view 组件的官方文档，从官方文档可以看出，这是一个覆盖在原生组件之上的视图容器组件，可被覆盖的原生组件有： map、video、canvas、camera、live-player、live-pusher 。可通过嵌套 cover-image 实现一个图片覆盖效果。

     

  2. 2

    在工程中新建一个 images 子目录，并拷贝两张代表播放与暂停的图标图片到该子目录中，后面 cover-image 标签会使用这两张本地图片。

     

  3. 3

    演示通过 cover-view 在原生 video 组件上覆盖两个图标按钮

    1. 通过原生video组件在页面创建一个视频对象；

    2. 在 <video> 标签内部通过 <cover-view> 和 <cover-image> 标签创建多个覆盖组件。

     

  4. 4

    在 js 中创建上面 cover-view 上绑定的 play, pause 函数，注意，这个两个函数需要使用页面 video 对象，在  onReady 函数中通过平台提供的接口获取该对象。

     

  5. 5

    在 wxss 文件中定义上述各组件所使用的样式。

     

  6. 6

    保存编译，在模拟器中可以看到页面效果，符合预期，cover-view 上的动作也能控制视频的播放与暂停。

     

    END

注意事项

  • 在开发过程中，要有查看官方文档，并且多动手测试的好习惯。
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。