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

在 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 代做app启动图

要回复文章请先登录注册

l***@qq.com

l***@qq.com

回复 i***@163.com :
在创建本地通知时,传入一个标志,再次进入时,判断是否有标志,若是有标志,直接return即可
2022-09-14 13:34
i***@163.com

i***@163.com

ios 在线只支持透传,但是透传又不发通知栏消息,在receive回调里,如果调用 plus.push.createMessage方法,就又会触发receive的回调,造成无限循环,这怎么解决???
2022-06-22 17:59
nininiccc

nininiccc

vivo人工审核认为应用存在强制用户使用定向推送功能--不通过,怎么办?
2022-03-30 16:47
1***@qq.com

1***@qq.com

ios完美可用,安卓payload里只有title和content,没有自定义内容,而且离线状态收不到消息。
2022-03-15 19:59
5***@qq.com

5***@qq.com

回复 5***@qq.com :
uni.navigateTo,url把当前页面的路径添加到目录路径前面了,请问这个怎么解决
2022-03-06 11:31
5***@qq.com

5***@qq.com

在click方法里执行uni.navigateTo跳转时,厂家推送的能跳转,个推推送的不跳转是怎么回事
2022-03-06 10:58
l***@163.com

l***@163.com

为什么我app离线状态点击消息监听不到click事件
2021-10-13 10:23
魏琦

魏琦

请问可以做类似支付宝收款语音播报吗?离线和在线都可以播报的那种
2021-09-24 18:42
小李子l1999

小李子l1999

你好,请问可以根据后端返回的数据内容进行推送嘛?
2021-08-21 13:43
jonychen1

jonychen1

GoEasy提供的uniapp通知栏推送功能简单易用,支持厂商通道,APP进程杀了也能收到。在线客服支持也很及时。地址:https://www.goeasy.io
2021-06-11 14:58