uniapp小程序ios系统的消息横幅会影响倒计时

1、需求为：进入页面开始倒计时，离开页面倒计时重置。

2、发现问题：IOS系统中会有一个消息横幅的功能，场景为用户停留在页面中时，收到消息横幅，点击消息横幅弹出聊天框，倒计时仍在继续。需要改为点击消息横幅时倒计时暂停，回到页面倒计时继续。

3、监测生命周期：发现onShow会触发两回

• 第一次为页面刚打开
• 第二次为ios消息横幅关闭回到倒计时页面时

  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
    //ios消息横幅关闭时会触发
  }, 
  onHide: function() {
    // 页面从前台变为后台时执行 
    //ios消息横幅打开时会触发
  },
  onUnload: function() {
    // 页面销毁时执行
  },
 

4、解决方案:

• var iosDia = false
• 在onLoad的时候this.iosDia = false
• 在onHide的时候可以判断是ios消息横幅打开，所以this.iosDia = true 
• 在onShow的时候判断iosDia ，this.iosDia = true 的时候继续倒计时
• 最后别忘了要在onUnload中重置 this.iosDia = false

5、代码大略

<template>
	<view> 
			<view class="countdown-block" > 
				本课程还需学习
				<u-count-down  ref="countDown" :time="countDownTime" format="HH:mm:ss" @finish="finishCountDown"></u-count-down>
			</view> 
	</view>
</template>

<script> 
	var classtimer  
	export default {
		data() {
			return { 
				countDownTime: '', 
				iosDia:false, 
			}
		}, 
		onShow() { 
			if(!this.iosDia){
				console.log('现在不是消息横幅');
			}else{
				console.log('现在是消息横幅');
				 this.runBack(this.countDownTime,this.iosType)
				 this.$refs.countDown.start();
			}
		},
		onHide() { 
			this.iosDia = true 
			this.$refs.countDown.pause();  
		},
		onLoad(e) { 
			this.iosDia = false
		},
		onUnload() { 
			this.iosDia = false  
			clearTimeout(classtimer)
		},
		methods: {   
			runBack(cm, type) { 
				this.countDownTime = cm  
			}, 
		}
	}
</script>

<style lang="scss" scoped>
	 
</style>