App.vue

export default {
onLaunch: function() {
// #ifdef APP-PLUS
const _self = this;
const _handlePush = function(message) {
// TODO
};
plus.push.addEventListener('click', _handlePush);
plus.push.addEventListener('receive', _handlePush);
// #endif
}
}

回调中的处理

  • 较为常见的场景是,收到 Push 消息后根据推送消息的信息,跳转到某个指定的页面。
uni.navigateTo({
url: message.payload.pagePath
});
  • 如果某个数据信息,需要在推送成功后同步到其它页面,就需要用到 vuex 了。

vuex

/store/index.js

export default new Vuex.Store({
state: {
pushMessage: {}
},
mutations: {
updatePushMessage(state, message) {
/**
* 注意:这里为了方便预览查看效果,始终对 payload 做了序列化的处理。
* 实际开发期中,请自行调整代码并注意发送的 payload 消息格式。
*/
let payload = message.payload;
if (typeof payload !== 'string') {
message.payload = JSON.stringify(payload);
}
state.pushMessage = message || {};
}
}
})

消息同步

在 App.vue 中更新推送消息

export default {
onLaunch() {
// #ifdef APP-PLUS
const _self = this;
const _handlePush = function(message) {
/**
* 通过 vuex 来同步页面的数据,仅做演示。
* 实际开发中,这里可能是跳转到某个页面等操作,请根据自身业务需求编写。
*/
_self.updatePushMessage(message);
};
plus.push.addEventListener('click', function(message) {
plus.nativeUI.toast('push click');
_handlePush(message);
});
plus.push.addEventListener('receive', function(message) {
plus.nativeUI.toast('push receive');
_handlePush(message);
});
// #endif
},
methods: {
...mapMutations(['updatePushMessage'])
}
}

/pages/index/index.vue 页面渲染推送消息结果

<view>
<text class="title">推送消息 title:{{pushMessage.title}}</text>
<text class="title">推送消息 content:{{pushMessage.content}}</text>
<text class="title">推送消息 payload:{{pushMessage.payload}}</text>
<text class="title">推送消息 aps:{{pushMessage.aps}}</text>
</view>

测试发布

推送功能,涉及到第三方的 SDK 模块,因此与登录、分享等功能类似,需要打包后生效。

  • 阅读 UniPush开通指南 开通服务
  • manifest.json->App SDK配置,勾选“DCloud UniPush”。
  • manifest.json->App模块权限配置,勾选 Push(消息推送)。
  • 提交打包,自定义基座或正式打包均可。

参考文档

UniPush使用指南

UniPush开通指南

Push模块

【uniapp 开发】UniPush的更多相关文章

  1. uni-app开发踩坑记录

    大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...

  2. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  3. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  4. uniapp开发小程序

    uniapp开发小程序 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条 ...

  5. uni-app 开发随笔(踩坑记录)

    这里总结一些uni-app开发时我遇到的坑 uni-app获取元素高度及屏幕高度(uni-app不可使用document) uni.getSystemInfo({ success: function( ...

  6. 使用uView UI+UniApp开发微信小程序

    在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...

  7. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...

  8. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  9. uni-app开发小程序准备阶段

    1.软件安装 开始之前,开发者需先下载安装如下工具: HBuilderX:官方IDE下载地址 下面开发工具根据需求进行安装: 微信小程序开发工具安装 https://developers.weixin ...

随机推荐

  1. python+pytest接口自动化(4)-requests发送get请求

    python中用于请求http接口的有自带的urllib和第三方库requests,但 urllib 写法稍微有点繁琐,所以在进行接口自动化测试过程中,一般使用更为简洁且功能强大的 requests ...

  2. quartz框架(六)-ThreadPool

    ThreadPool 本篇博文,博主将介绍Quartz框架中ThreadPool线程池相关的内容.线程池顾名思义,就是一个可以帮助我们来进行线程资源管理的对象.在web开发中,常见的就有数据库连接池, ...

  3. tp 5 实现邮件发送

    参考博客: https://www.cnblogs.com/ccdr/p/14751548.htmlhttps://www.cnblogs.com/ccdr/p/14751548.html 1:qq邮 ...

  4. CF678F题解

    首先题意中的有撤销操作,直接李超树肯定不行,题目允许离线,所以考虑线段树分治 所以问题就变成了求一次函数最大值 这不是李超树板子吗??? 然后可以对每个节点都建立动态开点李超树,查询的时候直接从叶子节 ...

  5. Redis(一):基本数据类型与底层存储结构

    最近在整理有关redis的相关知识,对于redis的基本数据类型以及其底层的存储结构简要的进行汇总和备注(主要为面试用) Redis对外提供的基本数据类型主要为五类,分别是 STRING:可以存储字符 ...

  6. 论如何在使用RedisStandaloneConfiguration时让JedisConnectionFactory用上JedisPoolConfig

    前言 公司项目上线后经常运行一两天后就会出现延时.无响应的情况,当时第一反应觉得可能是某些业务优化不行,检查业务也没发现有什么问题,前前后后倒是修了两三个BUG,本以为没啥事儿了,但也就好了两天,很奇 ...

  7. Python 基础知识自检,离深入掌握 Python 还有多远

    1. 模块化编程思想 模块化编程是 Python 的基本思想.初学 Python,都应该使用过小海龟.随机.数学模块.使用模块之前,需要导入模块,然后根据自己的问题需要使用这些模块. Python 提 ...

  8. ActiveMQ-模块代码-02

    模块模式 p2p模式 生产者 ConfigBeanQueue package com.producerp2p.producerp2p; import org.apache.activemq.comma ...

  9. 消息中间件-RabbitMq相关概念及原理介绍【图文并茂】

    消息中间件 消息中间件的作用 解耦:消息中间件在服务之间插入了一个隐含的.基于数据的接口层.两边的服务处理过程都要实现这一接口,这允许我们独立的扩展或修改两边的处理过程,只要确保他们遵守相同的规范约束 ...

  10. Java中获取applicationcontext(应用上下文)

    package com.wl.iwbservice.util; import org.springframework.beans.BeansException; import org.springfr ...