本篇内容主要讲解“区分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跳转快应用的来源渠道的方法教程”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。