鸿蒙HarmonyOS实战-Web组件（页面跳转和浏览记录）_鸿蒙跳转浏览器

最新推荐文章于 2024-09-06 20:22:42 发布

2401_84851371

最新推荐文章于 2024-09-06 20:22:42 发布

阅读量978

点赞数 28

分类专栏：程序员文章标签：鸿蒙面试学习

本文链接：https://blog.csdn.net/2401_84851371/article/details/138734301

版权

程序员专栏收录该内容

110 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Web页面跳转是指在一个网页上点击链接后，自动跳转到另外一个网页的过程。这个过程主要是通过超链接实现的。

1、index.ets

// index.ets
import web_webview from ‘@ohos.web.webview’;
import router from ‘@ohos.router’;
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();

build() {
Column() {
Web({ src: $rawfile(‘local.html’), controller: this.webviewController })
.onUrlLoadIntercept((event) => {
let url: string = event.data as string;
if (url.indexOf(‘native://’) === 0) {
// 跳转其他界面
router.pushUrl({ url:url.substring(9) })
return true;
}
return false;
})
}
}
}

2、前端页面代码

个人中心

3、ProfilePage.ets

@Entry
@Component
struct ProfilePage {
@State message: string = ‘Hello World’;

build() {
Column() {
Text(this.message)
.fontSize(20)
}
}
}

在这里插入图片描述

3.跨应用跳转

跨应用跳转是指从一个应用程序跳转到另一个应用程序。这种跳转通常通过链接或特定的 API 调用实现。例如，你可以在一个应用程序中点击一个链接，然后跳转到另一个应用程序中的指定页面。跨应用跳转可以提供更好的用户体验和无缝的应用集成。

// xxx.ets
import web_webview from ‘@ohos.web.webview’;
import call from ‘@ohos.telephony.call’;

@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();

build() {
Column() {
Web({ src: $rawfile(‘local.html’), controller: this.webviewController})
.onUrlLoadIntercept((event) => {
let url: string = event.data as string;
// 判断链接是否为拨号链接
if (url.indexOf(‘tel://’) === 0) {
// 跳转拨号界面
call.makeCall(url.substring(6), (err) => {
if (!err) {
console.info(‘make call succeeded.’);
} else {
console.info(‘make call fail, err is:’ + JSON.stringify(err));
}
});
return true;
}
return false;
})
}
}
}