#鸿蒙通关秘籍#如何通过Web组件拦截Deep Linking链接并实现跳转?

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
紫气东来EPC

使用鸿蒙的Web组件时,通过在onLoadIntercept回调中检测及拦截Deep Linking链接,来实现应用跳转。代码如下:

typescript // index.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { common } from '@kit.AbilityKit';

@Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController();

build() { Column() { Web({ src: $rawfile('index.html'), controller: this.controller }) .onLoadIntercept((event) => { const url: string = event.data.getRequestUrl(); if (url === 'link://www.example.com') { (getContext() as common.UIAbilityContext).openLink(url) .then(() => { console.log('openLink success'); }).catch((err: BusinessError) => { console.error('openLink failed, err:' + JSON.stringify(err)); }); return true; } return false; }) } } }

前端页面代码:

html <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Hello World</h1> <button class="doOpenLink" onclick="doOpenLink()">跳转其他应用一</button> <a href="link://www.example.com">跳转其他应用二</a> </body> </html> <script> function doOpenLink() { window.open("link://www.example.com") } </script>

通过这种方式可以实现Web页面内跳转至其他应用。

分享
微博
QQ
微信
回复
3天前
相关问题
Web拦截不到vue的router跳转
1536浏览 • 0回复 待解决
HarmonyOS web组件怎么拦截请求
537浏览 • 1回复 待解决