Trust
Trust
  • 发布:2019-03-22 17:45
  • 更新:2022-09-14 13:34
  • 阅读:91013

在 uni-app 中使用 UniPush

分类:uni-app

HBuilderX 1.7.2 起,上线了 UniPush 功能。

UniPush

请认真阅读 UniPush 使用指南 及文中涉及到的相关文档说明,了解下什么是 UniPush。

在 uni-app 中使用

在 uni-app 中使用 UniPush 的话,可以通过条件编译直接使用 plus 的能力。

App.vue

较为合理的方案,是在 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 模块,因此与登录、分享等功能类似,需要打包后生效。

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

结语

现如今各大厂商对于应用权限的管理愈发严格,在开发 Push 功能的过程中,需要仔细并且耐心。
如果使用 UniPush 的过程中遇到问题,请仔细对照文档检查后,再发帖详细描述问题。

参考文档

22 关注 分享
Geeker 小张没有名字 1***@qq.com 今天回复我了吗 正儿八经吃豆腐 Panda_2012 5***@qq.com 5***@qq.com 4***@qq.com coolfires n***@yeah.net 9***@qq.com 河南dev 霜序一七 jtshushu aliang888 一个网名 rysnone b***@163.com 6***@qq.com 1***@qq.com 全栈工程师Rone

要回复文章请先登录注册

9***@qq.com

9***@qq.com

用的插件市场一个百度语音合成的插件进行的语音播报。然后安卓的在切换应用或者息屏之后会进行播报,只在清除进程之后才不播报。ios的只有在App显示的时候才播报,切换到其他应用界面或者息屏就不播报了,这是怎么回事呢?
2020-07-06 08:52
w3cboy

w3cboy

回复 w3cboy :
还有个自定义事件,也不知道干嘛用的、而且也没什么说明!@#¥%……&*()——+
2020-07-01 15:01
w3cboy

w3cboy

回复 x***@163.com :
receive需要发透传消息才能触发、或者通知消息选择Android配置下的后续动作:附加消息,才能receive到,目前我也搞不懂为什么。这里吐槽一下,后台网页发推送的界面说明太少了,只能自己慢慢摸索。。
2020-07-01 15:00
x***@163.com

x***@163.com

照着教程,后台推送消息,触发不了receive事件,点击消息时能触发click事件。监听receive事件有什么需要注意的地方吗?
2020-05-29 17:34
指尖上的代码

指尖上的代码

如果别人手动在系统通知栏清掉了所有的推送,这个貌似没法知道啊。这样角标数就一直不对
2020-04-30 15:26
指尖上的代码

指尖上的代码

回复 指尖上的代码 :
.......
2020-04-28 11:08
指尖上的代码

指尖上的代码

iOS平台创建本地消息也会触发监听的"receive"事件,此时需要添加特殊参数来标识本地创建的消息。这个怎么弄,没明白,主要是创建了两条消息
2020-04-28 10:35
等不到de回忆

等不到de回忆

回复 1***@qq.com :
离线推送相关
2020-03-31 11:11
等不到de回忆

等不到de回忆

回复 1***@qq.com :
安卓的话需要配置厂商渠道推送配置,ios的话需要服务端加apns离线推送,前端再另外判断处理
2020-03-31 11:11
S1ow

S1ow

1、当app处于后台状态时,推送消息,点击应用图标切换回前台状态后,自动触发监听的click点击事件,在收到消息的时候就触发了点击事件
2、当将app进程杀掉之后,推送消息,点击应用图标重新进入应用,也会自动触发监听的click事件,在启动之后触发了点击事件
备注:click事件写在app.vue中的onLaunch中

请问:

就是这样设计的?还是bug?v3编译器与非v3编译器下效果一样。
2020-03-18 13:25