鸿蒙NEXT版实战开辟：管理页面跳转及欣赏记载导航

曹旭辉 · 2024-12-14 21:44:07

往期鸿蒙全套实战精彩文章必看内容：

鸿蒙开辟焦点知识点，看这篇文章就够了
最新版！鸿蒙HarmonyOS Next应用开辟实战学习路线
鸿蒙HarmonyOS NEXT开辟技能最全学习路线指南
鸿蒙应用开辟实战项目，看这一篇文章就够了（部分项目附源码）

管理页面跳转及欣赏记载导航

历史记载导航

在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目的网址。当前端页面更换为新的加载链接时，会自动记载已经访问的网页地址。可以通过forward()和backward()接口向前/向后欣赏上一个/下一个历史记载。
页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。
在下面的示例中，点击应用的按钮来触发前端页面的后退操作。

// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
if (this.webviewController.accessBackward()) {
this.webviewController.backward();
}
})
Web({ src: 'https://www.example.com/cn/', controller: this.webviewController })
}
}
}

复制代码

如果存在历史记载，accessBackward()接口会返回true。同样，您可以使用accessForward()接口检查是否存在前进的历史记载。如果您不实行检查，那么当用户欣赏到历史记载的末尾时，调用forward()和backward()接口时将不实行任何操作。
页面跳转

当点击网页中的链接需要跳转到应用内其他页面时，可以通过使用Web组件的onLoadIntercept()接口来实现。
在下面的示例中，应用首页Index.ets加载前端页面route.html，在前端route.html页面点击超链接，可跳转到应用的ProfilePage.ets页面。

应用首页Index.ets页面代码。
1. // index.ets
2. import { webview } from '@kit.ArkWeb';
3. import { router } from '@kit.ArkUI';
5. @Entry
6. @Component
7. struct WebComponent {
8. webviewController: webview.WebviewController = new webview.WebviewController();
10. build() {
11. Column() {
12. // 资源文件route.html存放路径src/main/resources/rawfile
13. Web({ src: $rawfile('route.html'), controller: this.webviewController })
14. .onLoadIntercept((event) => {
15. if (event) {
16. let url: string = event.data.getRequestUrl();
17. if (url.indexOf('native://') === 0) {
18. // 跳转其他界面
19. router.pushUrl({ url: url.substring(9) });
20. return true;
21. }
22. }
23. return false;
24. })
25. }
26. }
27. }
复制代码
route.html前端页面代码。
1. 
2. <!DOCTYPE html>
3. <html>
4. <body>
5. <div>
6. <a href="native://pages/ProfilePage">个人中心</a>
7. </div>
8. </body>
9. </html>
复制代码
跳转页面ProfilePage.ets代码。
1. @Entry
2. @Component
3. struct ProfilePage {
4. @State message: string = 'Hello World';
6. build() {
7. Column() {
8. Text(this.message)
9. .fontSize(20)
10. }
11. }
12. }
复制代码

跨应用跳转

Web组件可以实现点击前端页面超链接跳转到其他应用。
在下面的示例中，点击call.html前端页面中的超链接，跳转到电话应用的拨号界面。

应用侧代码。
1. // xxx.ets
2. import { webview } from '@kit.ArkWeb';
3. import { call } from '@kit.TelephonyKit';
5. @Entry
6. @Component
7. struct WebComponent {
8. webviewController: webview.WebviewController = new webview.WebviewController();
10. build() {
11. Column() {
12. Web({ src: $rawfile('call.html'), controller: this.webviewController })
13. .onLoadIntercept((event) => {
14. if (event) {
15. let url: string = event.data.getRequestUrl();
16. // 判断链接是否为拨号链接
17. if (url.indexOf('tel://') === 0) {
18. // 跳转拨号界面
19. call.makeCall(url.substring(6), (err) => {
20. if (!err) {
21. console.info('make call succeeded.');
22. } else {
23. console.info('make call fail, err is:' + JSON.stringify(err));
24. }
25. });
26. return true;
27. }
28. }
29. return false;
30. })
31. }
32. }
33. }
复制代码
前端页面call.html代码。
1. 
2. <!DOCTYPE html>
3. <html>
4. <body>
5. <div>
6. <a href="tel://xxx xxxx xxx">拨打电话</a>
7. </div>
8. </body>
9. </html>
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

鸿蒙NEXT版实战开辟：管理页面跳转及欣赏记载导航

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块