背景

有需求如下

打开某页面后在背景中自动播放视频，在页面不变，切出小程序后，再切回小程序，页面重新自动播放视频

在编写之后，发现微信自身的配置并不能支持在小程序不销毁的情况下，在重新打开页面的时候重新播放视频

解决

  1. 考虑到是否可以利用页面周期事件onHide与onShow，配合调用视频播放api进行播放

  2. 编写onHide与onShow事件函数如下，假设videoContext是在onReady函数中已经获取好的视频组件句柄

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

onHide() {
  this.pagehide = true
},
onShow() {
  wx.hideHomeButton()
  if(this.pagehide){
    this.videoContext.play()
    this.pagehide = false
  }
},

  1. 运行尝试，并未达到预期效果

  2. 恍惚间想起之前项目中碰到的微信小程序的坑，可能在当时重新打开微信小程序的一瞬间，句柄不能正常使用，尝试修改代码如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

onHide() {
  this.pagehide = true
},
onShow() {
  wx.hideHomeButton()
  if(this.pagehide){
    this.$nextTick(()=>{
			this.videoContext.play()
		})
    this.pagehide = false
  }
},
  1. 运行尝试，这次发现有几率能够在重新打开页面时，恍惚间想起之前项目中碰到的微信小程序的解决方式，尝试修改代码如下
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

onHide() {
  this.pagehide = true
},
onShow() {
  wx.hideHomeButton()
  if(this.pagehide){
    setTimeout(()=>{this.videoContext.play()},1)
    this.pagehide = false
  }
},
  1. 运行尝试，成功。

注：nextTick的实现机制与setTimeout的机制不一样，在微信小程序中，如果遇到类似的问题，都可以把nextTick换成setTimeout(fun(),1)试一试