【uniapp 开发】UniPush

最新推荐文章于 2024-10-06 23:23:02 发布

weixin_30655219

最新推荐文章于 2024-10-06 23:23:02 发布

阅读量754

点赞数

文章标签： php javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/neo-java/p/11305695.html

版权

本文介绍如何在uni-app中处理推送消息，并利用vuex进行消息数据的跨页面同步。通过App.vue文件注册推送事件监听，实现点击和接收推送时跳转页面及更新vuex状态，最后在index.vue页面展示推送消息。

摘要由CSDN通过智能技术生成

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>