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

已于 2024-03-16 01:36:25 修改
阅读量1.4k 收藏 9
点赞数 18
分类专栏： 鸿蒙 鸿蒙-ArkTS 文章标签： harmonyos 华为 ArkTS ArkUI 鸿蒙 前端 鸿蒙系统
于 2024-03-13 17:59:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64420071/article/details/136686495
版权

onBeforeUnload

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

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

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知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()告警时触发此回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知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()告警时触发此回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知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消息。

参数：

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

返回值：

类型说明
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)

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

参数：

参数名参数类型参数描述
urlstring文件下载的URL。
userAgentstring用于下载的用户代理。
contentDispositionstring服务器返回的 Content-Disposition响应头，可能为空。
mimetypestring服务器返回内容媒体类型（MIME）信息。
contentLengthnumber服务器返回文件的长度。

示例：

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

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

参数：

参数名参数类型参数描述
requestWebResourceRequest网页请求的封装信息。
errorWebResourceError网页加载资源错误的封装信息 。

示例：

// 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)时触发该回调。

参数：

参数名参数类型参数描述
requestWebResourceRequest网页请求的封装信息。
responseWebResourceResponse资源响应的封装信息。

示例：

// 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的内容加载时不会触发此回调。

参数：

参数名参数类型参数描述
urlstring页面的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触发。

参数：

参数名参数类型参数描述
urlstring页面的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)

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

参数：

参数名参数类型参数描述
newProgressnumber新的加载进度，取值范围为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标题更改时触发该回调。

参数：

参数名参数类型参数描述
titlestringdocument标题内容。

示例：

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

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

参数：

参数名参数类型参数描述
urlstring访问的url。
isRefreshedbooleantrue表示该页面是被重新加载的（调用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)

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

参数：

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

示例：

// 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表单，以响应用户按下的“选择文件”按钮。

参数：

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

返回值：

类型说明
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信息。

参数：

参数名参数类型参数描述
urlstring所加载的资源文件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)

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

参数：

参数名参数类型参数描述
oldScalenumber变化前的显示比例百分比。
newScalenumber变化后的显示比例百分比。

示例：

// 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+代替。

参数：

参数名参数类型参数描述
datastring | WebResourceRequesturl的相关信息。

返回值：

类型说明
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并返回响应数据。

参数：

参数名参数类型参数描述
requestWebResourceRequesturl请求的相关信息。

返回值：

类型说明
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认证请求。

参数：

参数名参数类型参数描述
handlerHttpAuthHandler通知Web组件用户操作行为。
hoststringHTTP身份验证凭据应用的主机。
realmstringHTTP身份验证凭据应用的域。

返回值：

类型说明
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 = false

  build() {
    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错误。

参数：

参数名参数类型参数描述
handlerSslErrorHandler通知Web组件用户操作行为。
errorSslError错误码。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  httpAuth: boolean = false

  build() {
    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客户端证书请求事件。

参数：

参数名参数类型参数描述
handlerClientAuthenticationHandler通知Web组件用户操作行为。
hoststring请求证书服务器的主机名。
portnumber请求证书服务器的端口号。
keyTypesArray<string>可接受的非对称秘钥类型。
issuersArray<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()
            }
          })
        })
    }
  }
}

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

  1. 构造单例对象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);
  }
}

  2. 实现双向认证。

    // 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.UIAbilityContext
     await 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
 @Component
 struct WebComponent {
   controller: web_webview.WebviewController = new web_webview.WebviewController();
   @State message: string = 'Hello World' //message主要是调试观察使用
   certManager = CertManagerService.getInstance();

   build() {
     Row() {
       Column() {
         Row() {
           //第一步：需要先进行授权，获取到uri
           Button('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)

通知收到获取权限请求。

参数：

参数名参数类型参数描述
requestPermissionRequest通知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)

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

参数：

参数名参数类型参数描述
paramWebContextMenuParam菜单相关参数。
resultWebContextMenuResult菜单相应事件传入内核。

返回值：

类型说明
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.result
            console.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)

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

参数：

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

示例：

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

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

参数：

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

示例：

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

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

参数：

参数名参数类型参数描述
originstring指定源的字符串索引。
geolocationJsGeolocation通知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组件进入全屏模式。

参数：

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

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  handler: FullScreenExitHandler | null = null
  build() {
    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 = null
  build() {
    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。

参数：

参数名参数类型参数描述
isAlertbooleantrue代表请求创建对话框，false代表新标签页。
isUserTriggerbooleantrue代表用户触发，false代表非用户触发。
targetUrlstring目标url。
handlerControllerHandler用于设置新建窗口的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 = 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)
        })
    }
  }
}

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

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

参数：

参数名参数类型参数描述
activeMatchOrdinalnumber当前匹配的查找项的序号（从0开始）。
numberOfMatchesnumber所有匹配到的关键词的个数。
isDoneCountingboolean当次页内查找操作是否结束。该方法可能会回调多次，直到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)

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

参数：

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

示例：

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

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

参数：

参数名参数类型参数描述
urlstring旧页面不再呈现，新页面即将可见时新页面的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使用前触发。

参数：

参数名参数类型参数描述
eventKeyEvent触发的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地址时的回调函数。

参数：

参数名参数类型参数描述
urlstring接收到的apple-touch-icon url地址。
precomposedboolean对应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时的回调函数。

参数：

参数名参数类型参数描述
faviconPixelMap接收到的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)

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

参数：

参数名参数类型参数描述
playingboolean当前页面的音频播放状态，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 = false
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
        .onAudioStateChanged(event => {
          this.playing = event.playing
          console.debug('onAudioStateChanged playing: ' + this.playing)
        })
    }
  }
}

onFirstContentfulPaint10+

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

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

参数：

参数名参数类型参数描述
navigationStartTicknumbernavigation开始的时间，单位以微秒表示。
firstContentfulPaintMsnumber从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之前触发该回调，用于判断是否阻止此次访问。默认允许加载。

参数：

参数名参数类型参数描述
dataWebResourceRequesturl请求的相关信息。

返回值：

类型说明
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学习资料

鸿蒙（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学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

代码与思维
关注
  • 18
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS移动应用开发
04-07
本课程定位于培养基于HarmonyOS应用开发场景具备专业知识和技能水平的工程师。 通过该课程的学习，您将掌握HarmonyOS基本概念及原理、HarmonyOS技术架构、HarmonyOS应用开发流程、Ability与UI开发知识，具备HarmonyOS功能开发、调试与发布的能力，能够胜任HarmonyOS应用开发工程师岗位。
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS移动应用开发（ArkTS版） 刘安战、余雨萍、陈争艳 清华大学出版社 课件PDF。共十三章，每章1个PPT
HarmonyOS应用开发基础知识.pdf
12-28
HarmonyOS应用开发基础知识
HarmonyOS鸿蒙快速入门应用开发基础+进阶视频.zip
05-24
目录网盘文件永久链接 01.1 HarmonyOS示例应用介绍 01.2 编写一个HarmonyOS应用 01.3 应用编译_安装_运行 01.4 HarmonyOS应用系列课第1期答疑环节 02.1 HUAWEI_DevEco_简介 02.2 HarmonyOS_应用开发平台介绍 02.3 HarmonyOS设备开发平台介绍 02.4 分布式应用开发实例演示 02.5 第2期答疑环节 03.1 致软件工程师的灵魂拷问 03.2 重新定位_人_设备_场景的关系 03.3 应用开发者面临的挑战 03.4 DevEco_Studio提供分布式多设备调试能力 03.5 第3期答疑环节 04.1 多设备场景下应用开发的挑战和解决策略 04.2 HarmonyOS应用程序框架的架构和组成 04.3 第1期答疑环节 05.1 分布式软总线架构 05.2 软总线之发现链接与组网 05.3 软总线之传输 05.4 答疑环节 06.1 分布式数据管理平台设计理念 06.2 分布式数据库 06.3 分布式文件系统 06.4 融合搜索 06.5 答疑环节 07.1 分布式调度的概述 07.2 分布式....
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS概述：系统安全 3-4.HarmonyOS概述：系统定义 3-5.HarmonyOS概述：下载与安装软件 3-6.HarmonyOS概述：应用开发基础知识 3-7.HarmonyOS概述：最全HarmonyOS文档和社区资源使用技巧 4-1.生态案例：【开发者说】重塑经典，如何在HarmonyOS手机上还原贪吃蛇游戏 4-2.生态案例：HarmonyOLabo涂鸦鸿蒙亲子版 4-3.生态案例：HarmonyOS分镜头APP案例 4-4.生态案例：HarmonyOS时光序历史学习案例 4-5.生态案例：HarmonyOS先行者说 宝宝巴士携手HarmonyOS共同打造儿童教育交互新体验 4-6.生态案例：HarmonyOS智能农场物联网连接实践 4-7.生态案例：分布式开发样例，带你玩转多设备 4-8.生态案例：华为分布式日历应用开发实践 5-1.【Codelab】HarmonyOS基于图像模块实现图库图片的四种常见操作 5-2.【CodeLab】手把手教你创建第一个手机“Hello World” 5-3.【Codelab】如此简单！一文带你学会15个HarmonyOS JS组件 5-4.【Codelab】懒人“看”书新法—鸿蒙语音播报，到底如何实现？ 5-5.【Codelab】基于AI通用文字识别的图像搜索，这波操作亮了 5-6.【Codelab】开发样例概览 6-1.技术解读之HarmonyOS轻量JS开发框架与W3C标准差异分析 6-2.技术解读之HarmonyOS驱动加载过程分析 6-3.技术解读之HarmonyOS组件库使用实践 6-4.技术解读之华为架构师解读：HarmonyOS低时延高可靠消息传输原理 6-5.技术解读之解密HarmonyOS UI框架 6-6.技术解读之如何从OS框架层面实现应用服务功能解耦 7-1.常见问题之HarmonyOS元服务的设计与开发解析 7-2.常见问题之Java开发 7-3.常见问题之JS开发 7-4.常见问题之模拟器登录 7-5.常见问题之模拟器运行 7-6.常见问题之如何使用JsJava开发HarmonyOS UI 7-7.常见问题之应用配置 7-8.常见问题之预览器运行 8【视频合集】入门到进阶视频学习资料合集30+
【转】sqlmap用户手册
weixin_33851177的博客
06-18 1224
http://192.168.136.131/sqlmap/mysql/get_int.php?id=1 当给sqlmap这么一个url的时候，它会： 1、判断可注入的参数2、判断可以用那种SQL注入技术来注入3、识别出哪种数据库4、根据用户选择，读取哪些数据 sqlmap支持五种不同的注入模式： 1、基于布尔的盲注，即可以根据返回页面判断条件真假的注入。2、基于时间的盲注，即不能根据页...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Search）
m0_64420071的博客
03-12 1352
ArkTS声明式开发（基础手势：Search）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：RichText）
m0_64420071的博客
03-12 1108
ArkTS声明式开发（基础手势：RichText）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：PluginComponent）
m0_64420071的博客
03-11 1229
ArkTS声明式开发（基础手势：PluginComponent）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Slider）
m0_64420071的博客
03-12 1017
ArkTS声明式开发（基础手势：Slider）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：NavDestination）
m0_64420071的博客
03-11 928
ArkTS声明式开发（基础手势：NavDestination）
symbolType.indexOf is not a function
$
12-29 1666
这个报错是上篇文章里面的， 首页看看你的数组里面的数据格式 没猜错肯定是第一种，字符串格式吧。是需要转成Number格式才能正常显示的 字符串数组转数字数组： arr.map(Number) ????没了，结束了，是不是很简单呐，如有问题，欢迎留言。 ????如果此篇博文对您有帮助，还请动动小手点赞 ???? 收藏 ⭐留言 ????呐~，谢谢 ~ ~ ...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：XComponent）
m0_64420071的博客
03-14 1271
ArkTS声明式开发（基础手势：XComponent）
鸿蒙HarmonyOS应用开发之Node-API支持的数据类型和接口
1
03-27 1119
接口功能说明创建一个异步资源上下文环境（暂不支持与async_hook相关能力）。在异步资源上下文环境中回调JS函数(暂不支持与async_hook相关能力)。销毁先前创建的异步资源上下文环境（暂不支持与async_hook相关能力）。创建一个回调作用域（暂不支持与async_hook相关能力）。关闭先前创建的回调作用域（暂不支持与async_hook相关能力）。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：ImageSpan）
m0_64420071的博客
03-08 1431
ArkTS声明式开发（基础手势：ImageSpan）
【HarmonyOS】View点击穿透，层叠View点击事件控制
我的小窝
05-28 485
harmonyos 层叠view 点击事件处理
HarmonyOS-9(stage模式)
xueyoubangbang的博客
05-29 260
【代码】HarmonyOS-9(stage模式)
装饰器，状态管理和if判断（HarmonyOS学习第六课）
最新发布
qq_58213084的博客
06-02 795
语法的定义使用方法全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。如果不涉及组件状态变化，建议使用全局的自定义构建方法在前文的描述中，我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念在本章节开始的案例中，用户与应用程序的交互触发了文本状态变更，状态变更引起了UI 渲染，UI 从“Hello world”变更为“Hello rkUI”，这个过程就用到了状态。
harmonyos移动应用开发 arkts版 电子书
01-29
HarmonyOS移动应用开发arkts版电子书是一本关于如何使用HarmonyOS开发移动应用的实用指南。这本电子书的目的是帮助开发者了解HarmonyOS移动应用开发的基本概念和技术，以及如何使用arkts工具包来构建高性能、可靠的应用程序。 这本电子书首先介绍了HarmonyOS的基本概念和架构，包括分布式技术、资源管理和安全性等方面。然后，它详细介绍了arkts工具包的使用方法，包括如何设置开发环境、创建应用程序和调试代码等。此外，该电子书还提供了大量的示例代码和实战案例，供读者参考和学习。 在这本电子书中，读者将学习如何开发HarmonyOS移动应用的各个方面，包括界面设计、数据存储、网络通信和用户体验等。它不仅涵盖了基础知识，还介绍了一些高级主题，如应用程序优化和性能调优。读者可以通过阅读这本电子书，系统地学习和掌握HarmonyOS移动应用开发的技能。 总而言之，HarmonyOS移动应用开发arkts版电子书是一本详细且实用的指南，适用于那些对HarmonyOS移动应用开发感兴趣的开发者。它提供了全面的教程和实战案例，帮助读者快速入门和掌握HarmonyOS移动应用开发的技术。希望通过这本电子书，更多的开发者能够利用HarmonyOS的优势，开发出更好的移动应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值