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(消息推送)。
- 提交打包，自定義基座或正式打包均可。