鸿蒙ArkTS声明式组件：【Web】

于 2024-07-04 14:32:05 发布
阅读量671 收藏 26
点赞数 13
分类专栏： 鸿蒙开发 文章标签： harmonyos openharmony 鸿蒙 鸿蒙开发 程序员 组件 声明式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82772199/article/details/140178785
版权

Web

提供具有网页显示能力的Web组件，[@ohos.web.webview]提供web控制能力。

说明：

  • 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 示例效果请以真机运行为准，当前IDE预览器不支持。

需要权限

ArkUI:

访问在线网页时需添加网络权限：ohos.permission.INTERNET。

Android:

访问在线网页时需添加网络权限：android.permission.INTERNET

<uses-permission android:name="android.permission.INTERNET" />

iOS:

无需设置，应用通过询问用户获取网络权限。

跨平台相关设置

无法访问Http的设置

Android

targetSdkVersion版本升级到28之后，默认拒绝应用程序使用明文流量的请求，如http协议不再支持访问。 需要在AndroidManifest.xml中开启明文网络流量解决此问题

android:usesCleartextTraffic=“true”

如需详细网络安全设置也可以通过配置android:networkSecurityConfig属性来进行详细设置。

iOS

App Transport Security (ATS) 不支持访问http服务。通过修改info.plist可以做到。

在源代码模式修改比较方便。 在Xcode中右击项目中的info.plist，选择Open As > Source Code，在plist标签中加入NSAppTransportSecurity。

示例如下：

<plist version="1.0">
<dict>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>
</dict>
</plist>

子组件

无

接口

Web(options: { src: ResourceStr, controller: WebviewController})

说明：

不支持转场动画。 同一页面的多个web组件，必须绑定不同的WebviewController。

参数：

参数名参数类型必填参数描述
src[ResourceStr]是网页资源地址。如果访问本地资源文件，请使用$rawfile。
controller[WebviewController9+]是控制器。

示例：

加载在线网页

// 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: 'https://www.example.com', controller: this.controller })
    }
  }
}

加载本地网页

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

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 通过$rawfile加载本地资源文件。
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

加载的index.html文件，位于resources目录下rawfile子目录中

<!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>

属性

javaScriptAccess

javaScriptAccess(javaScriptAccess: boolean)

设置是否允许执行JavaScript脚本，默认允许执行。

参数：

参数名参数类型必填默认值参数描述
javaScriptAccessboolean是true是否允许执行JavaScript脚本。

示例：

// 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: 'https://www.example.com', controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}

zoomAccess

zoomAccess(zoomAccess: boolean)

设置是否支持手势进行缩放，默认允许执行缩放。

参数：

参数名参数类型必填默认值参数描述
zoomAccessboolean是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: 'https://www.example.com', controller: this.controller })
        .zoomAccess(true)
    }
  }
}

onPageBegin

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

网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。
Android和iOS的触发时机与OpenHarmony不完全相同，以各平台行为为准。

参数：

参数名参数类型参数描述
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: 'https://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: 'https://www.example.com', controller: this.controller })
        .onPageEnd((event) => {
          if (event) {
            console.log('url:' + event.url)
          }
        })
    }
  }
}

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: 'https://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())
          }
        })
    }
  }
}

minFontSize9+

minFontSize(size: number)

设置网页字体大小最小值。

参数：

参数名参数类型必填默认值参数描述
sizenumber是8设置网页字体大小最小值，单位px。输入值的范围为-231到231-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

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

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 30
  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
        .minFontSize(this.fontSize)
    }
  }
}

horizontalScrollBarAccess9+

horizontalScrollBarAccess(horizontalScrollBar: boolean)

设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。

参数：

参数名参数类型必填默认值参数描述
horizontalScrollBarboolean是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: $rawfile('index.html'), controller: this.controller })
      .horizontalScrollBarAccess(true).height(150).width(200)
    }
  }
}

加载的html文件。

<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
  </head>
  <body>
    Scroll Test
  </body>
</html>

verticalScrollBarAccess9+

verticalScrollBarAccess(verticalScrollBar: boolean)

设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。

参数：

参数名参数类型必填默认值参数描述
verticalScrollBarAccessboolean是true设置是否显示纵向滚动条。

示例：

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

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new w eb_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .verticalScrollBarAccess(true).height(150).width(200)
    }
  }
}

加载的html文件。

<!--index.html-->
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
  </head>
  <body>
    Scroll Test
  </body>
</html>

backgroundColor

backgroundColor(ResourceColor:Color | number | string)

设置web组件背景颜色

参数：

ResourceColor

类型说明
[Color]颜色枚举值。
numberHEX格式颜色，支持rgb。示例：0xffffff。
stringrgb或者argb格式颜色。示例：‘#ffffff’, ‘#ff000000’, ‘rgb(255, 100, 255)’, ‘rgba(255, 100, 255, 0.5)’。

示例：

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

@Entry
@Component
struct WebComponent {
controller1: web_webview.WebviewController = new web_webview.WebviewController();
controller2: web_webview.WebviewController = new web_webview.WebviewController();
controller3: web_webview.WebviewController = new web_webview.WebviewController();
controller4: web_webview.WebviewController = new web_webview.WebviewController();

build() {
  Column() {
    Text('设置backgroundColor为Color.Blue').height(50)
    Web({ src: 'https://www.example.com', controller: this.controller1 })
      .backgroundColor(Color.Blue).height(200)
      
    Text('设置backgroundColor为0x00ffff').height(50)
    Web({ src: 'https://www.example.com', controller: this.controller2 })
      .backgroundColor(0x00ffff).height(200)
      
    Text('设置backgroundColor为"#00FF00"').height(50)
    Web({ src: 'https://www.example.com', controller: this.controller3 })
      .backgroundColor('#00FF00').height(200)
      
    Text('设置backgroundColor为"rgb(255, 100, 255)"').height(50)
    Web({ src: 'https://www.example.com', controller: this.controller4 })
      .backgroundColor('rgb(255, 100, 255)').height(200)
  }
}
}

mediaPlayGestureAccess

mediaPlayGestureAccess(access: boolean)

设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。 Android：该属性只对网页内嵌视频播放生效。 iOS：不支持。

参数：

参数名参数类型必填默认值参数描述
accessboolean是true设置有声视频播放是否需要用户手动点击。

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State access: boolean = true
    build() {
      Column() {
        Web({ src: 'https://www.example.com', controller: this.controller })
          .mediaPlayGestureAccess(this.access)
      }
    }
  }

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: 'https://www.example.com', controller: this.controller })
        .onHttpErrorReceive((event) => {
          if (event) {
            console.log('url:' + event.request.getRequestUrl())
            console.log('getResponseEncoding:' + event.response.getResponseEncoding())
            console.log('getResponseMimeType:' + event.response.getResponseMimeType())
            console.log('getResponseCode:' + event.response.getResponseCode())
            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)
            }
          }
        })
    }
  }
}

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: 'https://www.example.com', controller: this.controller })
        .onProgressChange((event) => {
          if (event) {
            console.log('newProgress:' + event.newProgress)
          }
        })
    }
  }
}

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: 'https://www.example.com', controller: this.controller })
      .onScroll((event) => {
          console.info("x = " + event.xOffset)
          console.info("y = " + event.yOffset)
      })
    }
  }
}

onTitleReceive

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

网页document标题更改时触发该回调。 Android和iOS的返回值与OpenHarmony不完全相同，以各平台行为为准。

参数：

参数名参数类型参数描述
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: 'https://www.example.com', controller: this.controller })
        .onTitleReceive((event) => {
          if (event) {
            console.log('title:' + event.title)
          }
        })
    }
  }
}

onConsole

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

通知宿主应用JavaScript console消息。

参数：

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

返回值：

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

示例：

  // 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: 'https://www.example.com', controller: this.controller })
          .onConsole((event) => {
            if (event) {
              console.log('getMessage:' + event.message.getMessage())
              console.log('getMessageLevel:' + event.message.getMessageLevel())
            }
            return false
          })
      }
    }
  }

onScaleChange9+

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

当前页面显示比例的变化时触发该回调。 Android和iOS的页面显示比例与OpenHarmony不完全相同，以各平台行为为准。

参数：

参数名参数类型参数描述
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: 'https://www.example.com', controller: this.controller })
          .onScaleChange((event) => {
            console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)
          })
      }
    }
  }

onLoadIntercept10+

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

当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 在Android平台，此接口在重定向时触发。

参数：

参数名参数类型参数描述
request[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: 'https://www.example.com', controller: this.controller })
          .onLoadIntercept((event) => {
            console.log('url:' + event.data.getRequestUrl())
            return true
          })
      }
    }
  }

onControllerAttached10+

onControllerAttached(callback: () => void)

当Controller成功绑定到Web组件时触发该回调，并且该Controller必须为WebviewController，因该回调调用时网页还未加载，无法在回调中使用有关操作网页的接口，可以使用[loadUrl]等操作网页不相关的接口。

示例：

在该回调中使用loadUrl加载网页

  // 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: '', controller: this.controller })
          .onControllerAttached(() => {
            this.controller.loadUrl($rawfile("index.html"));
          })
      }
    }
  }

加载的html文件。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
      <body>
          <p>Hello World</p>
      </body>
  </html>

onAlert

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

网页触发alert()告警弹窗时触发回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
result[JsResult]通知Web组件用户操作行为，iOS端时result.handleCancel行为和result.handleConfirm一致。

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，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 })
          .onAlert((event) => {
            if (event) {
              console.log("event.url:" + event.url)
              console.log("event.message:" + event.message)
              AlertDialog.show({
                title: 'onAlert',
                message: 'text',
                primaryButton: {
                  value: 'cancel',
                  action: () => {
                    event.result.handleCancel()
                  }
                },
                secondaryButton: {
                  value: 'ok',
                  action: () => {
                    event.result.handleConfirm()
                  }
                },
                cancel: () => {
                  event.result.handleCancel()
                }
              })
            }
            return true
          })
      }
    }
  }

onConfirm

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

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

参数：

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

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，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 })
          .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
          })
      }
    }
  }

onPrompt9+

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

参数：

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

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，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 })
          .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
          })
      }
    }
  }

onHttpAuthRequest9+

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

通知收到http auth认证请求。

Android加载页面不会直接触发该回调，iOS加载页面会直接触发该回调。

参数：

参数名参数类型参数描述
handler[HttpAuthHandler]通知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: 'https://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: () => {
                  event.handler.confirm("2222", "2222");
                }
              },
              cancel: () => {
                event.handler.cancel()
              }
            })
          }
          return true
        })
    }
  }
}

onGeolocationShow

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

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

目前iOS不支持。

参数：

参数名参数类型参数描述
originstring指定源的字符串索引。
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:'https://www.example.com', 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)
              }
            })
          }
        })
      }
    }
  }

onGeolocationHide

onGeolocationHide(callback: () => void)

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

目前iOS不支持。

参数：

参数名参数类型参数描述
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:'https://www.example.com', controller:this.controller })
        .geolocationAccess(true)
        .onGeolocationHide(() => {
          console.log("onGeolocationHide...")
        })
      }
    }
  }

onPermissionRequest9+

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

通知收到获取权限请求。

iOS监听到webview权限申请的前提是要在plist设置app获取权限选项，并且在首次打开应用，系统弹出获取权限窗口时选择授予。

Android监听到webview权限申请的前提是要在Manifest中静态配置。

getOrigin返回值以各平台行为为准。

参数：

参数名参数类型参数描述
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: 'https://www.example.com', 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()
                }
              })
            }
          })
      }
    }
  }

onPageVisible9+

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

设置新页面内容即将可见时触发的回调函数。

获取的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:'https://www.example.com', controller: this.controller })
         .onPageVisible((event) => {
          console.log('onPageVisible url:' + event.url)
        })
      }
    }
  }

onDownloadStart

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

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

返回信息以各平台行为为准，跨平台目前只支持获取url, userAgent, mimetype, contentLength。

参数：

参数名参数类型参数描述
urlstring文件下载的URL。
userAgentstring用于下载的用户代理。
mimetypestring服务器返回内容媒体类型（MIME）信息。
contentLengthcontentLength服务器返回文件的长度。

示例：

  // 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: 'https://www.example.com', controller: this.controller })
          .onDownloadStart((event) => {
            if (event) {
              console.log('url:' + event.url)
              console.log('userAgent:' + event.userAgent)
              console.log('mimetype:' + event.mimetype)
              console.log('contentLength:' + event.contentLength)
            }
          })
      }
    }
  }

onShowFileSelector9+

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

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

目前iOS不支持。

参数：

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

返回值：

类型说明
boolean当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，web组件暂不支持触发默认弹窗。

示例：

  // 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()
    @State uri: string = "file:///data/user/0/com.example.helloworld";

    build() {
      Column() {
        Web({ src: $rawfile('index.html'), controller: this.controller })
          .onShowFileSelector((event) => {
            console.log('MyFileUploader onShowFileSelector invoked')
            event.result.handleFileList([this.uri]);
            return true
          })
      }
    }
  }

WebResourceError

web组件资源管理错误信息对象。

getErrorCode

getErrorCode(): number

获取加载资源的错误码。

错误码：

Android和iOS的错误码与OpenHarmony不完全相同，以各平台错误码为准。

返回值：

类型说明
number返回加载资源的错误码。

getErrorInfo

getErrorInfo(): string

获取加载资源的错误信息。
Android和iOS的错误信息与OpenHarmony不完全相同，以各平台错误信息为准。

返回值：

类型说明
string返回加载资源的错误信息。

WebResourceRequest

web组件获取资源请求对象。

getRequestUrl

getRequestUrl(): string

获取资源请求的URL信息。

返回值：

类型说明
string返回资源请求的URL信息。

WebResourceResponse

web组件资源响应对象。

getResponseMimeType

getResponseMimeType(): string

获取资源响应的媒体（MIME）类型。

返回值：

类型说明
string返回资源响应的媒体（MIME）类型。

getResponseEncoding

getResponseEncoding(): string

获取资源响应的编码。

返回值：

类型说明
string返回资源响应的编码。

getResponseCode

getResponseCode(): number

获取资源响应的状态码。

返回值：

类型说明
number返回资源响应的状态码。

ConsoleMessage

Web组件获取控制台信息对象。

getMessage

getMessage(): string

获取ConsoleMessage的日志信息。

返回值：

类型说明
string返回ConsoleMessage的日志信息。

getMessageLevel

getMessageLevel(): MessageLevel

获取ConsoleMessage的信息级别。

返回值：

类型说明
[MessageLevel]返回ConsoleMessage的信息级别。

MessageLevel枚举说明

名称描述
Debug调试级别。
Error错误级别。
Info消息级别。
Log日志级别。
Warn警告级别。

JsResult

Web组件返回的弹窗确认或弹窗取消功能对象。

handleCancel

handleCancel(): void

通知Web组件用户取消弹窗操作。

handleConfirm

handleConfirm(): void

通知Web组件用户确认弹窗操作。

handlePromptConfirm9+

handlePromptConfirm(result: string): void

通知Web组件用户确认弹窗操作及对话框内容。

参数：

参数名参数类型必填默认值参数描述
resultstring是-用户输入的对话框内容。

HttpAuthHandler9+

Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。

cancel9+

cancel(): void

通知Web组件用户取消HTTP认证操作。

confirm9+

confirm(userName: string, pwd: string): boolean

使用用户名和密码进行HTTP认证操作。

参数：

参数名参数类型必填默认值参数描述
userNamestring是-HTTP认证用户名。
pwdstring是-HTTP认证密码。

返回值：

类型说明
boolean认证成功返回true，失败返回false。跨平台Android和iOS底层不会有返回值，所以都返回true。

isHttpAuthInfoSaved9+

isHttpAuthInfoSaved(): boolean

通知Web组件用户使用服务器缓存的帐号密码认证。

返回值：

类型说明
boolean存在密码认证成功返回true，其他返回false。iOS底层不会有返回值，所以暂时在获取不到服务器缓存帐号密码的时候返回false，如果能获取到就进行认证并返回true。

JsGeolocation

Web组件返回授权或拒绝权限功能的对象。

invoke

invoke(origin: string, allow: boolean, retain: boolean): void

设置网页地理位置权限状态。

参数：

参数名参数类型必填默认值参数描述
originstring是-指定源的字符串索引。
allowboolean是-设置的地理位置权限状态。
retainboolean是-是否允许将地理位置权限状态保存到系统中。

PermissionRequest9+

Web组件返回授权或拒绝权限功能的对象。

deny9+

deny(): void

拒绝网页所请求的权限。

getOrigin9+

getOrigin(): string

获取网页来源。

返回值：

类型说明
string当前请求权限网页的来源。

getAccessibleResource9+

getAccessibleResource(): Array

获取网页所请求的权限资源列表，跨平台资源列表支持的类型有RESOURCE_VIDEO_CAPTURE和RESOURCE_AUDIO_CAPTURE。

返回值：

类型说明
Array网页所请求的权限资源列表。

grant9+

grant(resources: Array): void

对网页访问的给定权限进行授权，跨平台iOS不支持授予某一种类型的权限，只支持授予当前申请的权限，或拒绝当前申请的权限。

参数：

参数名参数类型必填默认值参数描述
resourcesArray是-授予网页请求的权限的资源列表，跨平台iOS此参数没有作用。

FileSelectorResult9+

通知Web组件的文件选择结果。

handleFileList9+

handleFileList(fileList: Array): void

通知Web组件进行文件选择操作。

参数：

参数名参数类型必填默认值参数描述
fileListArray是-需要进行操作的文件列表。

FileSelectorParam9+

web组件获取文件对象。

getTitle9+

getTitle(): string

获取文件选择器标题。

返回值：

类型说明
string返回文件选择器标题。

getMode9+

getMode(): FileSelectorMode

获取文件选择器的模式。

返回值：

类型说明
[FileSelectorMode]返回文件选择器的模式。

getAcceptType9+

getAcceptType(): Array

获取文件过滤类型。

返回值：

类型说明
Array返回文件过滤类型。

isCapture9+

isCapture(): boolean

获取是否调用多媒体能力。

返回值：

类型说明
boolean返回是否调用多媒体能力。

FileSelectorMode枚举说明

在这里插入图片描述

名称描述
FileOpenMode打开上传单个文件。
FileOpenMultipleMode打开上传多个文件。
FileOpenFolderMode打开上传文件夹模式。
FileSaveMode文件保存模式。
鸿蒙系统小能手Mr.Li
关注
  • 13
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙 arkts 计算器 我的资源
05-10
鸿蒙操作系统（HarmonyOS），是华为推出的一款面向全场景的分布式操作系统，旨在打破设备间的壁垒，实现万物互联。 ArkTS，全称为Ark TypeScript，是鸿蒙系统开发的一种高级编程语言，它基于TypeScript并为HarmonyOS...
鸿蒙 ArkTS 双色旋转动画效果（源码版）
02-07
鸿蒙 ArkTS 双色旋转动画效果是一种在 HarmonyOS 操作系统中实现的视觉效果，主要应用于用户界面的交互设计，提升用户体验。ArkTS 是 HarmonyOS 的一种编程语言，它是基于 TypeScript 扩展的，提供了丰富的类型安全...
OpenHarmony开发实战：Web组件的使用（ArkTS）
shudaoshanQAQ的博客
04-07 1275
本篇文章使用ArkTS语言实现一个简单的免登录过程，向大家介绍基本的cookie管理操作。
ArkTS开发系列之Web组件的学习（2.9）
最新发布
jay_chess的博客
06-26 1572
通过对onIntercerptRequest接口来实现自定义if (!})
【鸿蒙应用ArkTS开发系列】- Web组件使用讲解
枫的专栏
04-11 7899
Web是提供网页显示能力的组件，具体用法请参考Web API。
OpenHarmony开发实战：Web组件抽奖案例（ArkTS）
shudaoshanQAQ的博客
04-08 1103
本篇文章是基于ArkTS的声明式开发范式的样例，主要介绍了Web组件如何加载本地和云端H5小程序。
Arkts web组件的使用
程序三两行
11-27 1254
访问在线网页时您需要在module.json5文件中申明网络访问权限：ohos.permission.INTERNET。加载网页效果无法在预览器中查看，需要在模拟器或者真机中展示项目。Web组件的使用非常简单，只需要ArkTS文件中创建一个。组件，传入两个参数就可以了。指定引用的网页路径，为组件的控制器，通过。
HarmonyOS鸿蒙ArkTS证件照生成模板
02-04
5. **用户界面**：ArkTS结合HarmonyOS UI组件，创建直观易用的用户界面，让用户可以方便地上传照片并选择参数。 在开发过程中，开发者可以通过HarmonyOS的DevEco Studio进行集成开发环境的支持，包括代码编写、调试...
鸿蒙Arkts ：简易登陆界面.zip
02-07
【鸿蒙Arkts简易登陆界面】是华为在开发其自主操作系统——鸿蒙（HarmonyOS）过程中，为开发者提供的一款示例应用。这个压缩包文件包含了一个基础的登录界面实现，帮助开发者快速理解和构建鸿蒙系统的用户界面。下面...
鸿蒙ArkTS仿网易云.zip
02-07
【鸿蒙ArkTS仿网易云】项目是针对华为鸿蒙操作系统（HarmonyOS）进行的一款应用开发示例，旨在模仿网易云音乐的应用功能。这个项目使用了鸿蒙系统的特有编程语言ArkTS，这是一种基于TypeScript的编程语言，旨在为...
已饱和，未来程序员真没法再干了？_程序员干不了活(1)，HarmonyOS鸿蒙 基础面试
2401_84181501的博客
04-15 383
是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）下篇
m0_64420071的博客
03-13 1941
ArkTS声明式开发（基础手势：Web）下篇
OpenHarmony实战开发-Web组件的使用
m0_70749039的博客
03-28 1140
本篇Codelab使用ArkTS语言实现一个简单的免登录过程，向大家介绍基本的cookie管理操作。主要包含以下功能：
ArkTS - 网络请求
m0_56308072的博客
01-06 2391
应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。前端开发肯定都使用过一个叫的，它是是一个基于的网络请求库，可以用于浏览器和 node.js，它是前端最流行的发送ajax请求的第三方库。如果你不知道什么是promise，推荐看看我的上一篇博客。
【愚公系列】2023年12月 HarmonyOS教学课程 058-Web组件（请求响应和页面调试）
热门推荐
时光隧道
12-28 5万+
请求响应是指客户端发送请求给服务器，服务器接收到请求后返回的响应。响应包含了服务器处理请求的结果，并将结果返回给客户端。页面调试是指在开发过程中，通过调试工具分析页面的运行状况，查找问题和修复错误。常用的页面调试工具包括浏览器的开发者工具和调试插件，可以检查页面的网络请求、HTML代码、CSS样式和JavaScript代码等，并对其进行调试和修改。请求响应和页面调试在Web开发中都非常重要。通过分析请求和响应的信息，开发人员可以了解每个请求的状态、数据和处理结果，有助于排查和解决问题。
鸿蒙-arkTs：访问控制授权申请
Erek的前端博客；
12-19 1124
鸿蒙-arkTs：访问控制授权申请
鸿蒙ArkTs Web组件的基础用法以及H5层与应用层的通讯
weixin_44640245的博客
12-22 2296
鸿蒙ArkTs Web组件的基础用法以及H5层与应用层的通讯
鸿蒙ArkTS Web组件加载空白的问题原因及解决方案
水墨熊猫
12-13 2750
初学鸿蒙开发，按照官方文档Web组件文档示例中的代码照抄运行后显示空白，纠结至于多方搜索后扔无解决方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值