您的当前位置:首页正文

Uni-app开发小程序踩坑笔记 可关闭悬浮窗

2024-11-07 来源:个人技术集锦

场景

近期工作中有一个需求,在小程序的多个页面添加一个可关闭的悬浮窗,这个悬浮窗结构简单,是由一张图片和一个关闭按钮组成,点击图片会跳转到活动页面的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') // 设置显示状态
},
显示全文