区分router.push跳转快应用的来源渠道的方法教程

本篇内容主要讲解“区分router.push跳转快应用的来源渠道的方法教程”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“区分router.push跳转快应用的来源渠道的方法教程”吧!

现象描述：

从一个快应用A跳转到B快应用的B1页面， A可能是一个快应用，也可能是负一屏的卡片，如何区分来自哪个呢？

解决方法：

快应用和卡片都是通过router.push接口来跳转其他快应用的，使用Deeplink中的hap链接来实现的，同时hap链接里是可以携带参数，在跳过去时加个flag参数，在B快应用的B1页面获取参数，根据参数值判断来源是负一屏的卡片还是快应用A，然后根据需要做相应的逻辑处理。快应用使用this.xx获取跳转携带的参数。

示例代码：

A快应用代码：

<template>
    <div>
        <text class="button" onclick="router">测试</text>
    </div>
</template>
<style>
    .button{
        width: 100%;
        height: 200px;
        color: #000000;
        font-size: 80px;
    }
</style>
<script>
    import router from '@system.router';
    module.exports = {
        data: {
            
        },
        onInit() {
            this.$page.setTitleBar({ text: '' })
        },
        router(){
            console.log("router");
            router.push({
                uri: 'hap://app/com.huawei.ceshi/Test?body=quickapp',//快应用参数
            })
        }
    }
</script>

卡片相关代码：

<template>
    <div>
        <text class="button" onclick="router">测试</text>
    </div>
</template>
<style>
    .button{
        width: 100%;
        height: 200px;
        color: #000000;
        font-size: 80px;
    }
</style>
<script>
    import router from '@system.router';
    module.exports = {
        data: {
            
        },
        onInit() {
            this.$page.setTitleBar({ text: '' })
        },
        router(){
            console.log("router");
            router.push({
                uri: 'hap://app/com.huawei.ceshi/Test?body=card',//卡片参数
            })
        }
    }
</script>

B快应用代码：

在onInit()生命周期方法中获取参数值，如下代码中定义了accept变量接收参数值，比如在onBackPress()方法中根据来源实现不同的业务逻辑。

<template>
    <div >
        <text class="text">下面是接收的数据</text>
        <text class="text" >{{accept}}</text>
    </div>
</template>
<style>
    .text {
        height: 80px;
        font-size: 50px;
        color: red;
        width: 500px;
    }
</style>
<script>
    import router from '@system.router';
    module.exports = {
        data: {
            accept: ""
        },
        onInit() {
            this.$page.setTitleBar({ text: '' })
            this.accept = this.body;
        },
        onBackPress() {
            if (this.accept === "quickapp") {
                console.log("this is quickapp");
            } else if (this.accept === "quickapp") {
                console.log("this is crad");
            }else{
                router.back()
            }
            return true;
        }
    }
</script>

到此，相信大家对“区分router.push跳转快应用的来源渠道的方法教程”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！