聊天室(二)__ unipush 推播實現詳細教學

2023-07-04 12:01:07

一、推播作用

推播作用我就不廢話了,能做推播的都知道作用,直接上乾貨。

 

二、unipush 快速開通

 

Dcloud 開發者實名認證註冊賬號,繫結對應的 app 資訊。

uni-push產品有2個入口:

  1. 通過 HBuilderX(3.5.1及其以上版本)進入

開啟 HBuilderX,雙擊專案中的 「manifest.json」 檔案,選擇「App 模組設定」,向下找到「Push(訊息推播)」,勾選後,點選 「uniPush」 下面的設定連結。如下圖所示:

  1. 通過開發者中心進入

使用 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\":\"\"}
請檢查:

  1. 當前應用是否已開通uni-push2.0 詳情參考

  2. 使用者端對應平臺是否已啟用uni-push2.0詳情參考

  3. 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

推播訊息的標題,在系統訊息中心顯示的通知訊息標題,預設值為程式的名稱。
Android - ALL (支援)
iOS - 5.0+ (不支援): 不支援設定訊息的標題,固定為程式的名稱。

content

string

訊息顯示的內容,在系統通知中心中顯示的文字內容。

payload

string、Object

訊息承載的資料,可根據業務邏輯自定義資料格式。

icon

string

推播訊息的圖示
本地圖片地址,相對路徑 - 相對於當前頁面的host位置,如"a.jpg",注意當前頁面為網路地址則不支援;絕對路徑 - 系統絕對路徑,如Android平臺"/sdcard/logo.png",此類路徑通常通過其它5+ API獲取的;擴充套件相對路徑URL(RelativeURL) - 以"_"開頭的相對路徑,如"_www/a.jpg";本地路徑URL - 以「file://」開頭,後面跟隨系統絕對路徑。
Android - 2.3+ (支援)
iOS - ALL (不支援): 不支援自定義圖片,固定使用應用圖示。

sound

string

'system' 'none'推播訊息的提示音
顯示訊息時的播放的提示音,可取值:「system」-表示使用系統通知提示音;「none」-表示不使用提示音;預設值為「system」。
Android - 2.3+ (支援)
iOS - 5.1+ (支援): 當程式在前臺執行時,提示音不生效。注:通常應該設定延遲時間,當程式切換到後臺才建立本地推播訊息時生效。

cover

boolean

是否覆蓋上一次提示的訊息
可取值true或false,true為覆蓋,false不覆蓋,預設為permission中設定的cover值
Android - ALL (支援)
iOS - 5.0+ (不支援): 不支援覆蓋訊息,只能建立新的訊息。

delay

number

提示訊息延遲顯示的時間
當裝置接收到推播訊息後,可不立即顯示,而是延遲一段時間顯示,延遲時間單位為s,預設為0s,立即顯示。

when

Date

訊息上顯示的提示時間
預設為當前時間,如果延遲顯示則使用延時後顯示訊息的時間。
Android - ALL (支援)
iOS - 5.0+ (不支援): 不支援設定訊息的顯示時間,由系統自動管理訊息的建立時間。

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才能監聽到訊息內容。