订阅消息如何在授权之后就不再发出提醒,即使用户没有勾选“总是保持以上选择,不再询问”的两种方法

·  阅读 3299

问题描述:当用户通过点击事件,触发订阅消息授权弹框的时候,用户点击了“允许”,弹框关闭,但是以后每一次再去点击这个按钮的时候,订阅消息授权的弹框依旧会显示,我明明已经授过权了,弹框还是会弹起,这很显然就违背了正常逻辑。

功能需求:

1. 在我点击“允许”,也就是授权过后,在去触发,弹框不显示;
2. 即使我没有勾选“总是保持以上选择,不再询问”,弹框也不再显示

官方的的态度:将“总是保持以上选择,不再询问”勾选并点击允许,那么以后都默认同意订阅这条消息,不再提醒。这就这样确实是可以满足上面的需求,但是如果用户没有勾选或者不知道去勾选的情况下如何取解决这个问题呢?查阅了很多资料,好像都没有明确的解决办法,既然查不到相关的方法,那我就自己写一个方法。

方法一:在点击允许的时候,获取用户当前的点击状态,通过uni.setStorageSync方法,将用户点击状态存在本地Storage中,当用户再次点击的时候,通过uni.getStorageSync方法去将点击状态取出来,然后去判断,当用户点击的是允许,就不在弹出,执行之后的操作。

 sendMessage() {
    if(uni.getStorageSync('acceptSubscribeMessage')){
         // 将要进行的逻辑代码
    }else{
        uni.requestSubscribeMessage({
	    tmplIds: ['模板ID'],
	    success: res => {
	        console.log(res);
	        if(res['模板ID']=='accept'){
		    uni.setStorageSync('acceptSubscribeMessage', true)
		    // 将要进行的逻辑代码
		}
	    },
	    fail: res => {
	        uni.removeStorageSync('acceptSubscribeMessage')
	        // 将要进行的逻辑代码
		console.log(res);
	    },
	});
    }
}
复制代码

存在本地的位置及效果如图:

注意:在调试的时候,如果想把本地缓存清掉,除了用代码的方法,更简单的方法是,双击上图中的“acceptSubscribeMessage”,在可编辑状态下,即可将用户点击状态清空。

方法二:在点击允许的时候,获取用户当前的点击状态,通过vuex辅助函数mapMutations将用户点击状态存在本地Storage中,当用户再次点击的时候,通过vuex辅助函数mapState去将仓库保存的状态取出来,当用户点击的是允许,就不在弹出,执行之后的操作。

具体步骤:

  • 第一步:在当前页面引入vuex辅助函数mapMutations和mapState
 import { mapState, mapMutations } from 'vuex'
复制代码
  • 第二步:在methods方法中,通过mapMutations将用户点击状态存在vuex中
 methods: {
    ...mapMutations(['setSubscribeMessage'])
 }
复制代码
  • 第三步:在计算属性computed,通过mapState将用户保存在vuex中的点击状态,取出来
export default {
    data() {
        return {
	}
    }
    computed: mapState(['subscribeMessage'])
}
复制代码
  • 第四步:逻辑代码
 sendMessage() {
    if(this.subscribeMessage){
         // 将要进行的逻辑代码
    }else{
        uni.requestSubscribeMessage({
	    tmplIds: ['模板ID'],
	    success: res => {
	        console.log(res);
	        if(res['模板ID']=='accept'){
	            uni.showToast({
		        title: '订阅成功',
			icon: 'success',
			duration: 1000
		})
		    // 将用户点击状态存在vuex
		    this.setSubscribeMessage(true)
		    // 将要进行的逻辑代码
		} else {
		    uni.showToast({
			title: '取消订阅',
			icon: 'none',
		        duration: 1000
		    })
		    // 将要进行的逻辑代码
		}
	    },
	    fail: res => {
	        this.$showToast(res)
	        // 将要进行的逻辑代码
		console.log(res);
	    },
	});
    }
}
复制代码
  • 第四步:仓库代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        subscribeMessage: false
    },
    mutations: {
        // 消息推送模板状态
        setSubscribeMessage(state,status){
	    state.subscribeMessage=status;
	}
    }
})
export default store
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改