uni-app 的推送功能

土豆想发芽
432 阅读3分钟

本次做uniapp推送，一是在这里还没有相关的教程，只有uniapp官网上有，想在这做一下汇总，二是把这个做给公司的下一位交接人，让他方便查看。

在这我只说明一下关于在线推送的一些步骤，离线的需要对接各大厂商的推送设置

在这之前不妨先看看官方的介绍

UniPush介绍

先从申请推送开始。

uniPush开通指南

申请推送

首先打开自己开发者中心，找到自己的项目点击进入，找到下面的步骤，填写相应的数据，至于要填写那些数据，大家可以具体看UniPush开通指南 image.png

这些数据必须和自己的应用对应上

  • Android平台：
    Android包名必须与HBuilderX中App云端打包时配置的Android包名一致；Android 应用签名必须填入打包时使用证书的SHA1指纹。
  • iOS平台
    iOS BundleId必须与HBuilderX中App云端打包时配置的Bundle ID（AppID）一致。

填写完以后是这个样子的

image.png

ios 的设置

具体实现看这篇文章ios证书配置指南

由于window系统不能申请iOS的p12证书

可以看这篇文章 windows下创建ios打包证书的详细流程

这样我们的推送申请算是完成了

页面实现

第一步，要在manifest.json文件内勾选上相应的操作

image.png

uniPush使用指南

上面链接主要是关于服务端推送的一些配置，后端小伙伴可以看一下

在此之前，需要找到相应的应用信息给到后端就可以了，具体操作后端知道怎么做

image.png

具体前端需要做的我在下面说明一下

在应用安装后第一次运行时应该调用 5+ API (opens new window)的 plus.push.getClientInfoAsync 方法获取客户端标识。

下面这些方法为了后续的维护，我把他们封装到一个模块中，只需引用调用其中的方法，文件放在utils文件的uniPush.js页面

如果获取的 cid 为空，说明客户端向推送服务器注册还未完成，可以使用 setTimeout 延时重试。

// 获取设备CID
getClientInfo () {
    // #ifdef APP-PLUS
      var clientInfo = plus.push.getClientInfo();
      console.log('推送信息',clientInfo);
      this.clientId = clientInfo.clientid
    // #endif
  }

这个clientId 就是后端需要的cid，需要你把这个和你的用户id传递给服务端，做一下绑定

// 绑定用户和设备
  bingEquipmentAndUserId() {
    console.log('clientId',this.clientId);
    if (this.havaUserId()) {
      bindClientId({
        userId: this.userId,
        cid:this.clientId
      }).then(res=>{
        console.log('绑定信息',res);
      })
    }
  }

登录的时候调用

import UniPush from '../../utils/uniPush.js'

// 登录
login() {
    // 接口
    login(_self.userInfo).then(res => {
        if (res.code == 200) {
            console.log('账号信息', res.data);

            // 绑定推送设备
            let uniPush = new UniPush(res.data.userId);
            uniPush.bingEquipmentAndUserId()

            // 创建聊天账号
            _self.registerChatUser(res.data)

            uni.setStorageSync('userInfo', res.data)
            uni.setStorageSync('Authorization', res.data.token)
            _self.$commonFun.goUrl(2, '../index/index')
        }
    }).catch((req) => {
            console.log(req)
    })

},

在 App.vue页面中的onLaunch中去监听推送消息，根据不同的推送类型跳转到对应的页面

//监听系统通知栏消息点击事件  
plus.push.addEventListener('click', function(msg) {
    //处理点击消息的业务逻辑代码 
    console.log('处理点击消息的业务逻辑代码 ', msg);
    let navigationPush = new NavigationPush(msg)
    navigationPush.navigation()
}, false);
//监听接收透传消息事件  
plus.push.addEventListener('receive', function(msg) {
    //处理透传消息的业务逻辑代码  
    console.log('处理透传消息的业务逻辑代码 ', msg);
    let navigationPush = new NavigationPush(msg)
    navigationPush.navigation()
}, false);

还有最后一步，就是在后台管理中也就是后台，需要做一些推送的发布，其实就是后端定义几个接口来发布推送，推送的内容可以自己自定义，无论是推送消息还是透传消息

pushToChat(params) {
    let context;
    switch (params.type){
      case 'text':
        context = params.content
        break;
        // 后面还有 语音，图片，视频，定位等等格式的数据需要一一处理
      default:
        break;
    }

    let data = {
      userId:this.memberuuid, // 对方id
      title:this.chatName,
      context
    }

    api_pushToChat(data).then(res=>{
      console.log('推送成功',res);
    })
},

这样对方通过plus的监听方法就可以监听到了

avatar
文章
阅读
粉丝