鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）上篇
时间：2024-04-26 19:10:32 来源：网络cs 作者：欧阳逸 栏目：卖家故事 阅读：
提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。示例效果请以真机运行为准，当前IDE预览器不支持。
需要权限
访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。
子组件
无
接口
Web(options: { src: ResourceStr, controller: WebviewController | WebController, incognitoMode? : boolean})
说明：
不支持转场动画。 同一页面的多个web组件，必须绑定不同的WebviewController。
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| src | ResourceStr | 是 | 网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。 |
| controller | WebviewController9+ | WebController | 是 | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
| incognitoMode11+ | boolean | 否 | 表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview, false表示创建正常模式的webview。 默认值：false |
示例：
加载在线网页。
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) } }}隐私模式Webview加载在线网页。
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true }) } }}加载本地网页。
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { // 通过$rawfile加载本地资源文件。 Web({ src: $rawfile("index.html"), controller: this.controller }) } }}// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { // 通过resource协议加载本地资源文件。 Web({ src: "resource://rawfile/index.html", controller: this.controller }) } }}加载沙箱路径下的本地资源文件。
通过构造的单例对象GlobalContext获取沙箱路径。
// GlobalContext.tsexport 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.etsimport web_webview from '@ohos.web.webview'import { GlobalContext } from '../GlobalContext'let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { // 加载沙箱路径文件。 Web({ src: url, controller: this.controller }) } }}
修改EntryAbility.ts。
以filesDir为例，获取沙箱路径。若想获取其他路径，请参考应用文件路径。
// xxx.tsimport UIAbility from '@ohos.app.ability.UIAbility';import AbilityConstant from '@ohos.app.ability.AbilityConstant';import Want from '@ohos.app.ability.Want';import web_webview from '@ohos.web.webview';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>属性
通用属性仅支持aspectRatio、backdropBlur、backgroundColor、bindContentCover、bindContextMenu、bindMenu 、bindSheet、borderColor、borderRadius、borderStyle、borderWidth、clip、constraintSize、defaultFocus、focusable、tabIndex、groupDefaultFocus、focusOnTouch、displayPriority、enabled、flexBasis、flexGrow、flexShrink、layoutWeight、id、gridOffset、gridSpan、useSizeType、height、touchable、margin、markAnchor、offset、width、zIndex、visibility、scale、transform、responseRegion、size、stateStyles、opacity、shadow、sharedTransition、transition。
domStorageAccess
domStorageAccess(domStorageAccess: boolean)
设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
系统能力： SystemCapability.Web.Webview.Core
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| domStorageAccess | boolean | 是 | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .domStorageAccess(true) } }}fileAccess
fileAccess(fileAccess: boolean)
设置是否开启应用中文件系统的访问，默认启用。$rawfile(filepath/filename)中rawfile路径的文件不受该属性影响而限制访问。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| fileAccess | boolean | 是 | true | 设置是否开启应用中文件系统的访问，默认启用。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .fileAccess(true) } }}imageAccess
imageAccess(imageAccess: boolean)
设置是否允许自动加载图片资源，默认允许。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| imageAccess | boolean | 是 | true | 设置是否允许自动加载图片资源。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .imageAccess(true) } }}javaScriptProxy
javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>, controller: WebviewController | WebController})
注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy9+。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| methodList | Array<string> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
| controller | WebviewController9+ | WebController | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'class TestObj { constructor() { } test(data1: string, data2: string, data3: string): string { console.log("data1:" + data1) console.log("data2:" + data2) console.log("data3:" + data3) return "AceString" } toString(): void { console.log('toString' + "interface instead.") }}@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() testObj = new TestObj(); build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .javaScriptAccess(true) .javaScriptProxy({ object: this.testObj, name: "objName", methodList: ["test", "toString"], controller: this.controller, }) } }}javaScriptAccess
javaScriptAccess(javaScriptAccess: boolean)
设置是否允许执行JavaScript脚本，默认允许执行。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| javaScriptAccess | boolean | 是 | true | 是否允许执行JavaScript脚本。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .javaScriptAccess(true) } }}overScrollMode11+
overScrollMode(mode: OverScrollMode)
设置Web过滚动模式，默认关闭。当过滚动模式开启时，当用户在Web界面上滑动到边缘时，Web会通过弹性动画弹回界面。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| mode | OverScrollMode | 是 | OverScrollMode.NEVER | 设置Web的过滚动模式为关闭或开启。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: OverScrollMode = OverScrollMode.ALWAYS build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .overScrollMode(this.mode) } }}mixedMode
mixedMode(mixedMode: MixedMode)
设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| mixedMode | MixedMode | 是 | MixedMode.None | 要设置的混合内容。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: MixedMode = MixedMode.All build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .mixedMode(this.mode) } }}onlineImageAccess
onlineImageAccess(onlineImageAccess: boolean)
设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| onlineImageAccess | boolean | 是 | true | 设置是否允许从网络加载图片资源。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .onlineImageAccess(true) } }}zoomAccess
zoomAccess(zoomAccess: boolean)
设置是否支持手势进行缩放，默认允许执行缩放。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| zoomAccess | boolean | 是 | true | 设置是否支持手势进行缩放。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .zoomAccess(true) } }}overviewModeAccess
overviewModeAccess(overviewModeAccess: boolean)
设置是否使用概览模式加载网页，默认使用该方式。当前仅支持移动设备。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| overviewModeAccess | boolean | 是 | true | 设置是否使用概览模式加载网页。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .overviewModeAccess(true) } }}databaseAccess
databaseAccess(databaseAccess: boolean)
设置是否开启数据库存储API权限，默认不开启。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| databaseAccess | boolean | 是 | false | 设置是否开启数据库存储API权限。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .databaseAccess(true) } }}geolocationAccess
geolocationAccess(geolocationAccess: boolean)
设置是否开启获取地理位置权限，默认开启。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| geolocationAccess | boolean | 是 | true | 设置是否开启获取地理位置权限。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .geolocationAccess(true) } }}mediaPlayGestureAccess
mediaPlayGestureAccess(access: boolean)
设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| access | boolean | 是 | true | 设置有声视频播放是否需要用户手动点击。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State access: boolean = true build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .mediaPlayGestureAccess(this.access) } }}multiWindowAccess9+
multiWindowAccess(multiWindow: boolean)
设置是否开启多窗口权限，默认不开启。 使能多窗口权限时，需要实现onWindowNew事件，示例代码参考onWindowNew事件。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| multiWindow | boolean | 是 | false | 设置是否开启多窗口权限。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .multiWindowAccess(false) } }}horizontalScrollBarAccess9+
horizontalScrollBarAccess(horizontalScrollBar: boolean)
设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| horizontalScrollBar | boolean | 是 | true | 设置是否显示横向滚动条。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: $rawfile('index.html'), controller: this.controller }) .horizontalScrollBarAccess(true) } }}加载的html文件。
<!--index.html--><!DOCTYPE html><html><head> <title>Demo</title> <style> body { width:3000px; height:3000px; padding-right:170px; padding-left:170px; border:5px solid blueviolet } </style></head><body>Scroll Test</body></html>verticalScrollBarAccess9+
verticalScrollBarAccess(verticalScrollBar: boolean)
设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| verticalScrollBar | boolean | 是 | true | 设置是否显示纵向滚动条。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: $rawfile('index.html'), controller: this.controller }) .verticalScrollBarAccess(true) } }}加载的html文件。
<!--index.html--><!DOCTYPE html><html><head> <title>Demo</title> <style> body { width:3000px; height:3000px; padding-right:170px; padding-left:170px; border:5px solid blueviolet } </style></head><body>Scroll Test</body></html>password(deprecated)
password(password: boolean)
设置是否应保存密码。该接口为空接口。
说明：
从API version 10开始废弃，并且不再提供新的接口作为替代。
cacheMode
cacheMode(cacheMode: CacheMode)
设置缓存模式。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| cacheMode | CacheMode | 是 | CacheMode.Default | 要设置的缓存模式。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: CacheMode = CacheMode.None build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .cacheMode(this.mode) } }}copyOptions11+
copyOptions(value: CopyOptions)
设置剪贴板复制范围选项。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| value | CopyOptions | 是 | CopyOptions.Cross_Device | 要设置的剪贴板复制范围选项。 |
示例：
import web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .copyOptions(CopyOptions.None) }}}textZoomAtio(deprecated)
textZoomAtio(textZoomAtio: number)
设置页面的文本缩放百分比，默认为100%。
从API version 9开始不再维护，建议使用textZoomRatio9+代替。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| textZoomAtio | number | 是 | 100 | 要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。 |
示例：
// xxx.ets@Entry@Componentstruct WebComponent { controller: WebController = new WebController() @State atio: number = 150 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .textZoomAtio(this.atio) } }}textZoomRatio9+
textZoomRatio(textZoomRatio: number)
设置页面的文本缩放百分比，默认为100%。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| textZoomRatio | number | 是 | 100 | 要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State atio: number = 150 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .textZoomRatio(this.atio) } }}initialScale9+
initialScale(percent: number)
设置整体页面的缩放百分比，默认为100。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| percent | number | 是 | 100 | 要设置的整体页面的缩放百分比。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State percent: number = 100 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .initialScale(this.percent) } }}userAgent(deprecated)
userAgent(userAgent: string)
设置用户代理。
说明：
从API version 8开始支持，从API version 10开始废弃。建议使用setCustomUserAgent10+替代。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| userAgent | string | 是 | - | 要设置的用户代理。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36' build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .userAgent(this.userAgent) } }}blockNetwork9+
blockNetwork(block: boolean)
设置Web组件是否阻止从网络加载资源。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| block | boolean | 是 | false | 设置Web组件是否阻止从网络加载资源。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State block: boolean = true build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .blockNetwork(this.block) } }}defaultFixedFontSize9+
defaultFixedFontSize(size: number)
设置网页的默认等宽字体大小。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| size | number | 是 | 13 | 设置网页的默认等宽字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State fontSize: number = 16 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .defaultFixedFontSize(this.fontSize) } }}defaultFontSize9+
defaultFontSize(size: number)
设置网页的默认字体大小。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| size | number | 是 | 16 | 设置网页的默认字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State fontSize: number = 13 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .defaultFontSize(this.fontSize) } }}minFontSize9+
minFontSize(size: number)
设置网页字体大小最小值。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| size | number | 是 | 8 | 设置网页字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State fontSize: number = 13 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .minFontSize(this.fontSize) } }}minLogicalFontSize9+
minLogicalFontSize(size: number)
设置网页逻辑字体大小最小值。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| size | number | 是 | 8 | 设置网页逻辑字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State fontSize: number = 13 build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .minLogicalFontSize(this.fontSize) } }}webFixedFont9+
webFixedFont(family: string)
设置网页的fixed font字体库。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| family | string | 是 | monospace | 设置网页的fixed font字体库。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State family: string = "monospace" build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .webFixedFont(this.family) } }}webSansSerifFont9+
webSansSerifFont(family: string)
设置网页的sans serif font字体库。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| family | string | 是 | sans-serif | 设置网页的sans serif font字体库。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State family: string = "sans-serif" build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .webSansSerifFont(this.family) } }}webSerifFont9+
webSerifFont(family: string)
设置网页的serif font字体库。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| family | string | 是 | serif | 设置网页的serif font字体库。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State family: string = "serif" build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .webSerifFont(this.family) } }}webStandardFont9+
webStandardFont(family: string)
设置网页的standard font字体库。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| family | string | 是 | sans serif | 设置网页的standard font字体库。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State family: string = "sans-serif" build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .webStandardFont(this.family) } }}webFantasyFont9+
webFantasyFont(family: string)
设置网页的fantasy font字体库。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| family | string | 是 | fantasy | 设置网页的fantasy font字体库。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State family: string = "fantasy" build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .webFantasyFont(this.family) } }}webCursiveFont9+
webCursiveFont(family: string)
设置网页的cursive font字体库。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| family | string | 是 | cursive | 设置网页的cursive font字体库。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State family: string = "cursive" build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .webCursiveFont(this.family) } }}darkMode9+
darkMode(mode: WebDarkMode)
设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合forceDarkAccess使用。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| mode | WebDarkMode | 是 | WebDarkMode.Off | 设置Web的深色模式为关闭、开启或跟随系统。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: WebDarkMode = WebDarkMode.On build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .darkMode(this.mode) } }}forceDarkAccess9+
forceDarkAccess(access: boolean)
设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| access | boolean | 是 | false | 设置网页是否开启强制深色模式。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: WebDarkMode = WebDarkMode.On @State access: boolean = true build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .darkMode(this.mode) .forceDarkAccess(this.access) } }}tableData(deprecated)
tableData(tableData: boolean)
设置是否应保存表单数据。该接口为空接口。
说明：
从API version 10开始废弃，并且不再提供新的接口作为替代。
wideViewModeAccess(deprecated)
wideViewModeAccess(wideViewModeAccess: boolean)
设置web是否支持html中meta标签的viewport属性。该接口为空接口。
说明：
从API version 10开始废弃，并且不再提供新的接口作为替代。
pinchSmooth9+
pinchSmooth(isEnabled: boolean)
设置网页是否开启捏合流畅模式，默认不开启。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| isEnabled | boolean | 是 | false | 网页是否开启捏合流畅模式。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .pinchSmooth(true) } }}allowWindowOpenMethod10+
allowWindowOpenMethod(flag: boolean)
设置网页是否可以通过JavaScript自动打开新窗口。
该属性为true时，可通过JavaScript自动打开新窗口。该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。此处的用户行为是指用户在5秒内请求打开新窗口（window.open）。
该属性仅在javaScriptAccess开启时生效。
该属性在multiWindowAccess开启时打开新窗口，关闭时打开本地窗口。
该属性的默认值与系统属性persist.web.allowWindowOpenMethod.enabled 保持一致，如果未设置系统属性则默认值为false。
检查系统配置项persist.web.allowWindowOpenMethod.enabled 是否开启。
通过hdc shell param get persist.web.allowWindowOpenMethod.enabled 查看，若配置项为0或不存在， 可通过命令hdc shell param set persist.web.allowWindowOpenMethod.enabled 1 开启配置。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| flag | boolean | 是 | 默认值与系统参数关联，当系统参数persist.web.allowWindowOpenMethod.enabled为true时，默认值为true, 否则为false | 网页是否可以通过JavaScript自动打开窗口。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。@CustomDialogstruct NewWebViewComp {controller?: CustomDialogControllerwebviewController1: web_webview.WebviewController = new web_webview.WebviewController()build() { Column() { Web({ src: "", controller: this.webviewController1 }) .javaScriptAccess(true) .multiWindowAccess(false) .onWindowExit(()=> { console.info("NewWebViewComp onWindowExit") if (this.controller) { this.controller.close() } }) } }}@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() dialogController: CustomDialogController | null = null build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .javaScriptAccess(true) //需要使能multiWindowAccess .multiWindowAccess(true) .allowWindowOpenMethod(true) .onWindowNew((event) => { if (this.dialogController) { this.dialogController.close() } let popController:web_webview.WebviewController = new web_webview.WebviewController() this.dialogController = new CustomDialogController({ builder: NewWebViewComp({webviewController1: popController}) }) this.dialogController.open() //将新窗口对应WebviewController返回给Web内核。 //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。 //若不调用event.handler.setWebController接口，会造成render进程阻塞。 event.handler.setWebController(popController) }) } }}mediaOptions10+
mediaOptions(options: WebMediaOptions)
设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。
说明：
同一Web实例中的多个音频均视为同一音频。该媒体播放策略将同时管控有声视频。属性参数更新后需重新播放音频方可生效。建议为所有Web组件设置相同的audioExclusive值。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| options | WebMediaOptions | 是 | {resumeInterval: 0, audioExclusive: true} | 设置Web的媒体策略。其中，resumeInterval的默认值为0表示不自动续播。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true} build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .mediaOptions(this.options) } }}javaScriptOnDocumentStart11+
javaScriptOnDocumentStart(scripts: Array<ScriptItem>)
将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。
说明：
该脚本将在页面的任何JavaScript代码之前运行，并且DOM树此时可能尚未加载、渲染完毕。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| scripts | Array<ScriptItem> | 是 | - | 需要注入的的ScriptItem数组 |
ets示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct Index { controller: web_webview.WebviewController = new web_webview.WebviewController() private localStorage: string = "if (typeof(Storage) !== 'undefined') {" + " localStorage.setItem('color', 'Red');" + "}"; @State scripts: Array<ScriptItem> = [ { script: this.localStorage, scriptRules: ["*"] } ]; build() { Column({ space: 20 }) { Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) .domStorageAccess(true) .backgroundColor(Color.Grey) .javaScriptOnDocumentStart(this.scripts) .width('100%') .height('100%') } }}HTML示例：
<!-- index.html --><!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'> Hello world! <div id="result"></div> </body> <script type="text/javascript"> function bodyOnLoadLocalStorage() { if (typeof(Storage) !== 'undefined') { document.getElementById('result').innerHTML = localStorage.getItem('color'); } else { document.getElementById('result').innerHTML = 'Your browser does not support localStorage.'; } } </script></html>layoutMode11+
layoutMode(mode: WebLayoutMode)
设置Web布局模式。
说明：
目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局WebLayoutMode.FIT_CONTENT。默认为WebLayoutMode.NONE模式。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| mode | WebLayoutMode | 是 | WebLayoutMode.NONE | 设置web布局模式，跟随系统或自适应布局。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: WebLayoutMode = WebLayoutMode.FIT_CONTENT build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .layoutMode(this.mode) } }}nestedScroll11+
nestedScroll(value: NestedScrollOptions)
调用以设置嵌套滚动选项。
说明：
设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。支持设置不同的向前向后两个方向上的嵌套滚动模式。默认scrollForward和scrollBackward模式为NestedScrollMode.SELF_FIRST。
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| value | NestedScrollOptions | 是 | 可滚动组件滚动时的嵌套滚动选项。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .nestedScroll({ scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST, }) } }}enableNativeEmbedMode11+
enableNativeEmbedMode(mode: boolean)
设置是否开启同层渲染功能，默认不开启。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| mode | boolean | 是 | false | 是否开启同层渲染功能。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .enableNativeEmbedMode(true) } }}事件
通用事件仅支持onAppear、onDisAppear、onBlur、onFocus、onDragEnd、onDragEnter、onDragStart、onDragMove、onDragLeave、onDrop、onHover、onMouse、onKeyEvent、onTouch、onVisibleAreaChange。
onAlert
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页触发alert()告警弹窗时触发回调。
参数：
| 参数名 | 参数类型 | 参数描述 |
|---|---|---|
| url | string | 当前显示弹窗所在网页的URL。 |
| message | string | 弹窗中显示的信息。 |
| result | JsResult | 通知Web组件用户操作行为。 |
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。 |
示例：
// xxx.etsimport web_webview from '@ohos.web.webview'@Entry@Componentstruct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: $rawfile("index.html"), controller: this.controller }) .onAlert((event) => { if (event) { console.log("event.url:" + event.url) console.log("event.message:" + event.message) AlertDialog.show({ title: 'onAlert', message: 'text', primaryButton: { value: 'cancel', action: () => { event.result.handleCancel() } }, secondaryButton: { value: 'ok', action: () => { event.result.handleConfirm() } }, cancel: () => { event.result.handleCancel() } }) } return true }) } }}加载的html文件。
<!--index.html--><!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"></head><body> <h1>WebView onAlert Demo</h1> <button onclick="myFunction()">Click here</button> <script> function myFunction() { alert("Hello World"); } </script></body></html>最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。
这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。
希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（Harmony NEXT）最新学习路线
HarmonOS基础技能
HarmonOS多媒体技术 
实战就业级设备开发 
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》
《鸿蒙生态应用开发V2.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
ArkTS语言安装DevEco Studio运用你的第一个ArkTS应用ArkUI声明式UI开发.……
《鸿蒙开发进阶》
Stage模型入门网络管理数据管理电话服务分布式应用开发通知与窗口管理多媒体技术安全技能任务管理WebGL国际化开发应用测试DFX面向未来设计鸿蒙系统移植和裁剪定制……
《鸿蒙进阶实战》
ArkTS实践UIAbility应用网络案例……
获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。
本文链接：https://www.kjpai.cn/gushi/2024-04-26/162670.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
下一篇：返回列表