【uniapp 开发】UniPush
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的更多相关文章
- uni-app开发踩坑记录
大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...
- 使用uni-app开发微信小程序
uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- uniapp开发小程序
uniapp开发小程序 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条 ...
- uni-app 开发随笔(踩坑记录)
这里总结一些uni-app开发时我遇到的坑 uni-app获取元素高度及屏幕高度(uni-app不可使用document) uni.getSystemInfo({ success: function( ...
- 使用uView UI+UniApp开发微信小程序
在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...
- 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转
在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...
- 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统
在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...
- uni-app开发小程序准备阶段
1.软件安装 开始之前,开发者需先下载安装如下工具: HBuilderX:官方IDE下载地址 下面开发工具根据需求进行安装: 微信小程序开发工具安装 https://developers.weixin ...
随机推荐
- python+pytest接口自动化(4)-requests发送get请求
python中用于请求http接口的有自带的urllib和第三方库requests,但 urllib 写法稍微有点繁琐,所以在进行接口自动化测试过程中,一般使用更为简洁且功能强大的 requests ...
- quartz框架(六)-ThreadPool
ThreadPool 本篇博文,博主将介绍Quartz框架中ThreadPool线程池相关的内容.线程池顾名思义,就是一个可以帮助我们来进行线程资源管理的对象.在web开发中,常见的就有数据库连接池, ...
- tp 5 实现邮件发送
参考博客: https://www.cnblogs.com/ccdr/p/14751548.htmlhttps://www.cnblogs.com/ccdr/p/14751548.html 1:qq邮 ...
- CF678F题解
首先题意中的有撤销操作,直接李超树肯定不行,题目允许离线,所以考虑线段树分治 所以问题就变成了求一次函数最大值 这不是李超树板子吗??? 然后可以对每个节点都建立动态开点李超树,查询的时候直接从叶子节 ...
- Redis(一):基本数据类型与底层存储结构
最近在整理有关redis的相关知识,对于redis的基本数据类型以及其底层的存储结构简要的进行汇总和备注(主要为面试用) Redis对外提供的基本数据类型主要为五类,分别是 STRING:可以存储字符 ...
- 论如何在使用RedisStandaloneConfiguration时让JedisConnectionFactory用上JedisPoolConfig
前言 公司项目上线后经常运行一两天后就会出现延时.无响应的情况,当时第一反应觉得可能是某些业务优化不行,检查业务也没发现有什么问题,前前后后倒是修了两三个BUG,本以为没啥事儿了,但也就好了两天,很奇 ...
- Python 基础知识自检,离深入掌握 Python 还有多远
1. 模块化编程思想 模块化编程是 Python 的基本思想.初学 Python,都应该使用过小海龟.随机.数学模块.使用模块之前,需要导入模块,然后根据自己的问题需要使用这些模块. Python 提 ...
- ActiveMQ-模块代码-02
模块模式 p2p模式 生产者 ConfigBeanQueue package com.producerp2p.producerp2p; import org.apache.activemq.comma ...
- 消息中间件-RabbitMq相关概念及原理介绍【图文并茂】
消息中间件 消息中间件的作用 解耦:消息中间件在服务之间插入了一个隐含的.基于数据的接口层.两边的服务处理过程都要实现这一接口,这允许我们独立的扩展或修改两边的处理过程,只要确保他们遵守相同的规范约束 ...
- Java中获取applicationcontext(应用上下文)
package com.wl.iwbservice.util; import org.springframework.beans.BeansException; import org.springfr ...