网站开发策略,两学一做网站条幅,西宁好的网站建设公司,长沙网站外包提供具有网页显示能力的Web组件#xff0c;ohos.web.webview提供web控制能力。 说明#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容#xff0c;则采用上角标单独标记该内容的起始版本。示例效果请以真机运行为准#xff0c;当前IDE预览器不支持。 需要权…提供具有网页显示能力的Web组件ohos.web.webview提供web控制能力。 说明 该组件从API Version 8开始支持。后续版本如有新增内容则采用上角标单独标记该内容的起始版本。示例效果请以真机运行为准当前IDE预览器不支持。 需要权限
访问在线网页时需添加网络权限ohos.permission.INTERNET具体申请方式请参考声明权限。
子组件
无
接口
Web(options: { src: ResourceStr, controller: WebviewController | WebController, incognitoMode? : boolean}) 说明 不支持转场动画。 同一页面的多个web组件必须绑定不同的WebviewController。 参数
参数名参数类型必填参数描述srcResourceStr是网页资源地址。如果访问本地资源文件请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件请使用file://沙箱文件路径。controllerWebviewController9 | WebController是控制器。从API Version 9开始WebController不再维护建议使用WebviewController替代。incognitoMode11boolean否表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview, false表示创建正常模式的webview。 默认值false
示例
加载在线网页。
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {Web({ src: www.example.com, controller: this.controller })}}
}
隐私模式Webview加载在线网页。
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {Web({ src: www.example.com, controller: this.controller, incognitoMode: true })}}
}
加载本地网页。
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {// 通过$rawfile加载本地资源文件。Web({ src: $rawfile(index.html), controller: this.controller })}}
}
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {// 通过resource协议加载本地资源文件。Web({ src: resource://rawfile/index.html, controller: this.controller })}}
}
加载沙箱路径下的本地资源文件。 通过构造的单例对象GlobalContext获取沙箱路径。 // GlobalContext.ts
export class GlobalContext {private constructor() {}private static instance: GlobalContext;private _objects new Mapstring, 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 web_webview from ohos.web.webview
import { GlobalContext } from ../GlobalContextlet url file:// GlobalContext.getContext().getObject(filesDir) /index.htmlEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {// 加载沙箱路径文件。Web({ src: url, controller: this.controller })}}
} 修改EntryAbility.ts。 以filesDir为例获取沙箱路径。若想获取其他路径请参考应用文件路径。 // xxx.ts
import 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 ../GlobalContextexport 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
htmlbodypHello 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
参数
参数名参数类型必填默认值参数描述domStorageAccessboolean是false设置是否开启文档对象模型存储接口DOM Storage API权限。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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路径的文件不受该属性影响而限制访问。
参数
参数名参数类型必填默认值参数描述fileAccessboolean是true设置是否开启应用中文件系统的访问默认启用。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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)
设置是否允许自动加载图片资源默认允许。
参数
参数名参数类型必填默认值参数描述imageAccessboolean是true设置是否允许自动加载图片资源。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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: Arraystring, controller: WebviewController | WebController})
注入JavaScript对象到window对象中并在window对象中调用该对象的方法。所有参数不支持更新。此接口只支持注册一个对象若需要注册多个对象请使用registerJavaScriptProxy9。
参数
参数名参数类型必填默认值参数描述objectobject是-参与注册的对象。只能声明方法不能声明属性。namestring是-注册对象的名称与window中调用的对象名一致。methodListArraystring是-参与注册的应用侧JavaScript对象的方法。controllerWebviewController9 | WebController是-控制器。从API Version 9开始WebController不再维护建议使用WebviewController替代。
示例
// xxx.ets
import web_webview from ohos.web.webviewclass 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
Component
struct 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脚本默认允许执行。
参数
参数名参数类型必填默认值参数描述javaScriptAccessboolean是true是否允许执行JavaScript脚本。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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会通过弹性动画弹回界面。
参数
参数名参数类型必填默认值参数描述modeOverScrollMode是OverScrollMode.NEVER设置Web的过滚动模式为关闭或开启。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: OverScrollMode OverScrollMode.ALWAYSbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).overScrollMode(this.mode)}}
}
mixedMode
mixedMode(mixedMode: MixedMode)
设置是否允许加载超文本传输协议HTTP和超文本传输安全协议HTTPS混合内容默认不允许加载HTTP和HTTPS混合内容。
参数
参数名参数类型必填默认值参数描述mixedModeMixedMode是MixedMode.None要设置的混合内容。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: MixedMode MixedMode.Allbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).mixedMode(this.mode)}}
}
onlineImageAccess
onlineImageAccess(onlineImageAccess: boolean)
设置是否允许从网络加载图片资源通过HTTP和HTTPS访问的资源默认允许访问。
参数
参数名参数类型必填默认值参数描述onlineImageAccessboolean是true设置是否允许从网络加载图片资源。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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)
设置是否支持手势进行缩放默认允许执行缩放。
参数
参数名参数类型必填默认值参数描述zoomAccessboolean是true设置是否支持手势进行缩放。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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)
设置是否使用概览模式加载网页默认使用该方式。当前仅支持移动设备。
参数
参数名参数类型必填默认值参数描述overviewModeAccessboolean是true设置是否使用概览模式加载网页。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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权限默认不开启。
参数
参数名参数类型必填默认值参数描述databaseAccessboolean是false设置是否开启数据库存储API权限。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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)
设置是否开启获取地理位置权限默认开启。
参数
参数名参数类型必填默认值参数描述geolocationAccessboolean是true设置是否开启获取地理位置权限。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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)
设置有声视频播放是否需要用户手动点击静音视频播放不受该接口管控默认需要。
参数
参数名参数类型必填默认值参数描述accessboolean是true设置有声视频播放是否需要用户手动点击。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State access: boolean truebuild() {Column() {Web({ src: www.example.com, controller: this.controller }).mediaPlayGestureAccess(this.access)}}
}
multiWindowAccess9
multiWindowAccess(multiWindow: boolean)
设置是否开启多窗口权限默认不开启。 使能多窗口权限时需要实现onWindowNew事件示例代码参考onWindowNew事件。
参数
参数名参数类型必填默认值参数描述multiWindowboolean是false设置是否开启多窗口权限。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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)
设置是否显示横向滚动条包括系统默认滚动条和用户自定义滚动条。默认显示。
参数
参数名参数类型必填默认值参数描述horizontalScrollBarboolean是true设置是否显示横向滚动条。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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
headtitleDemo/titlestylebody {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)
设置是否显示纵向滚动条包括系统默认滚动条和用户自定义滚动条。默认显示。
参数
参数名参数类型必填默认值参数描述verticalScrollBarboolean是true设置是否显示纵向滚动条。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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
headtitleDemo/titlestylebody {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)
设置缓存模式。
参数
参数名参数类型必填默认值参数描述cacheModeCacheMode是CacheMode.Default要设置的缓存模式。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: CacheMode CacheMode.Nonebuild() {Column() {Web({ src: www.example.com, controller: this.controller }).cacheMode(this.mode)}}
}
copyOptions11
copyOptions(value: CopyOptions)
设置剪贴板复制范围选项。
参数
参数名参数类型必填默认值参数描述valueCopyOptions是CopyOptions.Cross_Device要设置的剪贴板复制范围选项。
示例
import web_webview from ohos.web.webviewEntry
Component
struct 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代替。
参数
参数名参数类型必填默认值参数描述textZoomAtionumber是100要设置的页面的文本缩放百分比。取值为整数范围为(0, ∞)。
示例
// xxx.ets
Entry
Component
struct WebComponent {controller: WebController new WebController()State atio: number 150build() {Column() {Web({ src: www.example.com, controller: this.controller }).textZoomAtio(this.atio)}}
}
textZoomRatio9
textZoomRatio(textZoomRatio: number)
设置页面的文本缩放百分比默认为100%。
参数
参数名参数类型必填默认值参数描述textZoomRationumber是100要设置的页面的文本缩放百分比。取值为整数范围为(0, ∞)。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State atio: number 150build() {Column() {Web({ src: www.example.com, controller: this.controller }).textZoomRatio(this.atio)}}
}
initialScale9
initialScale(percent: number)
设置整体页面的缩放百分比默认为100。
参数
参数名参数类型必填默认值参数描述percentnumber是100要设置的整体页面的缩放百分比。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State percent: number 100build() {Column() {Web({ src: www.example.com, controller: this.controller }).initialScale(this.percent)}}
}
userAgent(deprecated)
userAgent(userAgent: string)
设置用户代理。 说明 从API version 8开始支持从API version 10开始废弃。建议使用setCustomUserAgent10替代。 参数
参数名参数类型必填默认值参数描述userAgentstring是-要设置的用户代理。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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.36build() {Column() {Web({ src: www.example.com, controller: this.controller }).userAgent(this.userAgent)}}
}
blockNetwork9
blockNetwork(block: boolean)
设置Web组件是否阻止从网络加载资源。
参数
参数名参数类型必填默认值参数描述blockboolean是false设置Web组件是否阻止从网络加载资源。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State block: boolean truebuild() {Column() {Web({ src: www.example.com, controller: this.controller }).blockNetwork(this.block)}}
}
defaultFixedFontSize9
defaultFixedFontSize(size: number)
设置网页的默认等宽字体大小。
参数
参数名参数类型必填默认值参数描述sizenumber是13设置网页的默认等宽字体大小单位px。输入值的范围为-2^31到2^31-1实际渲染时超过72的值按照72进行渲染低于1的值按照1进行渲染。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State fontSize: number 16build() {Column() {Web({ src: www.example.com, controller: this.controller }).defaultFixedFontSize(this.fontSize)}}
}
defaultFontSize9
defaultFontSize(size: number)
设置网页的默认字体大小。
参数
参数名参数类型必填默认值参数描述sizenumber是16设置网页的默认字体大小单位px。输入值的范围为-2^31到2^31-1实际渲染时超过72的值按照72进行渲染低于1的值按照1进行渲染。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State fontSize: number 13build() {Column() {Web({ src: www.example.com, controller: this.controller }).defaultFontSize(this.fontSize)}}
}
minFontSize9
minFontSize(size: number)
设置网页字体大小最小值。
参数
参数名参数类型必填默认值参数描述sizenumber是8设置网页字体大小最小值单位px。输入值的范围为-2^31到2^31-1实际渲染时超过72的值按照72进行渲染低于1的值按照1进行渲染。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State fontSize: number 13build() {Column() {Web({ src: www.example.com, controller: this.controller }).minFontSize(this.fontSize)}}
}
minLogicalFontSize9
minLogicalFontSize(size: number)
设置网页逻辑字体大小最小值。
参数
参数名参数类型必填默认值参数描述sizenumber是8设置网页逻辑字体大小最小值单位px。输入值的范围为-2^31到2^31-1实际渲染时超过72的值按照72进行渲染低于1的值按照1进行渲染。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State fontSize: number 13build() {Column() {Web({ src: www.example.com, controller: this.controller }).minLogicalFontSize(this.fontSize)}}
}
webFixedFont9
webFixedFont(family: string)
设置网页的fixed font字体库。
参数
参数名参数类型必填默认值参数描述familystring是monospace设置网页的fixed font字体库。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State family: string monospacebuild() {Column() {Web({ src: www.example.com, controller: this.controller }).webFixedFont(this.family)}}
}
webSansSerifFont9
webSansSerifFont(family: string)
设置网页的sans serif font字体库。
参数
参数名参数类型必填默认值参数描述familystring是sans-serif设置网页的sans serif font字体库。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State family: string sans-serifbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).webSansSerifFont(this.family)}}
}
webSerifFont9
webSerifFont(family: string)
设置网页的serif font字体库。
参数
参数名参数类型必填默认值参数描述familystring是serif设置网页的serif font字体库。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State family: string serifbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).webSerifFont(this.family)}}
}
webStandardFont9
webStandardFont(family: string)
设置网页的standard font字体库。
参数
参数名参数类型必填默认值参数描述familystring是sans serif设置网页的standard font字体库。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State family: string sans-serifbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).webStandardFont(this.family)}}
}
webFantasyFont9
webFantasyFont(family: string)
设置网页的fantasy font字体库。
参数
参数名参数类型必填默认值参数描述familystring是fantasy设置网页的fantasy font字体库。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State family: string fantasybuild() {Column() {Web({ src: www.example.com, controller: this.controller }).webFantasyFont(this.family)}}
}
webCursiveFont9
webCursiveFont(family: string)
设置网页的cursive font字体库。
参数
参数名参数类型必填默认值参数描述familystring是cursive设置网页的cursive font字体库。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State family: string cursivebuild() {Column() {Web({ src: www.example.com, controller: this.controller }).webCursiveFont(this.family)}}
}
darkMode9
darkMode(mode: WebDarkMode)
设置Web深色模式默认关闭。当深色模式开启时Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式若网页未定义深色样式则保持原状。如需开启强制深色模式建议配合forceDarkAccess使用。
参数
参数名参数类型必填默认值参数描述modeWebDarkMode是WebDarkMode.Off设置Web的深色模式为关闭、开启或跟随系统。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: WebDarkMode WebDarkMode.Onbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).darkMode(this.mode)}}
}
forceDarkAccess9
forceDarkAccess(access: boolean)
设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。
参数
参数名参数类型必填默认值参数描述accessboolean是false设置网页是否开启强制深色模式。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: WebDarkMode WebDarkMode.OnState access: boolean truebuild() {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)
设置网页是否开启捏合流畅模式默认不开启。
参数
参数名参数类型必填默认值参数描述isEnabledboolean是false网页是否开启捏合流畅模式。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct 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 开启配置。
参数
参数名参数类型必填默认值参数描述flagboolean是默认值与系统参数关联当系统参数persist.web.allowWindowOpenMethod.enabled为true时默认值为true, 否则为false网页是否可以通过JavaScript自动打开窗口。
示例
// xxx.ets
import web_webview from ohos.web.webview
//在同一page页有两个web组件。在WebComponent新开窗口时会跳转到NewWebViewComp。
CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: 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
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()dialogController: CustomDialogController | null nullbuild() {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值。 参数
参数名参数类型必填默认值参数描述optionsWebMediaOptions是{resumeInterval: 0, audioExclusive: true}设置Web的媒体策略。其中resumeInterval的默认值为0表示不自动续播。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct 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: ArrayScriptItem)
将JavaScript脚本注入到Web组件中当指定页面或者文档开始加载时该脚本将在其来源与scriptRules匹配的任何页面中执行。 说明 该脚本将在页面的任何JavaScript代码之前运行并且DOM树此时可能尚未加载、渲染完毕。 参数
参数名参数类型必填默认值参数描述scriptsArrayScriptItem是-需要注入的的ScriptItem数组
ets示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct Index {controller: web_webview.WebviewController new web_webview.WebviewController()private localStorage: string if (typeof(Storage) ! undefined) { localStorage.setItem(color, Red); };State scripts: ArrayScriptItem [{ 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
htmlheadmeta charsetutf-8/headbody stylefont-size: 30px; onloadbodyOnLoadLocalStorage()Hello world!div idresult/div/bodyscript typetext/javascriptfunction 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模式。 参数
参数名参数类型必填默认值参数描述modeWebLayoutMode是WebLayoutMode.NONE设置web布局模式跟随系统或自适应布局。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()State mode: WebLayoutMode WebLayoutMode.FIT_CONTENTbuild() {Column() {Web({ src: www.example.com, controller: this.controller }).layoutMode(this.mode)}}
}
nestedScroll11
nestedScroll(value: NestedScrollOptions)
调用以设置嵌套滚动选项。 说明 设置向前向后两个方向上的嵌套滚动模式实现与父组件的滚动联动。支持设置不同的向前向后两个方向上的嵌套滚动模式。默认scrollForward和scrollBackward模式为NestedScrollMode.SELF_FIRST。 参数
参数名参数类型必填参数描述valueNestedScrollOptions是可滚动组件滚动时的嵌套滚动选项。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct 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)
设置是否开启同层渲染功能默认不开启。
参数
参数名参数类型必填默认值参数描述modeboolean是false是否开启同层渲染功能。
示例
// xxx.ets
import web_webview from ohos.web.webview
Entry
Component
struct 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()告警弹窗时触发回调。
参数
参数名参数类型参数描述urlstring当前显示弹窗所在网页的URL。messagestring弹窗中显示的信息。resultJsResult通知Web组件用户操作行为。
返回值
类型说明boolean当回调返回true时应用可以调用系统弹窗能力包括确认和取消并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时函数中绘制的自定义弹窗无效。
示例
// xxx.ets
import web_webview from ohos.web.webviewEntry
Component
struct 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
headmeta nameviewport contentwidthdevice-width, initial-scale1.0 charsetutf-8
/head
bodyh1WebView onAlert Demo/h1button onclickmyFunction()Click here/buttonscriptfunction 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就业必备技能 HarmonOS多媒体技术 鸿蒙NaPi组件进阶 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学习资料
总结
总的来说华为鸿蒙不再兼容安卓对中年程序员来说是一个挑战也是一个机会。只有积极应对变化不断学习和提升自己他们才能在这个变革的时代中立于不败之地。
