uniapp?APP消息推送方案實現(xiàn)全過程
更新時間：2023年01月06日 10:37:13 作者：Jelly115
前段時間開發(fā)app的時候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實現(xiàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
提示：本文實例消息推送使用uniapp官方的unipush推送：
項目場景：該項目是uniapp + uniCloud 項目，APP端的消息推送使用 html+ 與原生實現(xiàn)交互
1.開通推送消息
– uniapp 中的
manifest.json文件中找到App模塊配置，勾選push消息推送模塊
– dcloud開發(fā)者中心后臺開通unipush功能及各種配置項
– 安卓離線消息推送是需要配置各大廠商，IOS離線不需要，但需要推送證書
2.判斷手機(jī)權(quán)限
- 需求：判斷是否開啟通知權(quán)限，跳轉(zhuǎn)對應(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升級為androidx
if (NotificationManagerCompat == null) {
NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");
}
var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
// 未開通‘允許通知'權(quán)限，則彈窗提醒開通，并點擊確認(rèn)后，跳轉(zhuǎn)到系統(tǒng)設(shè)置頁面進(jìn)行設(shè)置
if (!areNotificationsEnabled) {
uni.showModal({
title: '通知權(quán)限開啟提醒',
content: '您還沒有開啟通知權(quán)限，無法接受到消息通知，請前往設(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)限，無法接受到消息通知，請前往設(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的各個界面
3.推送消息到手機(jī)APP：
需求：當(dāng)有消息推送時，推送到手機(jī)狀態(tài)欄中
3.1 獲取客戶端推送標(biāo)識信息 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 消息事件
- 實現(xiàn)手機(jī)狀態(tài)欄推送功能邏輯，在APP.vue中添加推送消息事件監(jiān)聽器 ，監(jiān)聽到有新消息時，使用createMessage API創(chuàng)建消息，添加點擊事件 點擊后進(jìn)行不同操作
- 對于安卓的在線和離線消息以及IOS的離線消息都是走的click監(jiān)聽事件。也就是說可以直接將消息推送到手機(jī)通知欄中，然后點擊消息的時候，可以觸發(fā)應(yīng)用監(jiān)聽的點擊事件，跳轉(zhuǎn)到對應(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){
// 點擊跳轉(zhuǎn)對應(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ù)據(jù)和數(shù)字角標(biāo)
1.在項目中定義請求消息列表的方法，將響應(yīng)的數(shù)據(jù)存儲到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)
- 該功能的實現(xiàn)，主要重點在于數(shù)據(jù)的全局的傳值，以及監(jiān)聽數(shù)據(jù)的變化，實時更新數(shù)據(jù)
- 可以使用vuex或globalData來存儲數(shù)據(jù)
- nuve頁面中可以使用$emit $on 進(jìn)行全局監(jiān)聽
總結(jié)
到此這篇關(guān)于uniapp APP消息推送方案的文章就介紹到這了,更多相關(guān)uniapp APP消息推送方案內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
在日常工作中，我們經(jīng)常需要對數(shù)組對象進(jìn)行排序，尤其是在處理數(shù)據(jù)可視化需求中。本文將介紹一些簡單而又實用的方法，幫助你實現(xiàn)對數(shù)組對象的某幾個 key 進(jìn)行排序2023-05-05
這篇文章主要介紹了萊鳥介紹window.print()方法的相關(guān)資料,需要的朋友可以參考下2016-01-01
Bootstrap Scrollspy源碼學(xué)習(xí)
這篇文章主要介紹了Bootstrap Scrollspy源碼學(xué)習(xí)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
彈出層效果大家在網(wǎng)站上經(jīng)常遇到此功能，下面小編給大家分享一段js代碼制作彈出層效果，代碼簡單易懂，非常不錯，需要的朋友參考下吧2016-12-12
本文主要介紹了node.js的事件機(jī)制，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Javascript動態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
微信小程序之滑動頁面隱藏和顯示組件功能的實現(xiàn)代碼
這篇文章主要介紹了微信小程序之滑動頁面隱藏和顯示組件功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要給大家介紹了關(guān)于如何判斷iOS、Android以及PC端的相關(guān)資料，主要是利用navigator.userAgent來實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
JS時間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼
這篇文章主要介紹了JS時間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
簽名板在網(wǎng)頁應(yīng)用中扮演著重要角色,它們能夠記錄用戶的手寫簽名或者繪圖,下面就跟隨小編一起來學(xué)習(xí)一下如何使用JavaScript實現(xiàn)簽名板功能2024-10-10