方法一：鸿蒙根据url访问显示本地的html原生网页
前置准备：
提供具有网页显示能力的Web组件，引入头文件import { webview } from '@kit.ArkWeb';
注意本地index.html文件放到rawfile文件夹下
index.html文件示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的 HTML 页面</title>
</head>
<body>
<h1>欢迎来到我的简单页面</h1>
<p>这是一个简单的 HTML 页面示例，展示了基本的 HTML 结构。</p>
<a href="https://www.example.com">访问示例网站</a>
</body>
</html>
实现效果：
编辑
ets效果实现示例代码如下：（含代码详细讲解）
// 从 '@kit.ArkWeb' 模块中导入 webview 对象
import { webview } from '@kit.ArkWeb'
@Entry
@Component
struct Lianxi {
// 创建一个 webview.WebviewController 实例，用于控制 Web 视图
// webview.WebviewController 可以用来管理 Web 内容的加载、交互等操作
webViewController: webview.WebviewController = new webview.WebviewController()
build() {
Column() {
Web({
// src 属性指定要加载的 Web 内容的源文件
// $rawfile('index.html') 表示使用名为 'index.html' 的原始文件作为 Web 内容
src: $rawfile('index.html'),
// controller 属性关联之前创建的 webview.WebviewController 实例
// 这样可以通过该控制器对 Web 内容进行控制
controller: this.webViewController
})
}
}
}
效果实现了，是不是很神奇，但是点击a标签访问示例网站（外部），发现不能跳转外部网站，这该如何实现呢，请看第方法二，添加网络权限。
方法二：访问在线网页
前置准备：添加网络权限：ohos.permission.INTERNET，在main目录的module.json5文件中，在module下添加下面代码获取网络权限
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
然后回到方法一，发现a标签可以访问到示例网站（外部）了
通过Web实现访问外部网站，示例代码如下：
// 从 '@kit.ArkWeb' 模块中导入 webview 对象
import { webview } from '@kit.ArkWeb'
@Entry
@Component
struct Lianxi {
// 创建一个 webview.WebviewController 实例，用于控制 Web 视图
// webview.WebviewController 可以用来管理 Web 内容的加载、交互等操作
webViewController: webview.WebviewController = new webview.WebviewController()
build() {
Column() {
Web({
// src 属性指定要加载的 Web 内容的源文件
// 'https://www.example.com/'为我们要访问的外部网站
src: 'https://www.example.com/',
// controller 属性关联之前创建的 webview.WebviewController 实例
// 这样可以通过该控制器对 Web 内容进行控制
controller: this.webViewController
})
}
}
}
大家看到了把，获取了网络权限后，只需要将Web中src改为外部网站，就能在模拟器app中显示外部网站了。
编辑
适用HarmonyOS NEXT / API12或以上版本
