鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）中篇

本文主要是介绍鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）中篇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

onBeforeUnload

onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

刷新或关闭场景下，在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点，才会触发此回调。

参数：

参数名	参数类型	参数描述
url	string	当前显示弹窗所在网页的URL。
message	string	弹窗中显示的信息。
result	JsResult	通知Web组件用户操作行为。

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回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: $rawfile("index.html"), controller: this.controller }).onBeforeUnload((event) => {if (event) {console.log("event.url:" + event.url)console.log("event.message:" + event.message)AlertDialog.show({title: 'onBeforeUnload',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 onbeforeunload="return myFunction()"><h1>WebView onBeforeUnload Demo</h1><a href="https://www.example.com">Click here</a><script>function myFunction() {return "onBeforeUnload Event";}</script>
</body>
</html>

onConfirm

onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

网页调用confirm()告警时触发此回调。

参数：

参数名	参数类型	参数描述
url	string	当前显示弹窗所在网页的URL。
message	string	弹窗中显示的信息。
result	JsResult	通知Web组件用户操作行为。

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回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: $rawfile("index.html"), controller: this.controller }).onConfirm((event) => {if (event) {console.log("event.url:" + event.url)console.log("event.message:" + event.message)AlertDialog.show({title: 'onConfirm',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 onConfirm Demo</h1><button onclick="myFunction()">Click here</button><p id="demo"></p><script>function myFunction() {let x;let r = confirm("click button!");if (r == true) {x = "ok";} else {x = "cancel";}document.getElementById("demo").innerHTML = x;}</script>
</body>
</html>

onPrompt9+

onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)

网页调用prompt()告警时触发此回调。

参数：

参数名	参数类型	参数描述
url	string	当前显示弹窗所在网页的URL。
message	string	弹窗中显示的信息。
result	JsResult	通知Web组件用户操作行为。

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回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: $rawfile("index.html"), controller: this.controller }).onPrompt((event) => {if (event) {console.log("url:" + event.url)console.log("message:" + event.message)console.log("value:" + event.value)AlertDialog.show({title: 'onPrompt',message: 'text',primaryButton: {value: 'cancel',action: () => {event.result.handleCancel()}},secondaryButton: {value: 'ok',action: () => {event.result.handlePromptConfirm(event.value)}},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 onPrompt Demo</h1><button onclick="myFunction()">Click here</button><p id="demo"></p><script>function myFunction() {let message = prompt("Message info", "Hello World");if (message != null && message != "") {document.getElementById("demo").innerHTML = message;}}</script>
</body>
</html>

onConsole

onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)

通知宿主应用JavaScript console消息。

参数：

参数名	参数类型	参数描述
message	ConsoleMessage	触发的控制台信息。

返回值：

类型	说明
boolean	当返回true时，该条消息将不会再打印至控制台，反之仍会打印至控制台。

示例：

// 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 }).onConsole((event) => {if (event) {console.log('getMessage:' + event.message.getMessage())console.log('getSourceId:' + event.message.getSourceId())console.log('getLineNumber:' + event.message.getLineNumber())console.log('getMessageLevel:' + event.message.getMessageLevel())}return false})}}
}

onDownloadStart

onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)

通知主应用开始下载一个文件。

参数：

参数名	参数类型	参数描述
url	string	文件下载的URL。
userAgent	string	用于下载的用户代理。
contentDisposition	string	服务器返回的 Content-Disposition响应头，可能为空。
mimetype	string	服务器返回内容媒体类型（MIME）信息。
contentLength	number	服务器返回文件的长度。

示例：

// 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 }).onDownloadStart((event) => {if (event) {console.log('url:' + event.url)console.log('userAgent:' + event.userAgent)console.log('contentDisposition:' + event.contentDisposition)console.log('contentLength:' + event.contentLength)console.log('mimetype:' + event.mimetype)}})}}
}

onErrorReceive

onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)

网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	网页请求的封装信息。
error	WebResourceError	网页加载资源错误的封装信息。

示例：

// 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 }).onErrorReceive((event) => {if (event) {console.log('getErrorInfo:' + event.error.getErrorInfo())console.log('getErrorCode:' + event.error.getErrorCode())console.log('url:' + event.request.getRequestUrl())console.log('isMainFrame:' + event.request.isMainFrame())console.log('isRedirect:' + event.request.isRedirect())console.log('isRequestGesture:' + event.request.isRequestGesture())console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())let result = event.request.getRequestHeader()console.log('The request header result size is ' + result.length)for (let i of result) {console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)}}})}}
}

onHttpErrorReceive

onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)

网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	网页请求的封装信息。
response	WebResourceResponse	资源响应的封装信息。

示例：

// 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 }).onHttpErrorReceive((event) => {if (event) {console.log('url:' + event.request.getRequestUrl())console.log('isMainFrame:' + event.request.isMainFrame())console.log('isRedirect:' + event.request.isRedirect())console.log('isRequestGesture:' + event.request.isRequestGesture())console.log('getResponseData:' + event.response.getResponseData())console.log('getResponseEncoding:' + event.response.getResponseEncoding())console.log('getResponseMimeType:' + event.response.getResponseMimeType())console.log('getResponseCode:' + event.response.getResponseCode())console.log('getReasonMessage:' + event.response.getReasonMessage())let result = event.request.getRequestHeader()console.log('The request header result size is ' + result.length)for (let i of result) {console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)}let resph = event.response.getResponseHeader()console.log('The response header result size is ' + resph.length)for (let i of resph) {console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)}}})}}
}

onPageBegin

onPageBegin(callback: (event?: { url: string }) => void)

网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。

参数：

参数名	参数类型	参数描述
url	string	页面的URL地址。

示例：

// 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 }).onPageBegin((event) => {if (event) {console.log('url:' + event.url)}})}}
}

onPageEnd

onPageEnd(callback: (event?: { url: string }) => void)

网页加载完成时触发该回调，且只在主frame触发。

参数：

参数名	参数类型	参数描述
url	string	页面的URL地址。

示例：

// 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 }).onPageEnd((event) => {if (event) {console.log('url:' + event.url)}})}}
}

onProgressChange

onProgressChange(callback: (event?: { newProgress: number }) => void)

网页加载进度变化时触发该回调。

参数：

参数名	参数类型	参数描述
newProgress	number	新的加载进度，取值范围为0到100的整数。

示例：

// 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 }).onProgressChange((event) => {if (event) {console.log('newProgress:' + event.newProgress)}})}}
}

onTitleReceive

onTitleReceive(callback: (event?: { title: string }) => void)

网页document标题更改时触发该回调。

参数：

参数名	参数类型	参数描述
title	string	document标题内容。

示例：

// 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 }).onTitleReceive((event) => {if (event) {console.log('title:' + event.title)}})}}
}

onRefreshAccessedHistory

onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)

加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。

参数：

参数名	参数类型	参数描述
url	string	访问的url。
isRefreshed	boolean	true表示该页面是被重新加载的（调用refresh9+接口），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 }).onRefreshAccessedHistory((event) => {if (event) {console.log('url:' + event.url + ' isReload:' + event.isRefreshed)}})}}
}

onSslErrorReceive(deprecated)

onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)

通知用户加载资源时发生SSL错误。

说明：

从API version 8开始支持，从API version 9开始废弃。建议使用onSslErrorEventReceive9+替代。

onFileSelectorShow(deprecated)

onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)

调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。

说明：

从API version 8开始支持，从API version 9开始废弃。建议使用onShowFileSelector9+替代。

onRenderExited9+

onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)

应用渲染进程异常退出时触发该回调。

参数：

参数名	参数类型	参数描述
renderExitReason	RenderExitReason	渲染进程异常退出的具体原因。

示例：

// 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: 'chrome://crash/', controller: this.controller }).onRenderExited((event) => {if (event) {console.log('reason:' + event.renderExitReason)}})}}
}

onShowFileSelector9+

onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)

调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。

参数：

参数名	参数类型	参数描述
result	FileSelectorResult	用于通知Web组件文件选择的结果。
fileSelector	FileSelectorParam	文件选择器的相关信息。

返回值：

类型	说明
boolean	当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，函数中绘制的自定义弹窗无效。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller }).onShowFileSelector((event) => {console.log('MyFileUploader onShowFileSelector invoked')const documentSelectOptions = new picker.DocumentSelectOptions();let uri: string | null = null;const documentViewPicker = new picker.DocumentViewPicker();documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {uri = documentSelectResult[0];console.info('documentViewPicker.select to file succeed and uri is:' + uri);if (event) {event.result.handleFileList([uri]);}}).catch((err: BusinessError) => {console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);})return true})}}
}

加载的html文件。

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body><form id="upload-form" enctype="multipart/form-data"><input type="file" id="upload" name="upload"/></form>
</body>
</html>

onResourceLoad9+

onResourceLoad(callback: (event: {url: string}) => void)

通知Web组件所加载的资源文件url信息。

参数：

参数名	参数类型	参数描述
url	string	所加载的资源文件url信息。

示例：

// 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 }).onResourceLoad((event) => {console.log('onResourceLoad: ' + event.url)})}}
}

onScaleChange9+

onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)

当前页面显示比例的变化时触发该回调。

参数：

参数名	参数类型	参数描述
oldScale	number	变化前的显示比例百分比。
newScale	number	变化后的显示比例百分比。

示例：

// 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 }).onScaleChange((event) => {console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)})}}
}

onUrlLoadIntercept(deprecated)

onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)

当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。从API version 10开始不再维护，建议使用onLoadIntercept10+代替。

参数：

参数名	参数类型	参数描述
data	string \| WebResourceRequest	url的相关信息。

返回值：

类型	说明
boolean	返回true表示阻止此次加载，否则允许此次加载。

示例：

// 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 }).onUrlLoadIntercept((event) => {if (event) {console.log('onUrlLoadIntercept ' + event.data.toString())}return true})}}
}

onInterceptRequest9+

onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)

当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	url请求的相关信息。

返回值：

类型	说明
WebResourceResponse	返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()responseweb: WebResourceResponse = new WebResourceResponse()heads:Header[] = new Array()@State webdata: string = "<!DOCTYPE html>\n" +"<html>\n"+"<head>\n"+"<title>intercept test</title>\n"+"</head>\n"+"<body>\n"+"<h1>intercept test</h1>\n"+"</body>\n"+"</html>"build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onInterceptRequest((event) => {if (event) {console.log('url:' + event.request.getRequestUrl())}let head1:Header = {headerKey:"Connection",headerValue:"keep-alive"}let head2:Header = {headerKey:"Cache-Control",headerValue:"no-cache"}let length = this.heads.push(head1)length = this.heads.push(head2)this.responseweb.setResponseHeader(this.heads)this.responseweb.setResponseData(this.webdata)this.responseweb.setResponseEncoding('utf-8')this.responseweb.setResponseMimeType('text/html')this.responseweb.setResponseCode(200)this.responseweb.setReasonMessage('OK')return this.responseweb})}}
}

onHttpAuthRequest9+

onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)

通知收到http auth认证请求。

参数：

参数名	参数类型	参数描述
handler	HttpAuthHandler	通知Web组件用户操作行为。
host	string	HTTP身份验证凭据应用的主机。
realm	string	HTTP身份验证凭据应用的域。

返回值：

类型	说明
boolean	返回false表示此次认证失败，否则成功。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()httpAuth: boolean = falsebuild() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onHttpAuthRequest((event) => {if (event) {AlertDialog.show({title: 'onHttpAuthRequest',message: 'text',primaryButton: {value: 'cancel',action: () => {event.handler.cancel()}},secondaryButton: {value: 'ok',action: () => {this.httpAuth = event.handler.isHttpAuthInfoSaved()if (this.httpAuth == false) {web_webview.WebDataBase.saveHttpAuthCredentials(event.host,event.realm,"2222","2222")event.handler.cancel()}}},cancel: () => {event.handler.cancel()}})}return true})}}
}

onSslErrorEventReceive9+

onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)

通知用户加载资源时发生SSL错误。

参数：

参数名	参数类型	参数描述
handler	SslErrorHandler	通知Web组件用户操作行为。
error	SslError	错误码。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()httpAuth: boolean = falsebuild() {Column() {Web({ src: 'www.example.com', controller: this.controller }).onHttpAuthRequest((event) => {if (event) {AlertDialog.show({title: 'onHttpAuthRequest',message: 'text',primaryButton: {value: 'cancel',action: () => {event.handler.cancel()}},secondaryButton: {value: 'ok',action: () => {this.httpAuth = event.handler.isHttpAuthInfoSaved()if (this.httpAuth == false) {web_webview.WebDataBase.saveHttpAuthCredentials(event.host,event.realm,"2222","2222")event.handler.cancel()}}},cancel: () => {event.handler.cancel()}})}return true})}}
}

onClientAuthenticationRequest9+

onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array<string>, issuers : Array<string>}) => void)

通知用户收到SSL客户端证书请求事件。

参数：

参数名	参数类型	参数描述
handler	ClientAuthenticationHandler	通知Web组件用户操作行为。
host	string	请求证书服务器的主机名。
port	number	请求证书服务器的端口号。
keyTypes	Array<string>	可接受的非对称秘钥类型。
issuers	Array<string>	与私钥匹配的证书可接受颁发者。

示例：

未对接证书管理的双向认证。

// xxx.ets API9
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 }).onClientAuthenticationRequest((event) => {AlertDialog.show({title: 'onClientAuthenticationRequest',message: 'text',primaryButton: {value: 'confirm',action: () => {event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")}},secondaryButton: {value: 'cancel',action: () => {event.handler.cancel()}},cancel: () => {event.handler.ignore()}})})}}
}

对接证书管理的双向认证。

构造单例对象GlobalContext。

// GlobalContext.ts
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 API10
import common from '@ohos.app.ability.common';
import Want from '@ohos.app.ability.Want';
import web_webview from '@ohos.web.webview'
import { BusinessError } from '@ohos.base';
import bundleManager from '@ohos.bundle.bundleManager'
import { GlobalContext } from '../GlobalContext'let uri = "";export default class CertManagerService {private static sInstance: CertManagerService;private authUri = "";private appUid = "";public static getInstance(): CertManagerService {if (CertManagerService.sInstance == null) {CertManagerService.sInstance = new CertManagerService();}return CertManagerService.sInstance;}async grantAppPm(callback: (message: string) => void) {let message = '';let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;//注：com.example.myapplication需要写实际应用名称try {bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));this.appUid = data.appInfo.uid.toString();}).catch((err: BusinessError) => {console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message);});} catch (err) {let message = (err as BusinessError).message;console.error('getBundleInfoForSelf failed: %{public}s', message);}//注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContextawait abilityContext.startAbilityForResult({bundleName: "com.ohos.certmanager",abilityName: "MainAbility",uri: "requestAuthorize",parameters: {appUid: this.appUid, //传入申请应用的appUid}} as Want).then((data: common.AbilityResult) => {if (!data.resultCode && data.want) {if (data.want.parameters) {this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri}}})message += "after grantAppPm authUri: " + this.authUri;uri = this.authUri;callback(message)}}@Entry@Componentstruct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();@State message: string = 'Hello World' //message主要是调试观察使用certManager = CertManagerService.getInstance();build() {Row() {Column() {Row() {//第一步：需要先进行授权，获取到uriButton('GrantApp').onClick(() => {this.certManager.grantAppPm((data) => {this.message = data;});})//第二步：授权后，双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证Button("ClientCertAuth").onClick(() => {this.controller.loadUrl('https://www.example2.com'); //支持双向认证的服务器网站})}Web({ src: 'https://www.example1.com', controller: this.controller }).fileAccess(true).javaScriptAccess(true).domStorageAccess(true).onlineImageAccess(true).onClientAuthenticationRequest((event) => {AlertDialog.show({title: 'ClientAuth',message: 'Text',confirm: {value: 'Confirm',action: () => {event.handler.confirm(uri);}},cancel: () => {event.handler.cancel();}})})}}.width('100%').height('100%')}}

onPermissionRequest9+

onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)

通知收到获取权限请求。

参数：

参数名	参数类型	参数描述
request	PermissionRequest	通知Web组件用户操作行为。

示例：

// 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: $rawfile('index.html'), controller: this.controller }).onPermissionRequest((event) => {if (event) {AlertDialog.show({title: 'title',message: 'text',primaryButton: {value: 'deny',action: () => {event.request.deny()}},secondaryButton: {value: 'onConfirm',action: () => {event.request.grant(event.request.getAccessibleResource())}},cancel: () => {event.request.deny()}})}})}}
}

加载的html文件。

 <!-- index.html --><!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><video id="video" width="500px" height="500px" autoplay="autoplay"></video><canvas id="canvas" width="500px" height="500px"></canvas><br><input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/><script>function getMedia(){let constraints = {video: {width: 500, height: 500},audio: true};//获取video摄像头区域let video = document.getElementByld("video");//返回的Promise对象let promise = navigator.mediaDevices.getUserMedia(constraints);//then()异步，调用MediaStream对象作为参数promise.then(function (MediaStream) {video.srcObject = MediaStream;video.play();});}</script></body></html>

onContextMenuShow9+

onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)

长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。

参数：

参数名	参数类型	参数描述
param	WebContextMenuParam	菜单相关参数。
result	WebContextMenuResult	菜单相应事件传入内核。

返回值：

类型	说明
boolean	自定义菜单返回true，触发的自定义菜单无效返回false。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
import pasteboard from '@ohos.pasteboard'
const TAG = 'ContextMenu';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()private result: WebContextMenuResult | undefined = undefined;@State linkUrl: string = '';@State offsetX: number = 0;@State offsetY: number = 0;@State showMenu: boolean = false;@Builder//构建自定义菜单及触发功能接口MenuBuilder(){//以垂直列表形式显示的菜单。Menu(){//展示菜单Menu中具体的item菜单项。MenuItem({content: '复制图片',}).width(100).height(50).onClick(() => {this.result?.copyImage();this.showMenu = false;})MenuItem({content: '剪切',}).width(100).height(50).onClick(() => {this.result?.cut();this.showMenu = false;})MenuItem({content: '复制',}).width(100).height(50).onClick(() => {this.result?.copy();this.showMenu = false;})MenuItem({content: '粘贴',}).width(100).height(50).onClick(() => {this.result?.paste();this.showMenu = false;})MenuItem({content: '复制链接',}).width(100).height(50).onClick(() => {let pasteData = pasteboard.createData('text/plain', this.linkUrl);pasteboard.getSystemPasteboard().setData(pasteData, (error)=>{if(error){return;}})this.showMenu = false;})MenuItem({content: '全选',}).width(100).height(50).onClick(() => {this.result?.selectAll();this.showMenu = false;})}.width(150).height(300)}build() {Column() {Web({ src: $rawfile("index.html"), controller: this.controller })//触发自定义弹窗.onContextMenuShow((event) => {if (event) {this.result = event.resultconsole.info("x coord = " + event.param.x())console.info("link url = " + event.param.getLinkUrl())this.linkUrl = event.param.getLinkUrl()}console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);this.showMenu = true;this.offsetX = 250;this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0);return true}).bindPopup(this.showMenu,{builder: this.MenuBuilder(),enableArrow: false,placement: Placement.LeftTop,offset: { x: this.offsetX, y: this.offsetY},mask: false,onStateChange: (e) => {if(!e.isVisible){this.showMenu = false;this.result!.closeContextMenu();}}})}}
}

加载的html文件。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<body><h1>onContextMenuShow</h1><a href="http://www.example.com" style="font-size:27px">链接www.example.com</a>//rawfile下放任意一张图片命名为example.png<div><img src="example.png"></div><p>选中文字鼠标右键弹出菜单</p>
</body>
</html>

onContextMenuHide11+

onContextMenuHide(callback: OnContextMenuHideCallback)

长按特定元素（例如图片，链接）或鼠标右键，隐藏菜单。

参数：

参数名	参数类型	参数描述
callback	OnContextMenuHideCallback	菜单相关参数。

示例：

// 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 }).onContextMenuHide(() => {console.log("onContextMenuHide callback")})}}
}

onScroll9+

onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)

通知网页滚动条滚动位置。

参数：

参数名	参数类型	参数描述
xOffset	number	以网页最左端为基准，水平滚动条滚动所在位置。
yOffset	number	以网页最上端为基准，竖直滚动条滚动所在位置。

示例：

// 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 }).onScroll((event) => {console.info("x = " + event.xOffset)console.info("y = " + event.yOffset)})}}
}

onGeolocationShow

onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)

通知用户收到地理位置信息获取请求。

参数：

参数名	参数类型	参数描述
origin	string	指定源的字符串索引。
geolocation	JsGeolocation	通知Web组件用户操作行为。

示例：

// 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:$rawfile('index.html'), controller:this.controller }).geolocationAccess(true).onGeolocationShow((event) => {if (event) {AlertDialog.show({title: 'title',message: 'text',confirm: {value: 'onConfirm',action: () => {event.geolocation.invoke(event.origin, true, true)}},cancel: () => {event.geolocation.invoke(event.origin, false, true)}})}})}}
}

加载的html文件。

<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){if (navigator.geolocation) {<!-- 前端页面访问设备地理位置 -->navigator.geolocation.getCurrentPosition(showPosition);}
}
function showPosition(position){locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

onGeolocationHide

onGeolocationHide(callback: () => void)

通知用户先前被调用onGeolocationShow时收到地理位置信息获取请求已被取消。

参数：

参数名	参数类型	参数描述
callback	() => void	地理位置信息获取请求已被取消的回调函数。

示例：

// 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 }).geolocationAccess(true).onGeolocationHide(() => {console.log("onGeolocationHide...")})}}
}

onFullScreenEnter9+

onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)

通知开发者web组件进入全屏模式。

参数：

参数名	参数类型	参数描述
handler	FullScreenExitHandler	用于退出全屏模式的函数句柄。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()handler: FullScreenExitHandler | null = nullbuild() {Column() {Web({ src:'www.example.com', controller:this.controller }).onFullScreenEnter((event) => {console.log("onFullScreenEnter...")this.handler = event.handler})}}
}

onFullScreenExit9+

onFullScreenExit(callback: () => void)

通知开发者web组件退出全屏模式。

参数：

参数名	参数类型	参数描述
callback	() => void	退出全屏模式时的回调函数。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()handler: FullScreenExitHandler | null = nullbuild() {Column() {Web({ src:'www.example.com', controller:this.controller }).onFullScreenExit(() => {console.log("onFullScreenExit...")if (this.handler) {this.handler.exitFullScreen()}}).onFullScreenEnter((event) => {this.handler = event.handler})}}
}

onWindowNew9+

onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)

使能multiWindowAccess情况下，通知用户新建窗口请求。若不调用event.handler.setWebController接口，会造成render进程阻塞。如果不需要打开新窗口，在调用event.handler.setWebController接口时须设置成null。

参数：

参数名	参数类型	参数描述
isAlert	boolean	true代表请求创建对话框，false代表新标签页。
isUserTrigger	boolean	true代表用户触发，false代表非用户触发。
targetUrl	string	目标url。
handler	ControllerHandler	用于设置新建窗口的WebviewController实例。

示例：

// 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)})}}
}

onWindowExit9+

onWindowExit(callback: () => void)

通知用户窗口关闭请求。

参数：

参数名	参数类型	参数描述
callback	() => void	窗口请求关闭的回调函数。

示例：

// 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 }).onWindowExit(() => {console.log("onWindowExit...")})}}
}

onSearchResultReceive9+

onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute

回调通知调用方网页页内查找的结果。

参数：

参数名	参数类型	参数描述
activeMatchOrdinal	number	当前匹配的查找项的序号（从0开始）。
numberOfMatches	number	所有匹配到的关键词的个数。
isDoneCounting	boolean	当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。

示例：

// 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 }).onSearchResultReceive(ret => {if (ret) {console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)}})}}
}

onDataResubmitted9+

onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)

设置网页表单可以重新提交时触发的回调函数。

参数：

参数名	参数类型	参数描述
handler	DataResubmissionHandler	表单数据重新提交句柄。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
import business_error from '@ohos.base';
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {//在网页中点击提交之后，点击refresh按钮可以重新提交时的触发函数。Button('refresh').onClick(() => {try {this.controller.refresh();} catch (error) {let e: business_error.BusinessError = error as business_error.BusinessError;console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);}})Web({ src:$rawfile('index.html'), controller: this.controller }).onDataResubmitted((event) => {console.log('onDataResubmitted')event.handler.resend();})}}
}

加载的html文件。

 <!-- index.html --><!DOCTYPE html><html><head><meta charset="utf-8"></head><body><form action="http://httpbin.org/post" method="post"><input type="text" name="username"><input type="submit" name="提交"></form></body></html>

onPageVisible9+

onPageVisible(callback: (event: {url: string}) => void)

设置旧页面不再呈现，新页面即将可见时触发的回调函数。

参数：

参数名	参数类型	参数描述
url	string	旧页面不再呈现，新页面即将可见时新页面的url地址。

示例：

// 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 }).onPageVisible((event) => {console.log('onPageVisible url:' + event.url)})}}
}

onInterceptKeyEvent9+

onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)

设置键盘事件的回调函数，该回调在被Webview使用前触发。

参数：

参数名	参数类型	参数描述
event	KeyEvent	触发的KeyEvent事件。

返回值：

类型	说明
boolean	回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。

示例：

// 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 }).onInterceptKeyEvent((event) => {if (event.keyCode == 2017 || event.keyCode == 2018) {console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)return true;}return false;})}}
}

onTouchIconUrlReceived9+

onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)

设置接收到apple-touch-icon url地址时的回调函数。

参数：

参数名	参数类型	参数描述
url	string	接收到的apple-touch-icon url地址。
precomposed	boolean	对应apple-touch-icon是否为预合成。

示例：

// 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.baidu.com', controller: this.controller }).onTouchIconUrlReceived((event) => {console.log('onTouchIconUrlReceived:' + JSON.stringify(event))})}}
}

onFaviconReceived9+

onFaviconReceived(callback: (event: { favicon: PixelMap }) => void)

设置应用为当前页面接收到新的favicon时的回调函数。

参数：

参数名	参数类型	参数描述
favicon	PixelMap	接收到的favicon图标的PixelMap对象。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
import image from "@ohos.multimedia.image"
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()@State icon: image.PixelMap | undefined = undefined;build() {Column() {Web({ src:'www.example.com', controller: this.controller }).onFaviconReceived((event) => {console.log('onFaviconReceived');this.icon = event.favicon;})}}
}

onAudioStateChanged10+

onAudioStateChanged(callback: (event: { playing: boolean }) => void)

设置网页上的音频播放状态发生改变时的回调函数。

参数：

参数名	参数类型	参数描述
playing	boolean	当前页面的音频播放状态，true表示正在播放，false表示未播放。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()@State playing: boolean = falsebuild() {Column() {Web({ src:'www.example.com', controller: this.controller }).onAudioStateChanged(event => {this.playing = event.playingconsole.debug('onAudioStateChanged playing: ' + this.playing)})}}
}

onFirstContentfulPaint10+

onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstContentfulPaintMs: number }) => void)

设置网页首次内容绘制回调函数。

参数：

参数名	参数类型	参数描述
navigationStartTick	number	navigation开始的时间，单位以微秒表示。
firstContentfulPaintMs	number	从navigation开始第一次绘制内容的时间，单位是以毫秒表示。

示例：

// 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 }).onFirstContentfulPaint(event => {if (event) {console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +event.navigationStartTick + ", [firstContentfulPaintMs]:" +event.firstContentfulPaintMs)}})}}
}

onLoadIntercept10+

onLoadIntercept(callback: (event: { data: WebResourceRequest }) => boolean)

当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。

参数：

参数名	参数类型	参数描述
data	WebResourceRequest	url请求的相关信息。

返回值：

类型	说明
boolean	返回true表示阻止此次加载，否则允许此次加载。

示例：

// 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 }).onLoadIntercept((event) => {console.log('url:' + event.data.getRequestUrl())console.log('isMainFrame:' + event.data.isMainFrame())console.log('isRedirect:' + event.data.isRedirect())console.log('isRequestGesture:' + event.data.isRequestGesture())return true})}}
}

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

腾讯T10级高工技术，安卓全套VIP内容 →Android全套学习资料

腾讯T10级高工技术，安卓全套VIP课程

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料