HarmonyOS 管理页面跳转及浏览记录导航_harmonyos module.json5

作者：小丑西瓜9 | 2024-03-17 09:56:28

踩

harmonyos module.json5

历史记录导航

使用者在前端页面点击网页中的链接时，Web 组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。可以通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录。

在下面的示例中，点击应用的按钮来触发前端页面的后退操作。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
            return true;
          }
        })
      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

页面跳转

当点击网页中的链接需要跳转到应用内其他页面时，可以通过使用 Web 组件的onUrlLoadIntercept()接口来实现。

在下面的示例中，应用首页 Index.ets 加载前端页面 route.html，在前端 route.html 页面点击超链接，可跳转到应用的 ProfilePage.ets 页面。

● 应用首页 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('route.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;
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

● route.html 前端页面代码。

<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
      <a href="native://pages/ProfilePage">个人中心</a>
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

● 跳转页面 ProfilePage.ets 代码。

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

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

跨应用跳转

Web 组件可以实现点击前端页面超链接跳转到其他应用。

在下面的示例中，点击 call.html 前端页面中的超连接，跳转到电话应用的拨号界面。

● 应用侧代码。

// 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('xxx.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;
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

● 前端页面 call.html 代码。

<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
    <a href="tel://xxx xxxx xxx">拨打电话</a>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9

最后

这里整理了一份《鸿蒙零基础入门学习指南》，希望能对那些想要学习鸿蒙，但是有没有方向的人提供一点帮助。本文档适用于HarmonyOS应用开发的初学者（由于文档内容过多，因此为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的看文末有免费的获取方式！）

## 《鸿蒙零基础入门学习指南》

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

开发准备
- 基本概念
- 工具准备
构建第一个ArkTS应用（Stage模型）
构建第一个ArkTS应用（FA模型）
构建第一个JS应用（FA模型）

在这里插入图片描述

二、开发基础知识

应用程序包基础知识
- 应用程序包概述
- 应用程序包结构
- 应用程序包多HAP机制
- 应用程序包安装和卸载流程
- 应用程序包更新流程
- 共享包
- 应用程序包快速修复
应用配置文件（Stage模型）
- 应用配置文件概述（Stage模型）
- app.json5配置文件
- module.json5配置文件
应用配置文件概述（FA模型）
- 应用配置文件概述（FA模型）
- app对象内部结构
- deviceConfig内部结构
- module对象内部结构

在这里插入图片描述

三、资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

资源分类与访问
- 资源分类
- 资源目录
- 资源组目录
创建资源目录和资源文件
- 创建资源目录和资源文件
- 创建资源目录
- 创建资源文件
资源访问
- 应用资源
- 系统资源
- 资源匹配

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

初识ArkTS语言
基本语法
- 基本语法概述
- 声明式UI描述
- 自定义组件
状态管理
其他状态管理
- 其他状态管理概述
- @Watch装饰器：状态变量更改通知
- $$语法：内置组件双向同步
渲染控制
- 渲染控制概述
- if/else：条件渲染
- ForEach：循环渲染
- LazyForEach：数据懒加载

在这里插入图片描述

扫描下方二维码免费领取，《鸿蒙学习指南》

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/255425