在 uni-app 中使用

# 在 uni-app 中使用

在 uni-app 中使用 uni-push 的话，可以通过条件编译直接使用 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>