微信小程序中自定义组件video在ios端会出现从展示页面切到另一个页面上再回到展示页面时会黑屏的情况。
解决思路：在app.js中获取手机类型并定义isApple的全局变量 -> 在video的组件中使用show和hidden生命周期，在页面出现的时候重新加载一次解决。
app.js页面
App({ onLaunch: function () { loginReq.login(); // 自适应导航栏 wx.getSystemInfo({ success: (res) => { this.globalData.height = res.statusBarHeight let clientHeight = res.windowHeight, clientWidth = res.windowWidth, rpxR = 750 / clientWidth; this.globalData.contentPadding = res.statusBarHeight * rpxR + 100, this.globalData.shareTop = res.statusBarHeight * rpxR + 122 if (res.system.indexOf('iOS') > -1) { this.globalData.isApple = true; }else{ this.globalData.isApple = false; } } }) }, globalData: { isApple:false, }})video页面
// component/video/video.jsComponent({ /** * 组件的属性列表 */ properties: { attr: { type: Object, } }, /** * 组件的初始数据 */ data: { //苹果手机需要为true控制页面的展示 show:true }, //ios出现黑屏的情况 pageLifetimes: { show: function () { //判断是苹果手机video重新展示 if (getApp().globalData.isApple){ this.setData({ show: true }) } }, hide: function () { if (getApp().globalData.isApple) { this.setData({ show:false }) } } }, // 组件的方法列表 methods: { end1: function () { this.video.seek(0) }, }})wxml页面 在video标签添加wx:if判断即可
<video wx:if="{{show}}" id='video{{attr.moduleId}}' object-fit="cover" poster="{{attr.attributeJson.screenShotUrl}}" bindended='end1' autoplay="{{attr.attributeJson.autoPlayBl}}" src="{{attr.attributeJson.videoUrl}}" vslide-gesture-in-fullscreen controls ></video>
