微信小程序教程之微信组件cover-view

微信小程序教程之微信组件cover-view

微信小程序提供了很多有用的组件,今天开发项目的时候使用到了视频,需要自己写一些东西原本在我的印象中video组件是原生组件没办法使用wxml定位到它之上,所以就犯难了,结果看到人家的东西居然可以,所以欧文在仔细的看了一遍组件和api,突然发现原来有支持覆盖到原生组件之上的组件,啊,这一刻真实天助我也啊,下面就一起来看看这个组件到底如何使用,废话不多说还是用一个例子来解说。

微信小程序教程之微信组件cover-view

一、播放视频代码

微信小程序教程之微信组件cover-view

二、看看官方文档介绍

微信小程序教程之微信组件cover-view

微信小程序教程之微信组件cover-view

微信小程序教程之微信组件cover-view

大家可以看看bug和提示到时不少,所以使用的时候要注意。

三、实践

我们在视频中添加自定义的按钮功能。结构如下:

微信小程序教程之微信组件cover-view

事件定义如下:

微信小程序教程之微信组件cover-view

效果如下:

微信小程序教程之微信组件cover-view

四、总结

这里只是一个简单的例子,其实会发现这种类似需求还是很多的,比如需要使用地图来完成某些功能时,这里的视频就不用说了,还有canvas和相机等。目前我这里例子还是简单的,如果大家要求较高,可以看看官方的例子如下:

微信小程序教程之微信组件cover-view

微信小程序教程之微信组件cover-view

微信小程序教程之微信组件cover-view

官方的这个例子就是给视频添加自定义的播放暂停和时间显示。

微信小程序教程之微信组件cover-view


分享到:


相關文章: