我司微店+伟德国际电脑版充值最近有需要在商品详情里面添加视频的功能,故使用了微信官方组件,在使用过程中遇到了一些问题,有些问题特别坑,我觉得有必要总结一下,分享出来供有这方面需求的同行参考,本篇文章我主要讲解最终 ...
我司微店+伟德国际电脑版充值最近有需要在商品详情里面添加视频的功能,故使用了微信官方组件,在使用过程中遇到了一些问题,有些问题特别坑,我觉得有必要总结一下,分享出来供有这方面需求的同行参考,本篇文章我主要讲解最终我使用的兼容性比较好的方案,希望能帮助有需要的童鞋。 我们要实现的布局
按照常规的写法,我们的代码结构可能如下 <view>
<!-- 视频 -->
<video></video>
<!-- 覆盖视频的图片 -->
<view>
<image/>
<!-- 播放按钮 -->
<view></view>
</view>
<!-- 底部视频和图片切换按钮 -->
<view></view>
</view>
复制代码 然后通过图片 幸好,微信官方提供了 <view>
<video>
<cover-view>
<!-- 覆盖图片 -->
<cover-image></cover-image>
<!-- 播放按钮 -->
<cover-image></cover-image>
</cover-view>
</video>
</view>
复制代码 播放功能单个视频,点击播放有关video组件播放的几个配置,主要有
另外,微信还提功能了 故有几种方案: 第一种方案,拿到视频地址后,通过 <!--方案一-->
<!--js-->
this.setData({
src:url,
autoplay:true
})
<!--html-->
<video src="{{src}}" autoplay="{{autoplay}}"></video>
复制代码 第二种方案,src地址通过data传入,之后无需变化,但存在的问题就是视频播放的时机,因为视频地址加载是需要时间的,如果我们在页面一渲染后就点击播放按钮,此时如果视频还未加载完,直接调用 <!--方案一-->
<!--js-->
data:{
autoplay:false
}
const { videoContext } = this.data;
<!--视频播放,关键代码-->
this.setData({
autoplay:true
},()=>{
videoContext.play()
})
<!--html-->
<video src="src" autoplay="{{autoplay}}"></video>
复制代码 单个视频,wifi下自动播放微信提供判断网络环境的api,通过api判断,如果是wifi下,就主动调用 wx.getNetworkType({
success(res) {
const networkType = res.networkType;
if (networkType === 'wifi') {
that.videoPlay();
}
},
});
复制代码 视频不在可视范围,停止播放微信提供 wx.createIntersectionObserver(that)
.relativeToViewport()
.observe('.video--wrap', res => {
if (res && res.intersectionRatio > 0) {
that.videoPlay();
} else {
that.videoPause();
}
});
复制代码 视频列表一开始我是用过 伟德国际电脑版充值左滑右滑实现我们需求上还有左右滑切换图片和视频显示的功能,这需要通过监听 touchstart: function(e) {
this.setData({
startX: e.changedTouches[0] && e.changedTouches[0].clientX,
startY: e.changedTouches[0] && e.changedTouches[0].clientY,
});
},
touchmove: function(e) {
var that = this,
startX = that.data.startX, //开始X坐标
startY = that.data.startY, //开始Y坐标
touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
},
//根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
GetSlideDrection: function(startX, startY, endX, endY) {
var dy = endY - startY;
var dx = endX - startX;
var result = 0;
//如果滑动距离太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = this.GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 4;
} else if (angle >= 45 && angle < 135) {
result = 1;
} else if (angle >= -135 && angle < -45) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
},
GetSlideAngle: function(dx, dy) {
return (Math.atan2(dy, dx) * 180) / Math.PI;
},
复制代码 以上方案都可以通过伟德国际电脑版充值代码片段进行查看 调试开发者工具和真机表现差异很大,故在开发者工具上开发完之后,需要多在不同真机上进行调试。 总结实际我在开发中碰到的问题还挺多,伟德国际电脑版充值video组件坑还是挺多的,我没有一一描述出来,如果你有碰到其它问题,欢迎留言评论,如果我曾经碰到过,或许能够提供一些意见,我写这篇文章的目的就是让更多的伟德国际电脑版充值开发者尽量少踩坑,如果刚好能够帮助到你,感谢点赞支持! |