微信小程序云开发视频轮播图+封面+解决多个视频播放不暂停bug

01_Carrortwhisker

已于 2022-07-12 09:40:41 修改

阅读量2k

点赞数

分类专栏：小程序文章标签：小程序云开发 javascript 前端

于 2021-06-07 14:49:08 首次发布

本文链接：https://blog.csdn.net/a982160311/article/details/117654212

版权

小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

因为项目比较小，所就一开始就选择了云开发这个开发模式。云开发这个东西我的理解还是比较浅，暂时只能做到读取写入视频图片这样的功能。

1.wxml 轮播图实现
swiper轮播图的属性这里就不赘述了，根据自己需求去修改就好。

微信小程序官方swiper文档
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

完整代码：

<swiper indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots interval="2000" duration="1000"
        previous-margin="30px" next-margin="30px" circular style='height: 420rpx'>
    <view wx:for='{{items}}' wx:key>
        <swiper-item>
            <view class='videoView'>
                <video src='{{item.video}}' class='video' id="myVideo{{index}}" bindtap='cover'>
                </video>
                <image class='cover' id="myVideo{{index}}" src='{{item.cover}}' wx:if='{{show!="myVideo"+index}}' bindtap='cover'
                       ></image>
                <view class='time' wx:if='{{show!=id}}'>{{item.time}}</view>
            </view>
        </swiper-item>
    </view>
</swiper>

小程序和vue还是有很多相同之处的，这里的wx:for循环在云开发后台获取的数据。wx:key不影响运行但会警告，不设key也没问题。

    <view wx:for='{{items}}' wx:key>

接下来就是video组件循环items中的video和items中的cover，也就是我们的视频地址和封面。

<video src='{{item.video}}' class='video' id="myVideo{{index}}" bindtap='cover'>
</video>
<image class='cover' id="myVideo{{index}}" src='{{item.cover}}' wx:if='{{show!="myVideo"+index}}' bindtap='cover'></image>

id用来记录当前视频的id，后面解决多个视频播放前一个视频不停止会用到。

2.js

    onLoad(options) {
        //分享功能
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        })
        var that = this
        db.collection('video').where({
            publish: _.eq(true)
        }).get({
            success(res) {
                that.setData({
                    items: res.data.reverse() 
                })
            }
        })
    },

首先初始化云开发数据库

const db = wx.cloud.database()
const _ = db.command

还需要全局配置一下，没有配置的朋友可以先去配置一下，这里就不赘述了。

在云存储数据库获取到数据。

db.collection('要查询的数据库').where({
		publish:_eq(true)  //这里设置查询条件，根据需求修改吧
})

成功后，将数据反转，使最新的数据在最上面，这个主要是我在做留言板的时候一个需求，视频轮播其实不一定有这个需求。

	.get({
            success(res) {
                that.setData({
                    items: res.data.reverse() 
                })
            }
        })
    },

至于上面的代码是为了当前页面可以被分享，有需求的朋友可以加上。

data里一个存储视频数据，一个记录正在播放的视频下标。

    data: {
        items: [],  // 视频数据的数组
        show: ''  // 正在播放的视频下标
    }

封面

    cover (e) {
        // 本视频id
        var id = e.currentTarget.id;
        // 上个一视频id
        var prev_id = this.data.show;
        // 停止山一个视频播放
        if (prev_id != id) {
            wx.createVideoContext(prev_id).pause();
            this.setData({
                show: id
            })
            // 延迟500ms，再播放本视频
            setTimeout(function () {
                wx.createVideoContext(id).play();
            }, 500)
        }
    }