OpenHarmony_Web组件使用详解

小~Q 2023-03-13 10:35:16

前言

Web组件提供显示网页的能力，能够显示html资源，也可访问在线网页。

开发环境

IDE: DevEco Studio 3.0 Release（build：3.0.0.993）

SDK: Api Version9

开发模型：Stage

权限列表

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

接口

Web组件创建

  • Web(options: { src: string, controller?: WebController })

  • 参数

参数名参数类型必填默认值参数描述
srcstring是-网页资源地址
controllerWebController否-控制器
  • WebController

通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件，且必须在Web组件和WebController绑定后，才能调用WebController上的方法。

创建WebController对象

webController: WebController = new WebController()

基本用法

示例中，设备连接网络后，加载百度首页。

示例

@Entry
@Component
struct Index {
   url : string = "https://www.baidu.com/";
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();
   build() {
     Column() {
       Web({ src: this.url, controller: this.controller })
     }
   }
}

Web组件访问在线网页时需添加网络权限：ohos.permission.INTERNET，该权限为系统权限，无需人工授权。

"requestPermissions": [
      {
          "name" : "ohos.permission.INTERNET"
      }
    ]

示例图

img

属性

名称参数类型默认值描述
domStorageAccessbooleanfalse设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
fileAccessbooleanfalse设置是否开启通过$rawfile(filepath/filename)访问应用中rawfile路径的文件， 默认启用。
fileFromUrlAccessbooleantrue设置是否允许通过网页中的JavaScript脚本访问$rawfile(filepath/filename)的内容，默认未启用。
imageAccessbooleantrue设置是否允许自动加载图片资源，默认允许。
javaScriptProxy{object: object,name: string,methodList: Array,controller:WebController}-注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。 name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 methodList: 参与注册的应用侧JavaScript对象的方法。 controller: 控制器。
javaScriptAccessbooleantrue设置是否允许执行JavaScript脚本，默认允许执行。
mixedModeMixedModeMixedMode.None设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。
onlineImageAccessbooleantrue设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。
zoomAccessbooleantrue设置是否支持手势进行缩放，默认允许执行缩放。
overviewModeAccessbooleantrue设置是否使用概览模式加载网页，默认使用该方式。
databaseAccessbooleanfalse设置是否开启数据库存储API权限，默认不开启。
cacheModeCacheModeCacheMode.Default设置缓存模式。
textZoomAtionumber100设置页面的文本缩放百分比，默认为100%。
userAgentstring-设置用户代理。

说明：

通用属性仅支持width、height、padding、margin、border。

基本用法

在ets中创建web组件，加载index.html，并注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。

示例

@Entry
@Component
struct Index {
   @State text : number = 0;
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();

   //js回调ets层定义的方法
   contentCall = {
    callbackOne : () =>{
      this.text+=1;
      console.log('callbackOne success')
    },
    callbackTwo : () =>{
      this.text-=1;
      console.log('callbackTwo success')
    }
   }

   build() {
     Column() {
      Text('js修改ets属性text:'+this.text.toString()).fontSize(25)
      Text('ets调用js方法改变text值+1').fontSize(25)
      .onClick(()=>{
        //调用js方法
        this.controller.runJavaScript({ script: "change_text_add()" })
      })
      Text('ets调用js方法改变text值-1').fontSize(25)
      .onClick(()=>{
        //调用js方法
        this.controller.runJavaScript({ script: "change_text_reduce()" })
      })
      Text('ets调用js方法改变web显示').fontSize(25)
      .onClick(()=>{
   this.controller.runJavaScript({script:"change_html_context('"+this.text+"')"})
      })
       Web({ src: $rawfile('index.html'), controller: this.controller })
        .fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        //注入JavaScript对象到window对象中，并在window对象中调用该对象的方法
        .javaScriptProxy({
          object : this.contentCall,
          name : "callBackToApp",
          methodList : ["callbackOne","callbackTwo"],
          controller : this.controller
        })
     }
   }
}

示例中用到WebController对象的runJavaScript方法：

runJavaScript(options: { script: string, callback?: (result: string) => void }): void

异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。

  • options参数说明
参数名参数类型必填默认值参数描述
scriptstring是-JavaScript脚本。
callback(result: string) => void否-回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
<div id="indexjs" contenteditable="true"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

var INDEX = {};

INDEX.editor = document.getElementById('indexjs'); //获取html中元素

INDEX.setHtml = function(contents) {
    INDEX.editor.innerHTML = contents; //给id=“indexjs”的div元素赋值
}

function change_html_context(contents) {
    console.info('test strat');
    INDEX.setHtml(contents);
    console.info('test end');
}

//ets调用js方法，间接回调ets的方法
function change_text_add() {
    console.log('change_text_add start');
    var str = callBackToApp.callbackOne(); //js调用ets方法，实现ets访问
    console.log('change_text_add end');
}

//ets调用js方法，间接回调ets的方法
function change_text_reduce() {
    console.log('change_text_reduce start');
    var str = callBackToApp.callbackTwo(); //js调用ets方法，实现ets访问
    console.log('change_text_reduce end');
}

index.html和index.js放在rawfile目录下。

示例设置相关属性，通过javaScriptProxy属性注册contentCall对象值window，声明对象名称callBackToApp，声明方法callbackOne、callbackTwo。

通过WebController对象的runJavaScript方法调用index.js中的方法，js方法中调用callBackToApp对象方法，间接访问ets方法callbackOne或callbackTwo，实现ets与js互相访问。

示例图

img

操作步骤

  • 点击"ets调用js方法改变text值+1"，将text设置为1
  • 点击"ets调用js方法改变web显示"，text的值会显示在web组件中
  • 点击"ets调用js方法改变text值-1"，将text设置为-1
  • 再次点击"ets调用js方法改变web显示"，text的值会显示在web组件中

事件

名称功能描述
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)网页触发alert()告警弹窗时触发回调。当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。url：当前显示弹窗所在网页的URL。message：弹窗中显示的信息。result：通知Web组件用户操作行为。
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)网页调用confirm()告警时触发此回调。当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。url：当前显示弹窗所在网页的URL。message：弹窗中显示的信息。result：通知Web组件用户操作行为。
onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)通知宿主应用JavaScript console消息。message：触发的控制台信息。
onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)网页的下载任务开始时触发该回调url：文件下载的URL。userAgent：下载的用户代理（UA）名称。contentDisposition：服务器返回的 Content-Disposition响应头，可能为空。mimetype：服务器返回内容媒体类型（MIME）信息。contentLength：服务器返回文件的长度。
onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。request：网页请求的封装信息。error：网页加载资源错误的封装信息 。
onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。request：网页请求的封装信息。response：网页响应的封装信息
onPageBegin(callback: (event?: { url: string }) => void)网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。url：页面的URL地址。
onPageEnd(callback: (event?: { url: string }) => void)网页加载完成时触发该回调，且只在主frame触发。url：页面的URL地址。
onProgressChange(callback: (event?: { newProgress: number }) => void)网页加载进度变化时触发该回调。newProgress：新的加载进度，取值范围为0到100的整数。
onTitleReceive(callback: (event?: { title: string }) => void)网页document标题更改时触发该回调。title：document标题内容。
onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。url：访问的url。isRefreshed：true表示该页面是被重新加载的，false表示该页面是新加载的。
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)应用渲染进程异常退出时触发该回调。renderExitReason：渲染进程进程异常退出的具体原因。
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => void)调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。result：用于通知Web组件文件选择的结果。fileSelector：文件选择器的相关信息。
onUrlLoadIntercept(callback: (event?: { data:string / WebResourceRequest }) => boolean)当Web组件加载url之前触发该回调，用于是否阻止此次访问。callback返回true表示阻止此次加载，否则允许此次加载。data：url的相关信息。
onInterceptRequest9+(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。callback返回响应数据为空表示按原来方式加载，否则加载响应数据。request：url请求的相关信息。

对象说明

ConsoleMessage对象说明

接口名称功能描述
getLineNumber(): number获取ConsoleMessage的行数。
getMessage(): string获取ConsoleMessage的日志信息。
getMessageLevel(): MessageLevel获取ConsoleMessage的信息级别。
getSourceId(): string获取网页源文件路径和名字。

MessageLevel枚举说明

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

JsResult对象说明

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

接口名称功能描述
handleCancel(): void通知Web组件用户取消弹窗操作。
handleConfirm(): void通知Web组件用户确认弹窗操作。
handlePromptConfirm9+(result: string): void通知Web组件用户确认弹窗操作及对话框内容。

WebResourceError对象说明

接口名称功能描述
getErrorCode(): number获取加载资源的错误码
getErrorInfo(): string获取加载资源的错误信息。

WebResourceRequest对象说明

接口名称功能描述
getRequestHeader(): Array
获取资源请求头信息。
getRequestUrl(): string获取资源请求的URL信息。
isMainFrame(): boolean判断资源请求是否为主frame。
isRedirect(): boolean判断资源请求是否被服务端重定向。
isRequestGesture(): boolean获取资源请求是否与手势（如点击）相关联。

Header对象说明

Web组件返回的请求/响应头对象。

参数名称参数类型参数描述
headerKeystring请求/响应头的key
headerValuestring请求/响应头的value。

WebResourceResponse对象说明

接口名称功能描述
getReasonMessage(): string获取资源响应的状态码描述。
getResponseCode(): number获取资源响应的状态码。
getResponseData(): string获取资源响应数据。
getResponseEncoding(): string获取资源响应的编码。
getResponseHeader(): Array
获取资源响应头。
getResponseMimeType(): string获取资源响应的媒体（MIME）类型。
setResponseData9+(data: string)设置资源响应数据。
setResponseEncoding9+(encoding: string)设置资源响应的编码。
setResponseMimeType9+(mimeType: string)设置资源响应的媒体（MIME）类型。
setReasonMessage9+(reason: string)设置资源响应的状态码描述。
setResponseHeader9+(header: Array
)
设置资源响应头。
setResponseCode9+(code: number)设置资源响应的状态码。

RenderExitReason枚举说明

onRenderExited接口返回的渲染进程退出的具体原因。

名称描述
ProcessAbnormalTermination渲染进程异常退出。
ProcessWasKilled收到SIGKILL，或被手动终止。
ProcessCrashed渲染进程崩溃退出，如段错误。
ProcessOom程序内存不足。
ProcessExitUnknown其他原因。

MixedMode枚举说明

名称描述
All允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。
Compatible混合内容兼容性模式，部分不安全的内容可能被加载。
None不允许加载HTTP和HTTPS混合内容。

CacheMode枚举说明

名称描述
Default使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。
None加载资源使用cache，如果cache中无该资源则从网络中获取。
Online加载资源不使用cache，全部从网络中获取。
Only只从cache中加载资源。

FileSelectorResult对象说明

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

接口名称功能描述
handleFileList(fileList: Array): void通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。

FileSelectorParam对象说明

接口名称功能描述
getTitle(): string获取文件选择器标题。
getMode(): FileSelectorMode获取文件选择器的模式。
getAcceptType(): Array获取文件过滤类型。
isCapture(): boolean获取是否调用多媒体能力。

FileSelectorMode枚举说明

名称描述
FileOpenMode打开上传单个文件。
FileOpenMultipleMode打开上传多个文件。
FileOpenFolderMode打开上传文件夹模式。
FileSaveMode文件保存模式。

onAlert事件、onConfirm事件、onConsole事件

  • onAlert事件：网页触发alert()告警弹窗时触发回调。

  • onConfirm事件：网页调用confirm()告警时触发此回调。

  • onConsole事件：通知宿主应用JavaScript console消息。

针对onAlert事件、onConfirm事件：当事件返回false时，触发默认弹窗；当事件返回true时，需根据用户的确认操作调用JsResult通知Web组件关闭默认弹窗。

onConsole事件主要功能为打印Web组件关联的JavaScript的console消息，在示例中，onConsole可以打印index.js中的console信息。

示例

@Entry
@Component
struct Index {
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();

   build() {
     Column() {
       Web({ src: $rawfile('index.html'), controller: this.controller  }).fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        .onAlert(e =>{
          console.info('onAlert url: ', e.url);
          console.info('onAlert message: ', e.message);
          AlertDialog.show({
            title: `系统弹窗`,
            message: `这是一个系统弹窗，是否确认？`,
            confirm: {
              value: `确定`,
              action: () => {
                console.log('onAlert Button-clicking callback')
                e.result.handleConfirm()
              }
            },
            cancel: () => {
              console.log('onAlert Closed callbacks')
              e.result.handleCancel()
            }
          })
          return true
        })
        .onConfirm(e =>{
           console.log('onConfirm url: '+e.url)
           console.log('onConfirm message: '+e.message)
           AlertDialog.show({
             title: `系统弹窗`,
             message: `这是一个系统弹窗，是否确认？`,
             confirm: {
               value: `确定`,
               action: () => {
                 console.log('onConfirm Button-clicking callback')
                 e.result.handleConfirm()
               }
             },
             cancel: () => {
               console.log('onConfirm Closed callbacks')
               e.result.handleCancel()
             }
           })
           return true
        })
.onConsole(e =>{
           console.log('onConsole ConsoleMessage: '+e.message.getMessage())
           return true
        })
     }
   }
}

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
<div id="onAlertJs" onclick="alterStr()">触发alter弹窗</div>
<div id="onConfirmJs" onclick="confirmStr()">触发confirm弹窗</div>
<div id="indexjs" contenteditable="true"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

//触发alter弹窗
function alterStr(){
    console.log('alterStr start');
    alert();
    console.log('alterStr end');
}

//触发confirm弹窗
function confirmStr(){
    console.log('confirmStr start');
    confirm();
    console.log('confirmStr end');
}

index.html和index.js放在rawfile目录下。

onAlert、onConfirm返回false时，js内部的alert()、confirm()可自行执行结束。

onAlert、onConfirm返回true时，必须执行result.handleConfirm()或者result.handleCancel()后，js内部的alert()、confirm()才能执行结束,并打印alterStr end、confirmStr end

示例图

img

图中，点击"触发alter弹窗"，随机触发web组件的onAlert事件。

onProgressChange事件

网页加载进度变化，取值范围为0到100的整数。

示例

@Entry
@Component
struct Index {
   url : string = "https://www.baidu.com/";
   @State progress: number = 0;
   @State hideProgress: boolean = true;
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();

Progress({value: this.progress, total: 100})
        .color('#0000ff')
        .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
   build() {
     Column() {
       Web({ src: this.url, controller: this.controller  }).fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        .onProgressChange(e => {
          this.progress = e.newProgress;
          if (this.progress === 100) {
            this.hideProgress = true;
          } else {
            this.hideProgress = false;
          }
        })
     }
   }
}

onDownloadStart事件

网页的下载任务开始时触发该回调。

示例

@Entry
@Component
struct Index {
   url : string = "https://www.baidu.com/";
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();

   build() {
     Column() {
       Web({ src: this.url, controller: this.controller  }).fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
.onDownloadStart((event?: {
          url: string,
          userAgent: string,
          contentDisposition: string,
          mimetype: string,
          contentLength: number
        }) => {
          let message = `onDownloadStart URL:${event.url}\n媒体资源类型:${event.mimetype}\n文件长度:${event.contentLength}`
          AlertDialog.show(
            {
              title: `userAgent:${event.userAgent}`,
              message: message,
              confirm: {
                value: `确认下载？`,
                action: () => {
                  console.log('onDownloadStart Button-clicking callback')
                }
              },
              cancel: () => {
                console.log('onDownloadStart Closed callbacks')
              }
            }
          )
        })
     }
   }
}

网页加载百度成功，搜索任意软件下载页面，点击下载，弹出示例中“确认下载？”弹框。

onPageBegin事件

网页开始加载时触发该回调

示例

@Entry
@Component
struct Index {
   url : string = "https://www.baidu.com/";
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();

   build() {
     Column() {
       Web({ src: this.url, controller: this.controller  }).fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        .onPageBegin(e =>{
           console.log('onPageBegin url: '+e.url)
        })
     }
   }
}

onPageEnd事件

网页加载完成时触发该回调

结合WebController控制器的registerJavaScriptProxy方法进行展示，在网页加载完成时，注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。同时可以通过WebController控制器的deleteJavaScriptRegister方法删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。

WebController控制器部分方法：

registerJavaScriptProxy说明

registerJavaScriptProxy(options: { object: object, name: string, methodList: Array }): void

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。

  • options 参数说明
参数名参数类型必填默认值参数描述
objectobject是-参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean
namestring是-注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodListArray是-参与注册的应用侧JavaScript对象的方法。

deleteJavaScriptRegister说明

deleteJavaScriptRegister(name: string): void

删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。

  • 参数
参数名参数类型必填默认值参数描述
namestring是-注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。

refresh说明

refresh(): void

调用此接口通知Web组件刷新网页。

示例

@Entry
@Component
struct Index {
   @State text : number = 0;
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();
   @State contentFlag : boolean = false; //控制是否设置registerJavaScriptProxy
   //js回调ets层定义的方法
   contentCall = {
    callbackOne : () =>{
      this.text+=1;
      console.log('callbackOne success')
    },
    callbackTwo : () =>{
      this.text-=1;
      console.log('callbackTwo success')
    }
   }

   build() {
     Column() {
      Text('js修改ets属性text:'+this.text.toString()).fontSize(25)
      Text('ets调用js方法改变text值+1').fontSize(25)
      .onClick(()=>{
        //调用js方法
        this.controller.runJavaScript({ script: "change_text_add()" })
      })
      Text('ets调用js方法改变text值-1').fontSize(25)
      .onClick(()=>{
        //调用js方法
        this.controller.runJavaScript({ script: "change_text_reduce()" })
      })
      Text('ets调用js方法改变web显示').fontSize(25)
      .onClick(()=>{
         this.controller.runJavaScript({script:"change_html_context('"+this.text+"')"})
      })
      Text('删除registerJavaScriptProxy注册').fontSize(25).onClick(()=>{
         this.controller.deleteJavaScriptRegister("callBackToApp")
        this.contentFlag = false;
      })
       Web({ src: $rawfile('index.html'), controller: this.controller })
        .fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        .onPageEnd(e => {
          if(this.contentFlag == false){
            this.controller.registerJavaScriptProxy({
              object : this.contentCall,
              name : "callBackToApp", // html-->  name.method
              methodList : ["callbackOne","callbackTwo"],
            })
            console.log('finish registerJavaScriptProxy');
            this.controller.refresh() //注册代理之后需要刷新web
            this.contentFlag = true
          }
          // test()在index.html中定义
          this.controller.runJavaScript({ script: 'test()' });
          console.info('onPageEnd url: ', e.url);
        })
     }
   }
}

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
<div id="indexjs" contenteditable="true"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

var INDEX = {};

INDEX.editor = document.getElementById('indexjs'); //获取html中元素

INDEX.setHtml = function(contents) {
    INDEX.editor.innerHTML = contents; //给id=“indexjs”的div元素赋值
}

function change_html_context(contents) {
    console.info('test strat');
    INDEX.setHtml(contents);
    console.info('test end');
}

//ets调用js方法，间接回调ets的方法
function change_text_add() {
    console.log('change_text_add start');
    var str = callBackToApp.callbackOne(); //js调用ets方法，实现ets访问
    console.log('change_text_add end');
}

//ets调用js方法，间接回调ets的方法
function change_text_reduce() {
    console.log('change_text_reduce start');
    var str = callBackToApp.callbackTwo(); //js调用ets方法，实现ets访问
    console.log('change_text_reduce end');
}

function test() {
    console.info('Ark Web Component');
}

index.html和index.js放在rawfile目录下。

示例图

img

操作步骤：

  • 点击"ets调用js方法改变text值+1"，将text设置为1
  • 点击"ets调用js方法改变web显示"，text的值会显示在web组件中
  • 点击"ets调用js方法改变text值-1"，将text设置为-1
  • 再次点击"ets调用js方法改变web显示"，text的值会显示在web组件中
  • 点击"删除registerJavaScriptProxy注册",ets无法再调用js方法

onErrorReceive事件、onHttpErrorReceive事件

  • onErrorReceive事件：网页加载遇到错误时触发该回调。

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

示例

@Entry
@Component
struct Index {
   url : string = "https://www.baidu.com/";
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();

   build() {
     Column() {
       Web({ src: this.url, controller: this.controller  }).fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        //网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调
        .onHttpErrorReceive((event?: {
          request: WebResourceRequest,
          response: WebResourceResponse
        }) => {
          console.log('onHttpErrorReceive response.getReasonMessage: '+event.response.getReasonMessage())
          console.log('onHttpErrorReceive response.getResponseCode: '+event.response.getResponseCode())
          console.log('onHttpErrorReceive response.getResponseEncoding: '+event.response.getResponseEncoding())
          console.log('onHttpErrorReceive response.getResponseData: '+event.response.getResponseData())
          console.log('onHttpErrorReceive response.getResponseHeader: '+JSON.stringify(event.response.getResponseHeader()))
          console.log('onHttpErrorReceive response.getResponseMimeType: '+event.response.getResponseMimeType())
        })
        //网页加载遇到错误时触发该回调
        .onErrorReceive((event?: {
          request: WebResourceRequest,
          error: WebResourceError
        }) => {
          console.log('onErrorReceive error.getErrorCode: '+event.error.getErrorCode())
          console.log('onErrorReceive error.getErrorInfo: '+event.error.getErrorInfo())
        })
     }
   }
}

onTitleReceive事件

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

示例

@Entry
@Component
struct Index {
   url : string = "https://www.baidu.com/";
   // 定义Web组件的控制器controller
   controller: WebController = new WebController();
   build() {
     Column() {
       Web({ src: this.url, controller: this.controller  }).fileAccess(true)
        .javaScriptAccess(true)
        .zoomAccess(true)
        .imageAccess(true)
        .height(500)
        .padding(20)
        .onTitleReceive(e =>{
           console.log('onTitleReceive title: '+JSON.stringify(e.title))
        })
     }
   }
}

示例中，在网页中跳转不同页面，title信息会改变。

WebController控制器

通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件，且必须在Web组件和WebController绑定后，才能调用WebController上的方法。

accessBackward

accessBackward(): boolean

当前页面是否可后退，即当前页面是否有返回历史记录。

示例

@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('accessBackward').onClick(()=>{
           this.controller.accessBackward()
           console.log('accessBackward retrun: '+JSON.stringify(this.controller.accessBackward()))
        })
        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中页面停留百度首页，和通过百度首页跳至任意页面，accessBackward分别返回0和1，说明页面在百度首页时，不可后退，其他页面均可后退。

accessForward

accessForward(): boolean

当前页面是否可前进，即当前页面是否有前进历史记录。

示例

@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('accessForward').onClick(()=>{
          //this.controller.accessForward()
          console.log('accessForward retrun: '+JSON.stringify(this.controller.accessForward()))
        })
        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中通过百度首页顺序跳转第二网页和第三网页，页面在百度首页和第三网页，accessForward返回0，在第二网页，accessForward返回1。

accessStep

accessStep(step: number): boolean

当前页面是否可前进或者后退给定的step步。

  • 参数
参数名参数类型必填默认值参数描述
stepnumber是-要跳转的步数，正数代表前进，负数代表后退。
  • 返回值
参数类型说明
boolean页面是否前进或后退
@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('accessStep').fontSize(25).onClick(()=>{
          this.controller.accessStep(-2)
          console.log('accessStep retrun: '+JSON.stringify(this.controller.accessStep(-2)))
        })

        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中accessStep参数是-2，代表能否后退2步，通过百度首页顺序跳转第二网页和第三网页，页面在百度首页或者第二页时，accessStep返回0，页面在第三页时accessStep返回1。

backward

backward(): void

按照历史栈，后退一个页面。一般结合accessBackward一起使用。

@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('backward').fontSize(25).onClick(()=>{
           if(this.controller.accessBackward()){
             this.controller.backward()
             console.log('backward success')
           }else{
             console.log('backward fail')
           }
        })

        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中，当this.controller.accessBackward()返回true时， this.controller.backward()执行成功，页面返回上一页。

forward

forward(): void

按照历史栈，前进一个页面。一般结合accessForward一起使用。

@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('forward').fontSize(25).onClick(()=>{
           if(this.controller.accessForward()){
             this.controller.forward()
             console.log('forward success')
           }else{
             console.log('forward fail')
           }
        })
        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中，this.controller.accessForward()返回true时，this.controller.forward()执行成功，页面前进至下一页。

getHitTest

getHitTest(): HitTestType

获取当前被点击区域的元素类型。

  • HitTestType枚举说明
名称描述
EditText可编辑的区域。
Email电子邮件地址。
HttpAnchor超链接。其src为http。
HttpAnchorImg带有超链接的图片，其中超链接的src为http。
ImgHTML::img标签。
Map地理地址。
Unknown未知内容。
@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('getHitTest').fontSize(25).onClick(()=>{
           console.log('getHitTest: '+JSON.stringify(this.controller.getHitTest())）
        })

        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中，通过百度首页分别点击一个新闻文字链接和图片链接，getHitTest返回2和3，分别表示HttpAnchor和HttpAnchorImg。

loadUrl

loadUrl(options:{ url: string, headers?: Array

}): void

使用指定的http头加载指定的URL。

通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。

而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。

  • options参数说明
参数名参数类型必填默认值参数描述
urlstring是-需要加载的 URL。
headersArray
否[]URL的附加HTTP请求头
@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('loadUrl').fontSize(25).onClick(()=>{
          this.controller.loadUrl({url:"https://www.huawei.com/cn/"})
          console.log('loadUrl')
        })

        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中，点击loadUrl会跳转至指向的网址-华为官网。

stop

stop(): void

停止页面加载。

@Entry
@Component
struct webControllerDemo{
    url : string = "https://www.baidu.com/";
    // 定义Web组件的控制器controller
    controller: WebController = new WebController();
    build(){
      Column() {
        Text('stop').fontSize(25).onClick(()=>{
          this.controller.stop()
          console.log('stop')
        })
        Web({ src: this.url, controller: this.controller })
          .fileAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(true)
          .imageAccess(true)
          .height(500)
          .padding(20)
      }
    }
}

示例中，当点击任意页面后，立即点击stop，正在加载的网页，会停止加载。

参考文献

[1] OpenHarmony开发者文档Web组件介绍. https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md

...全文
10591 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
weixin_72464222 2023-04-24
  • 打赏
  • 举报
 回复

学习了

OpenHarmony 实战开发——一文总结ACE代码框架
ACE_Engine框架是OpenAtom OpenHarmony（简称“OpenHarmony”）的UI开发框架，为开发者提供在进行应用UI开发时所必需的各种组件，以及定义这些组件的属性、样式、事件及方法，通过这些组件可以方便进行OpenHarmony上UI应用的开发。ACE_Engine提供的组件分为两种类型，即类Web开发范式类型和声明式开发范式类型。其中类Web开发范式中定义一个页面需要三个文件，html，css和js文件。
OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解
JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。5.写一些公共样式，我们到MainAbilty里新建一个common文件夹，然后在下面新建一个css文件夹，作用于存放我们的公共样式。主要运用了web三件套：Html，Css，JavaScript。因为我们需要美化的属于组件，我们直接可以到myinput.css对其进行样式美化。然后在我们的主要的css文件内引用我们的公共样式。
OpenHarmony Flutter 树形视图组件开发详解
本文介绍了在OpenHarmony平台上使用Flutter实现树形视图组件的方法。树形视图通过递归方式展示层级数据，核心功能包括层级展示、展开/收起和节点类型区分。文章详细解析了数据模型设计、递归节点构建和主视图实现的技术方案，并提供了节点选择、复选框支持和搜索等高级功能的扩展实现。该组件采用递归Widget构建树形结构，通过缩进展示层级关系，使用Set存储展开节点，能有效区分文件夹和文件节点，为开发者提供了完整的树形视图实现方案。
鸿蒙应用开发--web组件加载web网页--待更新
维度核心职责管理网页加载、JS 交互、导航管理弹窗显示/隐藏、内容更新生命周期需手动调用 destroy() 释放资源自动管理，关闭时释放数据交互通过 registerJavaScriptProxy 通信通过 @Link/@Prop 同步数据典型使用场景内嵌浏览器、混合应用页面用户提示、表单输入、临时操作面板。
OpenHarmony应用开发—ArkUI组件集合
使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能。使用全局组件TitleBar，AttributeModificationTool实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能。若不存在三级导航，则跳转至详情页面。使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能。
OpenHarmony开发者社区

577

社区成员

1,840

社区内容

发帖
与我相关
我的任务
社区描述
OpenHarmony开发者社区
其他 企业社区
社区管理员
  • csdnsqst0025
  • shewaliujingli
  • BaoWei
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单

试试用AI创作助手写篇文章吧

+ 用AI写文章