一、推送作用 推送作用我就不廢話了,能做推送的都知道作用,直接上乾貨。 二、unipush 快速開通 Dcloud 開發者實名認證註冊賬號,綁定對應的 app 信息。 uni-push產品有2個入口: 通過 HBuilderX(3.5.1及其以上版本)進入 打開 HBuilderX,雙擊項目中的 “ ...
一、推送作用
推送作用我就不廢話了,能做推送的都知道作用,直接上乾貨。
二、unipush 快速開通
Dcloud 開發者實名認證註冊賬號,綁定對應的 app 信息。
uni-push產品有2個入口:
-
通過 HBuilderX(3.5.1及其以上版本)進入
打開 HBuilderX,雙擊項目中的 “manifest.json” 文件,選擇“App 模塊配置”,向下找到“Push(消息推送)”,勾選後,點擊 “uniPush” 下麵的配置鏈接。如下圖所示:
-
通過開發者中心進入
使用 HBuilder 賬號登錄 開發者中心 ,登錄後 會進入“uniPush”-“Uni Push 2.0(支持全端推送)”-“應用信息”,點擊“當前應用”選擇要操作的應用。
以上兩種方式均可進入uniPush 應用開通界面。如下圖所示:
按照國家法律要求,所有提供雲服務的公司在用戶使用雲服務時都需要驗證手機號。
用戶初次開通 uni-push 時,需要向個推同步手機號信息(DCloud開發者無需再註冊個推賬戶)。
關聯服務空間說明:uni-push2.0需要開發者開通uniCloud。不管您的業務伺服器是否使用uniCloud,但專業推送伺服器在uniCloud上。生成雲函數,放置雲伺服器上。
三、push 模塊
Push模塊管理推送消息功能,可以實現線上、離線的消息推送,通過 plus.push 可獲取推送消息管理對象。
3.1、獲取設備信息
客戶端標識信息用於業務伺服器下發推送消息時提交給推送伺服器的數據,用於說明下發推送消息的接收者(客戶端)。通常需要客戶端在第一次運行時獲取並提交到業務伺服器綁定。
ClientInfo : 客戶端推送標識信息對象
let clientInfo = plus.push.getClientInfo()let cid = cliendInfo.clientId
cid : 客戶端推送標識,類似於聯繫人的電話號碼。
3.2、推送事件監聽器
void plus.push.addEventListener( event, listener, Boolean );
添加推送消息事件監聽器,當指定推送事件發出時觸發。
參數:
-
type: ( String ) 必選 事件類型
-
支持事件類型:"click"-從系統消息中心點擊消息啟動應用事件;"receive"-應用從推送伺服器接收到推送消息事件。
-
listener: ( PushReceiveCallback ) 必選 事件監聽器回調函數,在接收到推送消息時調用
-
capture: ( Boolean ) 可選 是否捕獲事件,此處可忽略
平臺支持:
-
Android - 2.2+ (支持)
-
iOS - 4.3+ (支持) :
-
在客戶端在運行時收到推送消息觸發receive事件,離線接收到的推送消息全部進入系統消息中心。
plus.push.addEventListener('receive',(message)=>{
//收到透傳消息,執行該事件
})
點擊推送事件示例:
plus.push.addEventListener('click',(message)=>{ // 點擊通知消息的時候執行該事件 // message 推送的所有信息 let payload = message.payload;//自定義內容獲取 try{ //自己的業務邏輯 如頁面跳轉,網路跳轉 }catch(err){ } })
3.3、自定義推送消息欄
void plus.push.createMessage( content, payload, option );
說明:
在本地直接創建推送消息,並添加到系統消息中心。
參數:
-
content: ( String ) 必選 ,消息顯示的內容,在系統通知中心中顯示的文本內容。
-
payload: ( String | Object ) 可選,消息承載的數據,可根據業務邏輯自定義數據格式。
-
options: ( MessageOptions ) 可選 創建消息的額外參數,參考MessageOptions。如圖標、標題等。
有些童鞋雖然自定義了推送消息,但是發現無論怎麼配置參數都不起作用。這是什麼原因呢?
3.4、setAutoNotification
setAutoNotification 設置程式是否將消息顯示在系統消息中心。
void plus.push.setAutoNotification( notify );
說明:
預設情況下程式在接收到推送消息後將會在系統消息中心顯示,通過此方法可關閉預設行為,接收到推送消息後不在系統消息中心顯示,通過addEventListener方法的“receive”事件監聽處理接收到的消息。在這種模式下可通過createMessage方法創建在系統消息中心顯示的消息。
參數:
-
notify: ( Boolean ) 必選 是否自動提示推送消息
-
可取值true或false,true表示自動顯示推送消息,false則不顯示。預設值為true。
3.5、清空所有推送消息
void plus.push.clear();
上面列舉了超級常用的幾個方法,剩餘的大家看官方文檔,方法介紹一看就會。
官方文檔:https://www.html5plus.org/doc/zh_cn/push.html
四、客戶端
4.1、獲取設備信息
uni.getPushClientId 獲取客戶端唯一的推送標識。
註意:這是一個非同步的方法,且僅支持uni-push2.0;
OBJECT 參數說明
參數名 |
類型 |
必填 |
說明 |
success |
Function |
是 |
介面調用的回調函數,詳見返回參數說明 |
fail |
Function |
否 |
介面調用失敗的回調函數 |
complete |
Function |
否 |
介面調用結束的回調函數(調用成功、失敗都會執行) |
success 返回參數說明
參數 |
類型 |
說明 |
cid |
String |
個推客戶端推送id,對應uni-id-device表的push_clientid |
errMsg |
String |
錯誤描述 |
fail 返回參數說明
參數 |
類型 |
說明 |
errMsg |
String |
錯誤描述 |
常見報錯:
getPushClientId:fail register fail: {\"errorCode\":1,\"errorMsg\":\"\"}
請檢查:
-
當前應用是否已開通uni-push2.0 詳情參考
-
客戶端對應平臺是否已啟用uni-push2.0詳情參考
-
HBuilderX3.5.1 App平臺vue3項目首次啟動調用uni.getPushClientId 存在可能獲取不到cid的問題,HBuilderX3.5.2修複了此問題,請升級。
示例代碼:
uni.getPushClientId({ success: (res) => { console.log(res.cid); }, fail(err) { console.log(err) } })
4.2、監聽推送消息
uni.onPushMessage(callback) 啟動監聽推送消息事件。
uni.onPushMessage((res) => { console.log('監聽推送消息', res) }) //收到消息內容 { "type":"click", "data":{ "__UUID__":"androidPushMsgXXXXXX", "title":"tmgh", "appid":"__UNI__DXXXXX", "content":"c✨", "payload":{ "timeMillis":"1686192721365" }, "force_notification":"true" } }
4.3、創建本地通知欄消息
uni.createPushMessage(OBJECT) 創建本地通知欄消息(HBuilderX 3.5.2起支持)
平臺差異說明
App |
H5 |
快應用 |
微信小程式 |
支付寶小程式 |
百度小程式 |
位元組跳動小程式、飛書小程式 |
QQ小程式 |
快手小程式 |
京東小程式 |
√ |
x |
x |
x |
x |
x |
x |
x |
x |
x |
OBJECT 參數說明
參數名 |
類型 |
必填 |
說明 |
title |
string |
否 |
推送消息的標題,在系統消息中心顯示的通知消息標題,預設值為程式的名稱。 |
content |
string |
是 |
消息顯示的內容,在系統通知中心中顯示的文本內容。 |
payload |
string、Object |
否 |
消息承載的數據,可根據業務邏輯自定義數據格式。 |
icon |
string |
否 |
推送消息的圖標 |
sound |
string |
否 |
'system' 'none'推送消息的提示音 |
cover |
boolean |
否 |
是否覆蓋上一次提示的消息 |
delay |
number |
否 |
提示消息延遲顯示的時間 |
when |
Date |
否 |
消息上顯示的提示時間 |
success |
Function |
否 |
介面調用成功的回調函數 |
fail |
Function |
否 |
介面調用失敗的回調函數 |
complete |
Function |
否 |
介面調用結束的回調函數(調用成功、失敗都會執行) |
uni.createPushMessage({ title: '自創標題', content: '自創內容', payload: {}, success: () => { console.log("自創推送成功") }, fail: () => { console.log("自創推送失敗") } })
4.4、關閉消息監聽
uni.offPushMessage(callback) 關閉推送消息監聽事件 示例代碼:
let callback = (res)=>{ console.log(res) } //啟動推送事件監聽 uni.onPushMessage(callback); //關閉推送事件監聽 uni.offPushMessage(callback);
五、調試中 bug
前端同學最愁的就是按照官方文檔寫了,看著沒有問題,但是推送就是不好,出現問題找不到解決辦法愁死人。
無法觸發推送事件,怎麼解決?
plus.push.addEventListener("receive") 和 uni.onPushMessage 無法觸發,需要透傳消息,使用unipush 後臺推送透傳消息可以觸發,但是自己平臺的推送始終不執行,好氣哦!
網上各種百度,解決辦法五花八門的,最後還是在官方文檔里找到解決辦法,建議大家多看開發文檔。
解決辦法:
修改雲函數中 force_notification 配置參數。
服務端執行推送時,傳遞參數force_notification:true,客戶端就會自動創建“通知欄消息”(此時你監聽不到消息內容),當用戶點擊通知欄消息後,APP才能監聽到消息內容。