原文可查看此处 ,搜索 uni-app 使用个推推送系统消息

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect

如果此链接在浏览器中无法打开,可将此链接发送给微信好友或者发送到微信文件传输助手。在点击打开


前置条件:

1.1 开发环境:windows

1.2 开发框架 : uni-app 、H5+

1.3 编辑器 :  hbuilderx

2. 进入个推官网  ,注册申请账号,登录进入开发者中心,创建应用。

2.1 创建应用步骤:我的/应用管理/创建应用

2.2 创建完应用以后,查看应用信息,得到appId、appKey、appSecret

3. 打开 hbuilderx ,在 manifest.json 文件里面的源码视图下面配置 sdkConfigsd 对象下的 push 里面配置 igexin对象的属性值

代码如下:manifest.json

"push" : {
"igexin" : {
"appid" : "",
"appkey" : "",
"appsecret" : ""
}
}

appid  、appkey 、appsecret 的获取请阅读步骤 2.2 获取

代码示例截图 manifest.json

4. 在APP客户端监听推送消息

可参考此处文档

Push推送开发指南 : https://ask.dcloud.net.cn/article/34

h5+推送消息监听 http://www.html5plus.org/doc/zh_cn/push.html#plus.push.addEventListener

4.1 配置完igexin的属性值以后,在app.vue文件里面监听推送消息事件

代码示例 app.vue 文件, 在 onLaunch 里面

// console.log('App Launch')
const _self = this;
//监听系统通知栏消息点击事件
plus.push.addEventListener('click', function(message) {
//处理点击消息的业务逻辑代码
console.log(message);
plus.nativeUI.toast('click:'+JSON.stringify(message));
//plus.nativeUI.toast('push click');
_self._handlePush(message);
}, false);
//监听接收透传消息事件
plus.push.addEventListener('receive', function(message) {
console.log(message);
plus.nativeUI.toast('receive:'+JSON.stringify(message));
//处理透传消息的业务逻辑代码
//plus.nativeUI.toast('push receive');
_self._handlePush(message);
}, false);

获取 cid(clientid),需要在App端自行获取,代码如下

//获取cid
var pinf = plus.push.getClientInfo();
var cid = pinf.clientid;//客户端标识

注意:

  

  1.使用uni-app开发不需要引入SDK文件,在HbuilderX云打包时,云打包会自动根据manifest里面配置的 appid 、appkey 、appsecret 按需引入相关SDK

  获取cid(clientid) : 在App内使用H5+ 进行获取

  2.1 H5+获取 cid 文档 :

  http://www.html5plus.org/doc/zh_cn/push.html#plus.push.getClientInfo

  3. uni-app使用plus注意事项   https://uniapp.dcloud.io/use-html5plus

  uni-app不需要 plus ready 在html中使用plus的api,需要等待plus ready。而uni-app不需要等,可以直接使用。而且如果你调用plus ready,反而不会触发

  4.  manifest.json 配置完成后,打包为测试包(自定义基座),测试推送消息

  4.1 测试推送消息,如果不知道App设备的cid,可通过个推指定的 获取cid的app工具,安装到手机上,在开发者中心,选择创建推送/配置管理/故障排查菜单,输入cid工具里的验证码

  4.2 手机上安装的App必须配置了  appid  、appkey 、appsecret,否则通过cid工具里面的验证码取不到CID

 

uni-app 使用个推推送系统消息的更多相关文章

  1. ios 个推推送集成

    个推推送总结: 个推第三方平台官网地址:http://www.getui.com/cn/index.html 首先去官网注册账号,创建应用,应用的配置信息,创建APNs推送证书上传 P12证书(开发对 ...

  2. python搭建友盟以及个推推送web服务器

    一.友盟客户端demo: 由于SDK原因,新版Android Studio的Android API 28 Platform无法同步新建项目, 所以我最终选择下载android-studio-bundl ...

  3. APP的消息推送(极光推送)

    APP的消息推送,使用的第三方平台是极光推送 简单案例(以Thinkphp为例): 1.下载下载PHPSDK 2.把PHPSDK目录下的jpush-api-php-client-3.5.1\src\J ...

  4. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  5. 个推推送Android问题检测

    1.获取不到CID问题: 1.      查看配置文件是否有问题,appkey.appsecret.appid是否有空格存在. 2.      相关权限是否全部添加. 3.      manifest ...

  6. android app 集成 信鸽推送

    推送其实挺中意小米推送的,并经用户群占比还是比较大的,奈何拗不过php后端哥们的选型,就只好用信鸽推送了,期间接入过程中也是遇到不少问题,所以记录下来,以后如果还是用信鸽推送的话,估计看看以前的博客, ...

  7. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  8. APP如何实现推送功能

    一.推送功能的集成 (1)在Umeng开发者中心,申请新应用,开通推送功能.此时需要上传开发推送证书和生产推送证书的p12文件. 申请证书的流程如下: >>1 创建开发推送证书 >& ...

  9. 个推推送iOS版 常见问题详解

    原文:http://www.oschina.net/question/1782938_234760   1.提交了.p12文件后多久可以测试? 提交后10分钟左右才可以测试,并不是立即生效的.   2 ...

随机推荐

  1. cnpm的安装(超级详细版)

    1. 安装node 打开黑窗口   安装node 网上教程很多,我就不加上了 2.node -v  查看node是否已安装 3.安装淘宝镜像 npm install -g cnpm -registry ...

  2. java中的引用类型:强软弱虚

    java中的引用类型共4种:强软弱虚,具体每种类型的特点和应用场景.记录下.本文是看了马士兵老师的视频后记录整理的.加深印象. 基本概念 1. 强引用 强引用是使用最普遍的引用.如果一个对象具有强引用 ...

  3. 一个简单的CSS登录页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. sublime Text3 实现2:1:1三分屏效果

    小trick, 水一篇博客 先上效果图 由于写题啥的时候需要重定向输入输出改数据对拍, 设置成这样的效果就非常直观的看数据 直接切题, 首选项--快捷键--default里搜索alt+shift+1( ...

  5. Flume-0.9.4和Hbase-0.96整合

    这几天由于项目的需要,需要将Flume收集到的日志插入到Hbase中,有人说,这不很简单么?Flume里面自带了Hbase sink,可以直接调用啊,还用说么?是的,我在本博客的<Flume-1 ...

  6. 【Spring注解驱动开发】面试官:如何将Service注入到Servlet中?朋友又栽了!!

    写在前面 最近,一位读者出去面试前准备了很久,信心满满的去面试.没想到面试官的一个问题把他难住了.面试官的问题是这样的:如何使用Spring将Service注入到Servlet中呢?这位读者平时也是很 ...

  7. 良心之作送你几个Xsheel使用小技巧

    ❝ 工作中无可避免的会使用到Xsheel,接下来咔咔给你介绍几个小技巧,让你工作游刃有余. ❞ 一.告别繁琐 你的Xsheel连接后是不是这样的 哦!这个也太烦了我至少得在敲俩次命令才能到我的工作目录 ...

  8. DataOutputStream是用来处理什么类型数据的

    FileOutputStream f=new FileOutputStream(new File("sa.txt")); DataOutputStream do=new DataO ...

  9. js的原型和原型链

    总结: 1.每一个函数都有一个prototype属性,默认指向object空对象(原型对象), 每一个原型对象都有一个constructor属性,指向函数对象. eg: Person函数:     P ...

  10. 【漏洞二】Apache HTTP Server "httpOnly" Cookie信息泄露漏洞

    [漏洞] Apache HTTP Server "httpOnly" Cookie信息泄露漏洞 [原因] 服务器问题 Apache HTTP Server在对状态代码400的默认错 ...