组件描述
提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。
说明：
- 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
- 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。
需要权限
访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。
子组件
无
接口
Web(value: WebOptions)
说明：
不支持转场动画。
同一页面的多个Web组件，必须绑定不同的WebviewController。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | WebOptions | 是 | 定义Web选项。 |
示例：
加载在线网页。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
隐私模式Webview加载在线网页。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
}
}
}
Web组件同步渲染模式。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
}
}
}
Web组件指定共享渲染进程。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller, sharedRenderProcessToken: "111" })
Web({ src: 'www.w3.org', controller: this.controller, sharedRenderProcessToken: "111" })
}
}
}
加载本地网页。
通过$rawfile方式加载。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
// 通过$rawfile加载本地资源文件。
Web({ src: $rawfile("index.html"), controller: this.controller })
}
}
}
通过resources协议加载，适用Webview加载带有"#"路由的链接。
使用 resource://rawfile/ 协议前缀可以避免常规 $rawfile 方式在处理带有"#"路由链接时的局限性。当URL中包含"#"号时，"#"后面的内容会被视为锚点（fragment）。
// xxx.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
// 通过resource协议加载本地资源文件。
Web({ src: "resource://rawfile/index.html#home", controller: this.controller })
}
}
}
在“src\main\resources\rawfile”文件夹下创建index.html：
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<script>
function loadContent() {
var hash = window.location.hash;
var contentDiv = document.getElementById('content');
if (hash === '#home') {
contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
} else {
contentDiv.innerHTML = '<h1>Default Page</h1><p>This is the default content.</p>';
}
}
// 加载界面
window.addEventListener('load', loadContent);
// 当hash变化时，更新界面
window.addEventListener('hashchange', loadContent);
</script>
</body>
</html>
加载沙箱路径下的本地资源文件，需要开启应用中文件系统的访问fileAccess权限。
-
通过构造的单例对象GlobalContext获取沙箱路径。
// GlobalContext.ets export class GlobalContext { private constructor() {} private static instance: GlobalContext; private _objects = new Map<string, Object>(); public static getContext(): GlobalContext { if (!GlobalContext.instance) { GlobalContext.instance = new GlobalContext(); } return GlobalContext.instance; } getObject(value: string): Object|undefined { return this._objects.get(value); } setObject(key: string, objectClass: Object): void { this._objects.set(key, objectClass); } }// xxx.ets import { webview } from '@kit.ArkWeb'; import { GlobalContext } from '../GlobalContext'; let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { // 加载沙箱路径文件。 Web({ src: url, controller: this.controller }) .fileAccess(true) } } } -
修改EntryAbility.ets。
以filesDir为例，获取沙箱路径。若想获取其他路径，请参考应用文件路径。
// xxx.ets import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { webview } from '@kit.ArkWeb'; import { GlobalContext } from '../GlobalContext'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。 GlobalContext.getContext().setObject("filesDir", this.context.filesDir); console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir")); } }加载的html文件。
<!-- index.html --> <!DOCTYPE html> <html> <body> <p>Hello World</p> </body> </html>
你可能感兴趣的鸿蒙文章
harmony 鸿蒙ArkWeb_ControllerAPI
harmony 鸿蒙ArkWeb_CookieManagerAPI
harmony 鸿蒙ArkWeb_JavaScriptBridgeData
harmony 鸿蒙ArkWeb_JavaScriptObject