历史记录导航
使用者在前端页面点击网页中的链接时，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})
}
}
}如果存在历史记录，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;
})
}
}
}● route.html 前端页面代码。
<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
<div>
<a href="native://pages/ProfilePage">个人中心</a>
</div>
</body>
</html>● 跳转页面 ProfilePage.ets 代码。
@Entry
@Component
struct ProfilePage {
@State message: string = 'Hello World';
build() {
Column() {
Text(this.message)
.fontSize(20)
}
}
}跨应用跳转
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;
})
}
}
}● 前端页面 call.html 代码。
<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
<div>
<a href="tel://xxx xxxx xxx">拨打电话</a>
</div>
</body>
</html>最后
## 《鸿蒙零基础入门学习指南》
目录
一、快速入门
适用于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：数据懒加载
