原文可查看此处 ,搜索 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. Hbase的基本架构以及对应的读写流程

    一.HBase简介 1,定义: HBase 是一种分布式.可扩展.支持海量数据存储的 NoSQL 数据库. 2,HBase的架构图: 架构角色: 1)Master Master是所有Region Se ...

  2. phpstorm里面无法配置deployment?

    我的preference里面找不到deployment是什么回事啊? 解决方案: 导致这个问题的原因是PHPStorm的plugins里面没有Remote Hosts Access这个插件,安装一下这 ...

  3. 《刻意练习之C#》-0016- C#预处理器指令

    预处理指令 这些指令/命令不会转换为可执行代码,但会影响编译过程的各个方面:列如,可以让编译器不编译某一部分代码等. C#中主要的预处理指令 #define和#undef #define指令定义: # ...

  4. Linux中tomcat的部署

    红帽7如何配置tomcat 1.下载tomcat9.0和java-1.8 tomcat的下载地址: https://tomcat.apache.org/ java1.8是radhat7自带: [roo ...

  5. 读懂操作系统之虚拟内存TLB与缓存(cache)关系篇(四)

    前言 前面我们讲到通过TLB缓存页表加快地址翻译,通过上一节缓存原理的讲解为本节做铺垫引入TLB和缓存的关系,同时我们来完整梳理下从CPU产生虚拟地址最终映射为物理地址获取数据的整个过程是怎样的,若有 ...

  6. 设计一个简单的多线程(Fecit)_1

    D6高级编程,Fecit ,学习里面关于线程创建的一个例子.,按照那个例子做的,不过本人喜欢将线程实现部分作为单独的单元,主线程再调用它. unit Unit1; interface uses Win ...

  7. Flume-0.9.4和Hbase-0.96整合

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

  8. SpringMVC的url-pattern配置及原理剖析

    SpringMVC的url-pattern配置及原理剖析 xml里面配置标签: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc./ ...

  9. 一个简单的Shell脚本(解决windows上文本在macos上乱码问题)

    之所以有这一篇文章,是因为之前我写过的一篇文章:“解决Mac上打开txt文件乱码问题”:传送门: https://www.cnblogs.com/chester-cs/p/11784079.html ...

  10. CentOS快速安装Nginx的方法,nginx如何启动重启停止

    1.防止 make: command not found,提前安装一些插件,取决于当前环境是否已安装,如果已经安装就不需要执行此命令 yum -y install gcc automake autoc ...