uniapp?APP消息推送方案實(shí)現(xiàn)全過程

更新時(shí)間：2023年01月06日 10:37:13 作者：Jelly115

前段時(shí)間開發(fā)app的時(shí)候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.開通推送消息

– uniapp 中的manifest.json文件中找到App模塊配置，勾選push消息推送模塊
– dcloud開發(fā)者中心后臺(tái)開通unipush功能及各種配置項(xiàng)
– 安卓離線消息推送是需要配置各大廠商，IOS離線不需要，但需要推送證書

2.判斷手機(jī)權(quán)限

- 需求：判斷是否開啟通知權(quán)限，跳轉(zhuǎn)對(duì)應(yīng)設(shè)置頁

  /**
     * 設(shè)置手機(jī)通知權(quán)限
     */
    setPermissionsInform() {
        // #ifdef APP-PLUS  
        if (plus.os.name == 'Android') { // 判斷是Android
            var main = plus.android.runtimeMainActivity();
            var pkName = main.getPackageName();
            var uid = main.getApplicationInfo().plusGetAttribute("uid");
            var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");
            //android.support.v4升級(jí)為androidx
            if (NotificationManagerCompat == null) {
                NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");
            }
            var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
            // 未開通‘允許通知'權(quán)限，則彈窗提醒開通，并點(diǎn)擊確認(rèn)后，跳轉(zhuǎn)到系統(tǒng)設(shè)置頁面進(jìn)行設(shè)置  
            if (!areNotificationsEnabled) {
                uni.showModal({
                    title: '通知權(quán)限開啟提醒',
                    content: '您還沒有開啟通知權(quán)限，無法接受到消息通知，請(qǐng)前往設(shè)置！',
                    showCancel: false,
                    confirmText: '去設(shè)置',
                    success: function(res) {
                        if (res.confirm) {
                            var Intent = plus.android.importClass('android.content.Intent');
                            var Build = plus.android.importClass("android.os.Build");
                            //android 8.0引導(dǎo)  
                            if (Build.VERSION.SDK_INT >= 26) {
                                var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
                                intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
                            } else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0  
                                var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
                                intent.putExtra("app_package", pkName);
                                intent.putExtra("app_uid", uid);
                            } else { //(<21)其他--跳轉(zhuǎn)到該應(yīng)用管理的詳情頁  
                                intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                                var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
                                intent.setData(uri);
                            }
                            // 跳轉(zhuǎn)到該應(yīng)用的系統(tǒng)通知設(shè)置頁  
                            main.startActivity(intent);
                        }
                    }
                });
            }
        } else if (plus.os.name == 'iOS') { // 判斷是ISO
            var isOn = undefined;
            var types = 0;
            var app = plus.ios.invoke('UIApplication', 'sharedApplication');
            var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
            if (settings) {
                types = settings.plusGetAttribute('types');
                plus.ios.deleteObject(settings);
            } else {
                types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
            }
            plus.ios.deleteObject(app);
            isOn = (0 != types);
            if (isOn == false) {
                uni.showModal({
                    title: '通知權(quán)限開啟提醒',
                    content: '您還沒有開啟通知權(quán)限，無法接受到消息通知，請(qǐng)前往設(shè)置！',
                    showCancel: false,
                    confirmText: '去設(shè)置',
                    success: function(res) {
                        if (res.confirm) {
                            var app = plus.ios.invoke('UIApplication', 'sharedApplication');
                            var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
                            plus.ios.invoke(app, 'openURL:', setting);
                            plus.ios.deleteObject(setting);
                            plus.ios.deleteObject(app);
                        }
                    }
                });
            }
        }
        // #endif  
    } ,
    /**

可以將該方法放在APP.vue文件的onShow生命周期或是消息中心的onShow中去判斷用戶是否開啟通知權(quán)限

-- Android跳轉(zhuǎn)系統(tǒng)設(shè)置Settings的各個(gè)界面

3.推送消息到手機(jī)APP：

需求：當(dāng)有消息推送時(shí)，推送到手機(jī)狀態(tài)欄中

3.1 獲取客戶端推送標(biāo)識(shí)信息 cid

		// 必須要獲取到cid后才能接收推送信息
        const cid = plus.push.getClientInfo()
        console.log(cid);

3.2 創(chuàng)建推送消息

		//plus.push.createMessage( content, payload, option );
		//在本地直接創(chuàng)建推送消息，并添加到系統(tǒng)消息中心。
		content: ( String ) 必選
		消息顯示的內(nèi)容，在系統(tǒng)通知中心中顯示的文本內(nèi)容。
		
		payload: ( String | Object ) 可選
		消息承載的數(shù)據(jù)，可根據(jù)業(yè)務(wù)邏輯自定義數(shù)據(jù)格式。
		
		options: ( MessageOptions ) 可選
		創(chuàng)建消息的額外參數(shù)，參考
		https://www.html5plus.org/doc/zh_cn/push.html#plus.push.MessageOptions
		
		plus.push.createMessage('我是你爸爸！'); // 創(chuàng)建本地推送
		plus.runtime.setBadgeNumber(1)  // 設(shè)置角標(biāo)

3.3 消息事件

- 實(shí)現(xiàn)手機(jī)狀態(tài)欄推送功能邏輯，在APP.vue中添加推送消息事件監(jiān)聽器，監(jiān)聽到有新消息時(shí)，使用createMessage API創(chuàng)建消息，添加點(diǎn)擊事件點(diǎn)擊后進(jìn)行不同操作

對(duì)于安卓的在線和離線消息以及IOS的離線消息都是走的click監(jiān)聽事件。也就是說可以直接將消息推送到手機(jī)通知欄中，然后點(diǎn)擊消息的時(shí)候，可以觸發(fā)應(yīng)用監(jiān)聽的點(diǎn)擊事件，跳轉(zhuǎn)到對(duì)應(yīng)頁面。
receive事件，可以監(jiān)聽到后端推送過來的消息，觸發(fā)相應(yīng)的回調(diào)，使用createMessage在本地創(chuàng)建消息

		// 添加推送消息事件監(jiān)聽器 click
		plus.push.addEventListener("click",(msg)=>{
		        console.log('msg............',msg);
		        if(msg.payload){
		        // 點(diǎn)擊跳轉(zhuǎn)對(duì)應(yīng)頁面
		            uni.navigateTo({
		                url:msg.payload
		            })
		        }
		},false)
		
		// 添加推送消息事件監(jiān)聽器 receive
		plus.push.addEventListener("receive",(msg)=>{
		    if("LocalMSG" == msg.payload){
		    }else{
		        if(msg.type=='receive'){
		            var options = {cover:false,title:msg.title};
		            // 創(chuàng)建本地推送
		            plus.push.createMessage(msg.content, msg.payload, options ); 
		         }  
		    }
		},false)

4. 消息頁面的數(shù)據(jù)及數(shù)字角標(biāo)

- 需求：當(dāng)有消息推送時(shí)，要更新消息中心頁面的數(shù)據(jù)和數(shù)字角標(biāo)

1.在項(xiàng)目中定義請(qǐng)求消息列表的方法，將響應(yīng)的數(shù)據(jù)存儲(chǔ)到vuex中，供消息中心頁面使用

// 消息頁面的數(shù)據(jù)
	async getMsgData(){
	    let res = await this.$callFunction("userContent/getMsgType")
	    this.$u.vuex("msgData", res.result.data);
	    let msgCount = 0 // 數(shù)字角標(biāo)
	    res.result.data.map((item)=>{
	        if(item._id!=5){
	            msgCount+=item.no_read_total
	        }
	    })
	    // 給tabbar的角標(biāo)賦值
	    let tabbar_data = JSON.parse(JSON.stringify(this.TabbarList))
	    tabbar_data[3].count = msgCount
	    this.$u.vuex("TabbarList", tabbar_data);

2.監(jiān)聽消息的推送，如果接收到消息就更新消息列表數(shù)據(jù)和角標(biāo)數(shù)字

	// --------監(jiān)聽推送的狀態(tài)----------
	plus.push.addEventListener("receive", (msg) => {
	    console.log(getApp().globalData.followCount);
	    if(msg.payload.data.msg_type==501){
	        uni.$emit('followUpdate','update');
	    }
	    let {content, payload, options} = msgCreate(msg)
	
	    plus.push.createMessage(content, payload, options);
	    this.getMsgData()
	}, false)

該功能的實(shí)現(xiàn)，主要重點(diǎn)在于數(shù)據(jù)的全局的傳值，以及監(jiān)聽數(shù)據(jù)的變化，實(shí)時(shí)更新數(shù)據(jù)
可以使用vuex或globalData來存儲(chǔ)數(shù)據(jù)
nuve頁面中可以使用$emit $on 進(jìn)行全局監(jiān)聽