uniapp推送消息-跳转指定页面篇

Carpediem
2,743 阅读2分钟

前言

项目需要实现一个告警App，报警信息需要及时推送到相关业务人员。所以选择了uniApp自带的UniPush1.0（个推服务）。怎么实现开通和实现推送功能可以参考官方文档：ask.dcloud.net.cn/article/357…。 本文实现的前提是自己已经实现了在线推送功能

需求描述

点击通知栏推送的消息，跳转到指定页面。页面包含三种，

  1. 跳外链纯网址形式形如：www.baidu.com
  2. 跳到本身App内某一页面
  3. 跳到小程序页面(需要企业级小程序 因为需要URLScheme，URLLink但它们仅针对非个人主体小程序开放)

技术实现

1. 实现跳外链形式

这个比较简单点，可以借助uniapp开发者中心中的unipush模块来实现。在Android配置后续动作中选择第三方链接输入相应的网址就行

image.png

输入相应的内容点击预览

image.png

效果如下：

291248c413650aa0ddf34f09a79f0ec.jpg869585c8ed39cdaea92f23504800c99.jpg

2. 实现跳转本身App某一指定页

在uniapp开发者中心中的unipush模块中，在Android配置后续动作中选择打开应用内特定页面

image.png

这里踩大坑了 (此段不能实现 可以参考 想看怎么实现的 在下边)

因为需要填intent:协议。咱是搞前端开发的，对原生的东西根本一窍不通，只能学了。 于是按照官方文档学学学docs.getui.com/getui/mobil…

这是自己学到的intent的东西 image.png

还需要新建个AndroidManifest.xml因为uniapp项目中本身就没这个文件。AndroidManifest.xml还得遵照一定的规则，这里还请教了前安卓同事

代码如下

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 
  package="uni.XXXXXX">
    <!--permissions-->
    <!-- <application>
        <meta-data android:name="My_Custom_Key" android:value="My_Custom_Value"/>
    </application> -->

    <activity android:name=".PushActivity"
        android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                    <data
                        android:host="com.getui.push"
                        android:path="/wakeUp"
                        android:scheme="coalSafety" />
            </intent-filter>
    </activity>
</manifest>

pages.json文件

{
        "path": "pages/me/index",
        "style": {
                "navigationBarTitleText": "我的",
                "navigationBarBackgroundColor": "#fff",
                "navigationBarTextStyle": "black" 
        },
        "alias": "/wakeUp"
},

manifest.json

image.png

这是我配置的 intent://com.getui.push/wakeUp?#Intent;scheme=coalSafety;launchFlags=0x4000000;package=uni.XXX;component=uni.XXX/uni.XXX.PushActivity;S.payload=payloadStr;S.gttask=;end 配置完毕以为就能唤起App指定页面了，可是结果连推送消息都收不到。定位问题就是这个intent有问题，于是找人，搜资料，最后还是问到了个推的技术支持，最后是这样实现的。

正确实现方式

要认真看文档 uniapp实现不是楼上那样的，那个是原生的方式。实现思路：点击推送消息之后 在回调里解析自己传的参数 然后拿参数做相应的路径跳转

ask.dcloud.net.cn/article/356…

image.png

最终的intent应该是这样的

intent://io.dcloud.unipush/?#Intent;scheme=unipush;launchFlags=0x4000000;component=io.dcloud.HBuilder/io.dcloud.PandoraEntry;S.UP-OL-SU=true;S.title=测试标题;S.content=测试内容;S.payload=test;end

js实现拿推送消息参数 在App.vue文件下onLaunch周期内添加

// 点击推送信息
plus.push.addEventListener('click', res => {
    // 在这里就可以根据你自己的业务去写
    const url = res.payload // 跳转app内指定页面
    uni.showModal({
        content: res.payload
    })
    if (url) {
        uni.navigateTo({
            url: '/pages/me/index'
        })
    }
})

配置好intent和js代码效果如下： 点击推送 跳转到我的页面也不是首页

407f1d4dddc74250fb1221fd4a3d4f2.jpga1922946c25c2cdb73e24a7e93f8b8c.jpg

avatar
文章
阅读
粉丝