近期工作中有一个需求,在小程序的多个页面添加一个可关闭的悬浮窗,这个悬浮窗结构简单,是由一张图片和一个关闭按钮组成,点击图片会跳转到活动页面的web-view。现在的需求是在某个页面关闭这个悬浮窗后,所有页面不再显示,直到下次进入小程序。
需求看起来不是很难,只要在全局状态管理设置一个悬浮窗是否显示的状态即可,但实际开发中还是遇到了一些问题。也是小程序比较坑的一些地方。
页面
onShow(){
if(this.shareBack){
this.shareBack = false
this.$store.dispatch('set_close') // 设置为隐藏状态
}
},
// 监听页面分享
onShareAppMessage: function () {
if(!store.state.show){
this.shareBack = true
}
},
App.vue
onShow() {
console.log('App Show,app展现在前台')
this.$store.dispatch('set_open') // 设置显示状态
},