uniapp 消息推送 前端

一:在manifest.json app模块配置勾选Push推送

image.png

二:在uniapp开发者后台配置应用信息

注意点:1.应用名称需要跟uniapp中配置的名称一致 2.android包名:保持和云打包一致。 3.android应用签名:这个签名需要用keytool工具查看,具体的可以问后端同事,他们都知道这个…… 4.ios bundleId :保持和云打包一致

image.png

三:配置完成在应用配置中会自动生成AppID等信息,把这些信息发给后端

image.png

四.配置ios证书(分为开发、通用,具体证书配置流程参考https://docs.getui.com/getui/mobile/ios/apns/)

注意点:应用配置中有ios证书配置,这里的证书是推送证书和发布证书不是同一个

image.png

五.测试ios离线消息

1.取deviceToken,根据cid查询,最好是正式环境下的token


image.png

2.点击测试一下,出现弹框


image.png

3.把复制的token粘贴点击确定,推送成功消息弹出后表示ios离线在线已可以连通
image.png

六.产商推送设置

注意点:安卓离线消息推送是需要配置各大厂商,只有oppo需要上线。IOS离线不需要设置产商,重点在推送证书(苹果离线使用APNs,安卓使用厂商)
需要打开各个开发平台的推送功能

image.png

四:使用在App.vue里面

注意点: onLaunch是应用的生命周期函数,注意Uni的生命周期函数与vue的生命周期函数的不同,uni的生命周期函数是应用生命周期函数,vue的生命周期函数是页面生命周期函数,uni的生命周期函数出现的要比vue的早,所以在onLaunch中调用不到methods中的方法

onLaunch: function() {
// #ifdef APP-PLUS
            // 获取系统信息
            let system = uni.getSystemInfoSync()
            let pinf = plus.push.getClientInfo();
            let cid = pinf && pinf.clientid || ''; //客户端标识
            // 同步获取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 //获取版本号
                })
                console.log('version', wgtInfo.version)
            });
  // #ifdef APP-PLUS
  // 点击通知消息时 执行此事件 发送请求 跳转页面等
 plus.push.addEventListener('click', msg => {
      uni.switchTab({
        //跳转到消息页面
            url:'/pages/tabbar/message/index'
      });
  },false);
//监听在线消息事件 收到透传消息时,执行该事件 
plus.push.addEventListener('receive',msg => {
    // 如果是在线收到推送消息,需要创建一条推送  cover: false 是否覆盖上一条推送消息
    let options = {
         cover: false,
         title: msg.payload.title
    };
    let url = '/pages/tabbar/message/index';
    // ios 透传
    if (system.platform == 'ios') {
       if (!msg.payload) {
       plus.push.createMessage("您的设备发生异常请及时查看", url, {
        cover: false,
        title: '异常消息'
       }); //创建一条推送消息
       return
    }
    if (msg.aps == null && msg.type == "receive") {
      plus.push.createMessage(msg.payload.content, url, options); //创建一条推送消息
    }
  }
    // android透传
    if (system.platform == 'android') {
      plus.push.createMessage(msg.payload.content, url, options); //创建一条推送消息
    }
  },false);
  // #endif
}

plus.push.createMessage
第一个参数:content,必填项,也即是消息的内容部分
第二个参数:payload,选填项,因为页面的跳转是获取的payload中的值,因此我需要这个参数
第三个参数:options,选填项,options是其他参数,cover:false是否覆盖上次通知,默认false,title标题,也即是消息除了需要展示内容之外,还需要展示一下标题部分。
如果不加外面的msg.type的判断,则会出现一直创建消息的效果,接收到消息(receive),然后创建成功(plus.push.createMessage)后,消息的type类型会改变,则可以通过type类型的改变来解决一直弹窗创建消息的问题。

华为离线推送类型为intent,选择其他类型会使离线收不到

  • 客户端调用的js API见:https://www.html5plus.org/doc/zh_cn/push.html
  • uniapp官方解决方案:https://ask.dcloud.net.cn/article/35622
  • 参考链接: https://blog.csdn.net/hkw20/article/details/122489887

appuploade 生成ios推送证书

1、已经在苹果开发者后台创建过项目的直接选中项目添加推送服务就好(没有创建的先创建)
2、打开appuploade,用苹果开发者账号登录
3、选择证书选项
4、证书类型选择 Push Notification service SLL(Sandbox & Producyion)—iOS生产环境推送证书(下面一个是正式环境),其他根据自己填写
5、点击下载证书即可,再把证书上传到uniapp后台

你可能感兴趣的:(uniapp 消息推送 前端)