在 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>