2023-08-05 如何基于 uni-push2.0 实现全平台推送

参考链接:

uni-push2 统一推送:https://uniapp.dcloud.net.cn/unipush-v2.html

前言

最近研究了下 uni-push2.0,发现可以实现 App、Web、小程序等多个平台的推送,特此记录。

一、什么是 uni-push2.0

uni-push是 DCloud 推出的、全端的、云端一体的统一推送服务。

  1. 客户端方面,uni-push2支持 App、web、小程序。
  • App 端,内置了苹果、华为、小米、OPPO、VIVO、魅族、谷歌 FCM 等手机厂商的系统推送和个推第三方推送
  • 小程序端,内置了 socket 在线推送。如需模板消息/订阅消息,另见uni-subscribemsg
  • web 端,内置了 socket 在线推送 (uni-push1 仅支持 app,且 app 必须包含个推原生 sdk。uni-push2 在 app 端如不需要厂商推送,只需在线推送,无需集成个推原生 sdk)
  1. 服务端方面,uni-push2支持 uniCloud 云端一体,无需再编写复杂代码轻松完成 push。 (uni-push1.0 仅支持使用传统服务器开发语言如 php,未和客户端有效协同,流程比 uni-push2.0 繁琐)
  2. uni-push 还自带一个 web 控制台。不写代码也可以在 web 页面发推送。uni-push1.0 的 web 控制台在dev.dcloud.net.cn。uni-push2.0 的 web 控制台是开源的,属于 uni-admin 插件详见

二、如何使用 uni-push2.0

1.开通

在开始使用 uni-push2.0 前,需要先开通 uni-push2.0。

开通流程详见:uni-push2.0 快速上手

此处请注意,如果还需要开通 Android 或 iOS 端的推送,则还需要填写 Android 包名、签名(SHA1 指纹)或 iOS Bundle ID。

这里以获取 Android 签名为例:

  • 切换到签名证书所在的文件夹

  • keytool -list -v -keystore test.keystore
    Enter keystore password:  # 输入密码,回车
    
    
  • 这里的 test.keystore 就是你证书 keystore 的名字

  • 然后就能看到类似的内容,在网页上填写即可

  • [图片上传失败...(image-db821-1691235999530)]

2.客户端启用 uniPush2.0

在开通完成后,还需要在客户端启用 uni-push2.0。

APP 端的启用如图所示

[图片上传失败...(image-6b100a-1691235999530)]

注意:需要离线推送的话还需要引入对应的 SDK

Web 端的启用如图所示

[图片上传失败...(image-609e74-1691235999530)]

微信小程序端的启用如图所示

[图片上传失败...(image-7afff0-1691235999530)]

注意:在小程序端使用还需要将个推的域名加入白名单,否则无法联网

个推的域名参考小程序中使用 uni-push2.0 的白名单配置

个推自有域名:wshz.getui.net、wshz.gepush.com、wshzn.gepush.com、wshzn.getui.net

3.1 客户端监听推送消息

由于监听推送消息的代码,需要在收到推送消息之前被执行,所以建议监听逻辑写在应用一启动就会触发的应用生命周期onLaunch

参考代码如下:

//文件路径:项目根目录/App.vue
export default {
    onLaunch: function() {
        console.log('App Launch')
        uni.onPushMessage((res) => {
            console.log("收到推送消息:",res) //监听推送消息
        })
    },
    onShow: function() {
        console.log('App Show')
    },
    onHide: function() {
        console.log('App Hide')
    }
}

注意:接收到的消息有两种类型,分别是:

  • “click”-从系统推送服务点击消息启动应用事件
  • “receive”-应用从推送服务器接收到推送消息事件

如果你在接收到 receive消息的时候,本地通过uni.createPushMessage的方式手动创建通知栏消息的,那么,此时如果再同通知栏点击进入,就会触发一次 click

因此,需要在监听消息的时候区分两种消息类型,比如说只监听receive类型的消息。

3.2 获取客户端推送标识

示例代码如下:

// uni-app客户端获取push客户端标记
uni.getPushClientId({
    success: (res) => {
        let push_clientid = res.cid
        console.log('客户端推送标识:',push_clientid)
    },
    fail(err) {
        console.log(err)
    }
})


拿到 push_clientid 后,就可以在服务端发起推送了。

4.服务端推送消息

推送消息就要到服务端进行了。

首先在创建云函数的时候需要选择uni-cloud-push扩展库,否则无法调用推送功能。

[图片上传失败...(image-2bf920-1691235999530)]

云函数的示例代码如下:

'use strict';
const {
    verifyHttpInfo
} = require('uni-cloud-s2s')

exports.main = async (event, context) => {
    //event为客户端上传的参数
    console.log('event : ', event)
    if (context.source === 'http') { // 建议在使用url请求当前云函数时进行验证
        try {
            verifyHttpInfo(event)
        } catch (e) {
            return e
        }
    }
    const uniPush = uniCloud.getPushManager({
        appId: context.APPID || "__UNI__XXXXXX" // 处理 URL 化时没有 APPID 的问题
    })

    //返回数据给客户端
    const resp = await uniPush.sendMessage({
        "push_clientid": "xxx",     //填在uni-app客户端获取到的客户端推送标识push_clientid
        "title": "通知栏显示的标题",    
        "content": "通知栏显示的内容",
        "payload": {
            "text":"体验一下uni-push2.0"
        }
    })
    console.log(resp);
    return resp
};

之后就可以调试运行一下云函数,如果一切顺利的话,此时你的客户端就应该会接收到推送消息了。

5.特别注意!!

在 Web 端,无需特别的配置即可在开发模式下接收到推送消息。

但如果是小程序端,则还需要配置域名白名单,同时,无法在微信小程序模拟器里接受到推送消息,请真机运行之后再试(即将小程序运行到微信客户端里)。

特别注意!如果是 APP 端,无论是 Android 还是 iOS 端,都无法在官方的基座应用里接收到推送消息!需要自行打包一个自定义调试基座应用才行!

【如下图所示】

[图片上传失败...(image-5790bc-1691235999530)]

总结

本文介绍了如何基于 uni-push2.0 实现 App、Web、小程序等多个平台的推送,包括开通、启用和调用的流程和代码示例。

本文参考 uni-push2.0 官方教程和笔者的踩坑记录总结而成,希望对于各位读者朋友能有所帮助,谢谢观看。

本文作者:草梅友仁
版权声明:转载请注明出处!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容