原文可查看此处 ,搜索 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. shell编程(一):功能、执行、基础

    1.shell的功能 (1)自动化批量初始化系统:对N台系统初始化(装系统时对系统的时区.yum源.软件包的更新.安全的设置进行初始化) (2)自动化批量部署软件程序:(LAMP/LNMP/Tomca ...

  2. Python基础——爬虫以及简单的数据分析

    目标:使用Python编写爬虫,获取链家青岛站的房产信息,然后对爬取的房产信息进行分析. 环境:win10+python3.8+pycharm Python库: import requests imp ...

  3. Cookie 和 Session 关系详解

     什么是 Cookie 和 Session ? 什么是 Cookie HTTP Cookie(也叫 Web Cookie或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在 ...

  4. position两种绝对定位的区别

    position绝对定有两种,分别为absolute和fixed 一.共同点: 1.改变行内元素的呈现方式,display被置为inline:block 2.让元素脱离普通流,不占据空间 3.默认会覆 ...

  5. Scanner扫描器的使用

    Scanner:扫描器,可以通过Scanner类扫描用户在控制台录入的数据. 1.导包 //导包快捷键Alt+Enter 2.创建键盘录入对象 //键盘录入对象的名称为 “sc” 3.接收数据 //将 ...

  6. Redis->主从复制->哨兵模式(高可用)

    一:安装redis $ yum -y install gcc $ yum -y install gcc-c++ $ wget http://download.redis.io/releases/red ...

  7. Linux下安装MongoDB 4.2数据库--使用tar包方式

    (一)基础环境设置 操作系统版本  :centos-7.4 MongoDB版本:MongoDB 4.2 社区版 (1)关闭防火墙 # 关闭防火墙 [root@mongodbenterprise lib ...

  8. python list遍历方法汇总

    list=['a','b','c','d','e'] #方法1: print('#方法1:') #i值为列表的item,list为列表名,因此i值即为列表元素 for i in list: #list ...

  9. I/O格式化与运算符

    I/O格式化与运算符 输出函数 Python3 - print() 在Python3中.print()的使用方法如下: >>> # ==== Python3 print() ==== ...

  10. vue的生命函数周期以及钩子函数的详解

      首先我们先附上官网的图 图中展现出的是vue整个生命周期以及钩子函数 1- beforeCreate(创建前) 2- created(创建完成) 3- beforeMount(挂载前) 4- mo ...