前言
最近公司有了微信小程序需求,由于没有前端,被抓来做壮丁,原本是做java后端的,所以有何不妥知错敬请谅解,闲来无事,来记录下自己写的前端代码.
实现功能
本次小程序的需求主要如下:
1.视频的列表展示,列表中可播放,也可全屏播放
2.播放第二个视频时,自动停止第一个视频
效果图
效果图.png
主要代码
项目结构.png
Wxml代码如下:
<!--index.wxml-->
<view class="container">
<!--首页-->
<scroll-view class='nav-page'>
<view class="item-box " wx:for="{{dataList}}" wx:key="item">
<!-- 标题层 -->
<view class="video-title-box">
<view class='video-title'>{{item.title}}</view>
</view>
<!-- 视频图片层 -->
<view data-id="{{index}}" class="video-image-box" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">
<view class="video-cover-box">
<image class="video-image" src="{{item.cover}}" mode="aspectFit">
</image>
</view>
<!-- 视频按钮 -->
<image class="video-image-play" src="/image/icon_short.png" mode="scaleToFill"></image>
</view>
<!-- 视频播放层 -->
<video src="{{item.content}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>
</view>
</scroll-view>
</view>
Js代码如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
videoPlay: null,
dataList: [],
},
onLoad: function () {
this.getData();
wx.hideShareMenu();
},
// 点击cover播放，其它视频结束
videoPlay: function (e) {
var _index = e.currentTarget.dataset.id
this.setData({
_index: _index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext(_index+"")
videoContextPrev.stop();
setTimeout(function () {
//将点击视频进行播放
var videoContext = wx.createVideoContext(_index + "")
videoContext.play();
}, 500)
},
// 模拟数据加载
getData: function () {
this.setData({
// 此数据过于长,为了美观再次用省略号代替 ,后面源码会提供.
dataList: [...]
});
}
})
Wcss代码在此就不展示了,设计到逻辑处的代码也都添加了注释,在此就不再解释了.
源码
https://gitee.com/OrgXxxx/WechartMiniProgramVideoPlayList/tree/master
遇到的第一个坑
在最开始的时候，用的是微信提供的Scroll-view嵌套video组件，结果在测试的时候，IOS点击全屏播放时，出现如下左侧所示的分屏，返回列表后第二次点击全屏又正常了。但是在Android上测试有没有这种问题。
image.png
经过千辛万苦查找翻看文档，终于在微信scroll-view文档的底部发现了如下提示，于是把scroll-view 改成了上面代码中的view，就解决了。果然看文档不能囫囵吞枣啊！
Bug & Tip
tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
遇到的第二个坑
一些图片在IOS真机上显示不出，调试模式上图片的尺寸、地址全都正常，电脑直接访问图片地址都没问题，Android也是没出现这个问题。简直天坑啊！
百度、谷歌了一番后，发现了，出现问题的图片格式为WebP（WebP格式，谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。）IOS不兼容。
解决方案倒是挺简单，直接把图片格式转换为jpg就行了。（本人懒，于是正则替换地址处理的）
