原文可查看此处 ,搜索 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. 【快手初面】要求3个线程按顺序循环执行,如循环打印A,B,C

    [背景]这个题目是当时远程面试时,手写的题目.自己比较惭愧,当时写的并不好,面试完就又好好的完善了下. 一.题意分析 3个线程要按顺序执行,就要通过线程通信去控制这3个线程的执行顺序. 而线程通信的方 ...

  2. $.ajax 中的contentType 坑坑

    $.ajax 设置数据类型 applicaiton/json之后,服务器端(express)就拿不到数据. $.ajax 中的 contentType 和 dataType: contentType ...

  3. 解决Mac上打开txt文件乱码问题

    出处:https://www.jianshu.com/p/f55ddf1e9839 经常会在Mac上打开一个txt文件,发现里面的中文都是乱码,问题是在Windows和手机上看都完全是正常的,这就十分 ...

  4. Python 为什么推荐蛇形命名法?

    关于变量的命名,这又是一个容易引发程序员论战的话题.如何命名才能更具有可读性.易写性与明义性呢?众说纷纭. 本期"Python为什么"栏目,我们将聚焦于变量命名中的连接方式,来切入 ...

  5. ca77a_c++__一个打开并检查文件输入的程序_流对象_操作文件

    /*ca77a_c++__一个打开并检查文件输入的程序 习题:8.13 8.14*/ /*ca77a_c++__一个打开并检查文件输入的程序 习题:8.13 8.14 */ #include < ...

  6. weui上传多图片,前端压缩,base64编码

    记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片 因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错, ...

  7. 【asp.net core 系列】13 Identity 身份验证入门

    0. 前言 通过前两篇我们实现了如何在Service层如何访问数据,以及如何运用简单的加密算法对数据加密.这一篇我们将探索如何实现asp.net core的身份验证. 1. 身份验证 asp.net ...

  8. 啊湫----今天做项目遇到的redis缓存问题---解决方案

    演示缓存问题 在进行 前端某个功能更新时   传递的参数 问题 导致 缓存储存 覆盖  只缓存到  传递参数的  值 更新完毕后 进行 存储到redis当中  只存入了 当前这个不可以属性和一个id  ...

  9. Flask-install-python2.6

    命令: # 安装virtualenv $ sudo yum install python-setuptools $ sudo easy_install virtualenv OR sudo pip i ...

  10. Spring WebFlux 01 (原理及使用场景)

    一.什么是 Spring WebFlux 好多人以为Spring WebFlux就是Spring MVC的升级版,其实不然,那到底什么是Spring WebFlux呢,首先就要搞清楚Spring We ...