Trust
Trust
  • 发布:2019-03-22 17:45
  • 更新:2019-09-03 09:25
  • 阅读:10354

在 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 的过程中遇到问题,请仔细对照文档检查后,再发帖详细描述问题。

参考文档

9 关注 分享
Geeker 小张没有名字 1046175189@qq.com asdadad啊的 正儿八经吃豆腐 Panda_2012 524216297@qq.com 522951870@qq.com 416867448@qq.com

要回复文章请先登录注册

aether.wu@gmail.com

aether.wu@gmail.com

请教下,注册设备ID应该在哪里初始化?是不是需要更多判断以规避多次注册?
2019-09-03 09:25
weiyeying@163.com

weiyeying@163.com

回复 1072690884@qq.com:
怎么搞的 ?
2019-08-28 14:36
1072690884@qq.com

1072690884@qq.com

回复 1072690884@qq.com:
知道怎么搞了
2019-08-27 14:08
1072690884@qq.com

1072690884@qq.com

uniapp推送给指定用户怎么搞
2019-08-27 14:07
1951844956@qq.com

1951844956@qq.com

我在uniapp里直接使用了极光推送提供的hbuilder的demo是可以用的。但是demo里的是H5版里面还有document这个api,明显是不能在app用的,,而且plus.Push.setAlias也是直接报错,没有这个函数的。请问要怎么绑定别名和使用别的api
2019-08-12 09:42
1604356394@qq.com

1604356394@qq.com

plus.push.createMessage创建的推送,和后端的推送,在App Hide的状态下,ios不能触发receive事件,有碰到过这个问题的人吗
2019-08-06 09:33
623898929@qq.com

623898929@qq.com

为什么安卓端使用plus.push.createMessage接口创建消息没有反应的?有人知道吗?
2019-07-27 09:40
18718500103@163.com

18718500103@163.com

官方的hello uniapp ios在测试发现没有收到透传数据
2019-07-25 10:33
623898929@qq.com

623898929@qq.com

照着教程,后台推送消息,触发不了receive事件,点击消息时能触发click事件。监听receive事件有什么需要注意的地方吗?
2019-07-25 10:24
603155768@qq.com

603155768@qq.com

后台给推来消息,我这边触发不了事件
2019-06-19 09:05
冰龙

冰龙

回复 冰龙:
此问题已解决,一个APP,一个手机,真机调试的时候,获取的clientID 和 云打包后,获取的clientID 不一样,所以报上面的错
2019-05-28 09:38
冰龙

冰龙

您好,请问下,我使用的是你的代码,云打包后,在uni-app后台的uni-push管理页面,生成的appid 等信息,在自己的后端服务中,使用个推的 java sdk开发,返回信息总是 {result=AppidError}
2019-05-27 18:20
184628261@qq.com

184628261@qq.com

回复 675624508@qq.com:
兄弟 解决了么 我的也是
2019-05-22 19:35
384862909@qq.com

384862909@qq.com

回复 675624508@qq.com:
好像说离线打包不能用 https://ask.dcloud.net.cn/article/35716 看下面评论
2019-05-16 11:15
坤典科技

坤典科技

了解一下,不过没看到附件
2019-05-15 23:59
675624508@qq.com

675624508@qq.com

求助:项目中用到推送,离线打包推送采用unipush方式,离线所需要的sdk用的是个推的sdk,这两个sdk通用吗,为啥离线下收不到推送消息
2019-05-15 21:06
正儿八经吃豆腐

正儿八经吃豆腐

回复 DCloud_heavensoft:
哦哦好的谢谢
2019-04-04 08:52
DCloud_heavensoft

DCloud_heavensoft

回复 正儿八经吃豆腐:
文章正文底部
2019-04-03 23:01
正儿八经吃豆腐

正儿八经吃豆腐

详细的示例代码,请下载附件查看。 附件在哪呢?
2019-04-03 10:08
Geeker

Geeker

一么呀一么呀一么呀一
2019-03-25 09:51
377313813@qq.com

377313813@qq.com

123321
2019-03-22 18:10