uniapp 消息推送 前端

一:在manifest.json app模塊配置勾選Push推送

image.png

二:在uniapp開(kāi)發(fā)者后臺(tái)配置應(yīng)用信息

注意點(diǎn):1.應(yīng)用名稱需要跟uniapp中配置的名稱一致 2.android包名:保持和云打包一致。 3.android應(yīng)用簽名:這個(gè)簽名需要用keytool工具查看,具體的可以問(wèn)后端同事,他們都知道這個(gè)…… 4.ios bundleId :保持和云打包一致

image.png

三:配置完成在應(yīng)用配置中會(huì)自動(dòng)生成AppID等信息,把這些信息發(fā)給后端

image.png

四.配置ios證書(shū)(分為開(kāi)發(fā)、通用,具體證書(shū)配置流程參考https://docs.getui.com/getui/mobile/ios/apns/

注意點(diǎn):應(yīng)用配置中有ios證書(shū)配置,這里的證書(shū)是推送證書(shū)和發(fā)布證書(shū)不是同一個(gè)

image.png

五.測(cè)試ios離線消息

1.取deviceToken,根據(jù)cid查詢,最好是正式環(huán)境下的token


image.png

2.點(diǎn)擊測(cè)試一下,出現(xiàn)彈框


image.png

3.把復(fù)制的token粘貼點(diǎn)擊確定,推送成功消息彈出后表示ios離線在線已可以連通
image.png

六.產(chǎn)商推送設(shè)置

注意點(diǎn):安卓離線消息推送是需要配置各大廠商,只有oppo需要上線。IOS離線不需要設(shè)置產(chǎn)商,重點(diǎn)在推送證書(shū)(蘋(píng)果離線使用APNs,安卓使用廠商)
需要打開(kāi)各個(gè)開(kāi)發(fā)平臺(tái)的推送功能

image.png

四:使用在App.vue里面

注意點(diǎn): onLaunch是應(yīng)用的生命周期函數(shù),注意Uni的生命周期函數(shù)與vue的生命周期函數(shù)的不同,uni的生命周期函數(shù)是應(yīng)用生命周期函數(shù),vue的生命周期函數(shù)是頁(yè)面生命周期函數(shù),uni的生命周期函數(shù)出現(xiàn)的要比vue的早,所以在onLaunch中調(diào)用不到methods中的方法

onLaunch: function() {
// #ifdef APP-PLUS
            // 獲取系統(tǒng)信息
            let system = uni.getSystemInfoSync()
            let pinf = plus.push.getClientInfo();
            let cid = pinf && pinf.clientid || ''; //客戶端標(biāo)識(shí)
            // 同步獲取cid
            plus.push.getClientInfoAsync((info) => {
                cid = info.clientid;
                console.log(cid)
            })
            plus.runtime.getProperty(plus.runtime.appid, async (wgtInfo)=> {
                // 綁定
                const res = await postBindClient({
                    cid,
                    brand: system.brand,
                    model: system.model,
                    system: system.system,
                    platform: system.platform,
                    versionNo: wgtInfo.version //獲取版本號(hào)
                })
                console.log('version', wgtInfo.version)
            });
  // #ifdef APP-PLUS
  // 點(diǎn)擊通知消息時(shí) 執(zhí)行此事件 發(fā)送請(qǐng)求 跳轉(zhuǎn)頁(yè)面等
 plus.push.addEventListener('click', msg => {
      uni.switchTab({
        //跳轉(zhuǎn)到消息頁(yè)面
            url:'/pages/tabbar/message/index'
      });
  },false);
//監(jiān)聽(tīng)在線消息事件 收到透?jìng)飨r(shí),執(zhí)行該事件 
plus.push.addEventListener('receive',msg => {
    // 如果是在線收到推送消息,需要?jiǎng)?chuàng)建一條推送  cover: false 是否覆蓋上一條推送消息
    let options = {
         cover: false,
         title: msg.payload.title
    };
    let url = '/pages/tabbar/message/index';
    // ios 透?jìng)?    if (system.platform == 'ios') {
       if (!msg.payload) {
       plus.push.createMessage("您的設(shè)備發(fā)生異常請(qǐng)及時(shí)查看", url, {
        cover: false,
        title: '異常消息'
       }); //創(chuàng)建一條推送消息
       return
    }
    if (msg.aps == null && msg.type == "receive") {
      plus.push.createMessage(msg.payload.content, url, options); //創(chuàng)建一條推送消息
    }
  }
    // android透?jìng)?    if (system.platform == 'android') {
      plus.push.createMessage(msg.payload.content, url, options); //創(chuàng)建一條推送消息
    }
  },false);
  // #endif
}

plus.push.createMessage
第一個(gè)參數(shù):content,必填項(xiàng),也即是消息的內(nèi)容部分
第二個(gè)參數(shù):payload,選填項(xiàng),因?yàn)轫?yè)面的跳轉(zhuǎn)是獲取的payload中的值,因此我需要這個(gè)參數(shù)
第三個(gè)參數(shù):options,選填項(xiàng),options是其他參數(shù),cover:false是否覆蓋上次通知,默認(rèn)false,title標(biāo)題,也即是消息除了需要展示內(nèi)容之外,還需要展示一下標(biāo)題部分。
如果不加外面的msg.type的判斷,則會(huì)出現(xiàn)一直創(chuàng)建消息的效果,接收到消息(receive),然后創(chuàng)建成功(plus.push.createMessage)后,消息的type類(lèi)型會(huì)改變,則可以通過(guò)type類(lèi)型的改變來(lái)解決一直彈窗創(chuàng)建消息的問(wèn)題。

華為離線推送類(lèi)型為intent,選擇其他類(lèi)型會(huì)使離線收不到

appuploade 生成ios推送證書(shū)

1、已經(jīng)在蘋(píng)果開(kāi)發(fā)者后臺(tái)創(chuàng)建過(guò)項(xiàng)目的直接選中項(xiàng)目添加推送服務(wù)就好(沒(méi)有創(chuàng)建的先創(chuàng)建)
2、打開(kāi)appuploade,用蘋(píng)果開(kāi)發(fā)者賬號(hào)登錄
3、選擇證書(shū)選項(xiàng)
4、證書(shū)類(lèi)型選擇 Push Notification service SLL(Sandbox & Producyion)—iOS生產(chǎn)環(huán)境推送證書(shū)(下面一個(gè)是正式環(huán)境),其他根據(jù)自己填寫(xiě)
5、點(diǎn)擊下載證書(shū)即可,再把證書(shū)上傳到uniapp后臺(tái)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁(yè)面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    __Mr_Xie__閱讀 1,542評(píng)論 0 1
  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁(yè)面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    綠茵場(chǎng)上的碼者閱讀 47,075評(píng)論 1 21
  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁(yè)面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    flyjar閱讀 790評(píng)論 0 2
  • uni-app的基本使用 課程介紹: 基礎(chǔ)部分: 環(huán)境搭建 頁(yè)面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件...
    Neo_duan閱讀 2,223評(píng)論 1 1
  • uni-app的基本使用 基礎(chǔ)部分: +環(huán)境搭建 +頁(yè)面外觀配置 +數(shù)據(jù)綁定 +uni-app的生命周期 +組件的...
    你的胡霸霸閱讀 883評(píng)論 0 2

友情鏈接更多精彩內(nèi)容