ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端基于uniapp[uniPush]实现APP消息推送（安卓、IOS） [打印本页]

---

作者: 风雨同行    时间: 2024-8-4 17:25
标题: 前端基于uniapp[uniPush]实现APP消息推送（安卓、IOS）
前提概述：此文章都是基于uniapp中uniPush2实现的在线、离线推送
app消息推送流程

• 登录开发者中心先填写好项目信息以及设置厂商
  
• 在manifest.json文件中勾选推送模块
  
• 打包自界说基座
  
• 在前端项目中创建云函数（此云函数的作用是接受背景发送的消息模板，解析出来后，发送给到uniapp背景，以此触发消息推送功能）
  
• 在app.vue文件中须要做三件事：
  ①获取客户端推送标识
  ②处置惩罚离线（推送点击）
  ③在线（吸收消息、推送点击）
  
• 真机测试
  

好了，以下会根据上面的五个流程给出的具体笔记。。。
坑点

在具体报告之前，我觉得可以把坑点先记下来，方便大家避雷：

• 上传iOS证书提示“证书环境错误”的问题
  

   须要上传的是推送证书，不是打包证书
  

• 设置完成后，运行到真机会出现"打包时未添加push模块,请参考…“的环境
  

   在manifest.json勾选了push模块之后，须要重新打包自界说基座
  

• 账号共同的问题
  

   你在哪个开发者账号中设置的app,对应的你的HBuilder也要登录那个账号举行开发
  

• 小米真机测试，出现收不到消息的环境
  

   须要设置推送时间
  

• 华为离线时，收不到消息推送，若厂商信息确认设置无误，那么检测以下两个地方
  

   1、查看开发者中心 - uniPush - 应用信息，点击 [包名再“应用详情“中”各平台信息“管理，点击前往]，然后选择你的应用举行修改，一定要认真核对 Android 应用签名SHA256 是否填写正确
2、华为推送信息乱写的时候，是可能不被推送的，可以按照以下格式发送排查下：
title：订单提醒
body：您的外卖订单已接单，请耐心等候
  

• 官方排错文档
  

   如果以上都不能帮助到你，那么再查看这两个文档举行排查：厂商限额和提醒方式阐明、uni-push2.0 常见问题，如果都不行的话，只能添加unipush的客服咨询啦
  具体处置惩罚笔记（从0到1）

1、在开发者中心填写项目信息以及设置厂商（见图）

2、在manifest.json文件中勾选推送模块

上传图片留意事项和格式，看文档
3、更新自界说基座

在 发行->原生APP-云打包，点击打自界说调试基座。这一步，务必包管你前面的设置都好了，尤其是oppo的。
4、在前端项目中创建云函数

消息推送属于敏感操作，只能直接或间接由服务端触发。传统的三方push服务，须要开发者在服务端设置密钥或证书，根据服务器端文档签名获取token，再向相关URL接口发起网络哀求…而unipush仅是须要我们创建一个云函数作为一个中转站

• 点击项目，右键点击创建uniCloud云开发环境，然后选择阿里云或者腾讯云
  
• 创建完成后，右键点击uniCloud选择关联空间
  
• 再右键点击cloudfunctions,选择新建云函数，新建时可选择uni-cloud-push扩展库
  

具体里面的内容，我们处置惩罚的不须要许多，可以具体看文档，文档写的比较详细，不停往下滑，直接看第四步
5、在app.vue处置惩罚消息

   留意：安卓和IOS在线推送的环境是，是不会弹出提示的，须要我们手动创建
  直接贴代码啦，具体看注释

1. // #ifdef APP-PLUS
2.   // 客户端获取push客户端标记
3.   uni.getPushClientId({
4.     success: async (res) => {
5.       let push_clientid = res.cid
6.       //这个id是不会改变的，我们需要在登录必经过的页面或者方法拿到这个id传给后端存储起来
7.       uni.setStorageSync('unipush_id', push_clientid)
8.     },
9.     fail(err) {
10.       console.log('推送id获取失败:', err)
11.     },
12.   })
13.   
14.   //离线推送-点击信息
15.   plus.push.addEventListener(
16.     'click',
17.     async function (msg) {
18.       setTimeout(function () {
19.         uni.navigateTo({
20.           url: `/${msg.payload['path']}`,
21.         })
22.       }, 1000)
23.       plus.push.clear()
24.     },
25.     false
26.   )
27.   // 在线推送-接收信息
28.   plus.push.addEventListener(
29.     'receive',
30.     function (msg) {
31.     //ios平台需要多一层判断，且拿取方式不同
32.       var platform = uni.getSystemInfoSync().platform
33.       if (platform == 'ios') {
34.         if (msg.type == 'receive') {
35.           // 这里判断触发的来源，否则一直推送。
36.           let options = { cover: false, title: msg.payload.title }
37.           plus.push.createMessage(msg.content, msg.payload.path, options)
38.         }
39.       } else if (platform == 'android') {
40.         let option = { cover: false, title: msg.title }
41.         plus.push.createMessage(msg.content, msg.payload.path, option)
42.       }
43.     },
44.     false
45.   )
47.   // 在线推送-点击信息
48.   uni.onPushMessage(async (res) => {
49.     let data = res.data.payload
50.     if (res.type === 'click') {
51.       setTimeout(function () {
52.         uni.navigateTo({
53.           url: `/${data}`,
54.         })
55.       }, 1000)
56.       plus.push.clear()
57.       plus.runtime.setBadgeNumber(0) //清除图标右上角数字
58.     }
59.   })
60.   // #endif

复制代码

6、真机测试

有两种测试方法：

• 后端在apipost中弄一个接口，点击发送
  
• 在开发者平台->unipush->消息推广->创建推送->透传消息
  留意：
  1、测试小米手机一定要填写定时推送
  2、Android设置里面，initende的填写方式是（以下全部复制哦，然后再根据提示修改）：
  

   intent:#Intent;action=android.intent.action.oppopush;launchFlags=0x14000000;component=安卓包名/io.dcloud.PandoraEntry;S.UP-OL-SU=true;S.title=测试标题;S.content=测试内容;S.payload=test;end
  帮到你的话，就点个赞再走吧~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4