
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<script>
    function htmlTest() {
        console.info('JavaScript Hello World! ');
    }
</script>
</body>
</html>

应用侧代码


import web_webview from '@ohos.web.webview';
 
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
 
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
      Button('runJavaScript')
        .onClick(() => {
           this.webviewController.runJavaScript('htmlTest()');
        })
    }
  }
}

2.前端页面调用应用侧函数

通过Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就调用应用侧的函数，实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式：

方式一：在Web组件初始化使用调用，使用javaScriptProxy()接口

方式二：在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口

应用侧代码


import web_webview from '@ohos.web.webview';
 
class testClass {
  constructor() {
  }
 
  test(): string {
    return 'ArkTS Hello World!';
  }
}
 
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
//step1：声明需要注册的对象
  @State testObj: testClass = new testClass();
 
  build() {
    Column() {
//step2：web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
//step3：通过javaScriptProxy将对象注入到web端
        .javaScriptProxy({
          object: this.testObj,
          name: "testObjName",
          methodList: ["test"],
          controller: this.webviewController
        })
//step4：通过registerJavaScriptProxy将对象注入到web端
        Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", 
            ["test", "toString"]);
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
//step5：使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效。
        Button('refresh')
        .onClick(() => {
          try {
            this.webviewController.refresh();
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
    }
  }
}

前端页面代码


<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
//step1: 使用注册的对象名称调用应用侧的函数
        let str = testObjName.test();
        document.getElementById("demo").innerHTML = str;
        console.info('ArkTS Hello World! :' + str);
    }
</script>
</body>
</html>

3.应用侧与前端页面数据通道

前端页面和应用侧之间可以用createWebMessagePorts()接口创建消息端口来实现两端的通信

二、页面跳转以及浏览记录导航

1.历史记录导航

在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录


import web_webview from '@ohos.web.webview';
 
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
//step1：如果accessBackward()接口会返回true，表示存在历史记录。如果accessForward()返回true，表示存在前进的历史记录。如果您不执行检查，当浏览到历史记录的末尾时，调用forward()和backward()接口时将不执行任何操作。
      Button('loadData')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
            return true;
          }
        })
      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
    }
  }
}

2.页面跳转

通过使用Web组件的onUrlLoadIntercept()接口实现点击网页中的链接跳转到应用内其他页面。

代码示例：应用首页Index.ets加载前端页面route.html，在前端route.html页面点击超链接，可跳转到应用的ProfilePage.ets页面

静态页面


<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
      <a href="native://pages/ProfilePage">个人中心</a>
   </div>
</body>
</html>

Index.ets


import web_webview from '@ohos.web.webview';
import router from '@ohos.router';
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
 
  build() {
    Column() {
      Web({ src: $rawfile('route.html'), controller: this.webviewController })
        .onUrlLoadIntercept((event) => {
          let url: string = event.data as string;
          if (url.indexOf('native://') === 0) {
//step1: 跳转应用其他页面
            router.pushUrl({ url:url.substring(9) })
            return true;
          }
          return false;
        })
    }
  }
}

ProfilePage.ets


@Entry
@Component
struct ProfilePage {
  @State message: string = 'Hello World';
 
  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
    }
  }
}

3.跨应用跳转

Web组件可以实现点击前端页面超链接跳转到其他应用

三、cookie以及数据存储

Cookie是网络访问过程中，由服务端发送给客户端的一小段数据。客户端可持有该数据，并在后续访问该服务端时，方便服务端快速对客户端身份、状态等进行识别。Web组件提供了WebCookieManager类，用于管理Web组件的Cookie信息。Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中

代码示例


import web_webview from '@ohos.web.webview';
 
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
 
  build() {
    Column() {
      Button('setCookie')
        .onClick(() => {
          try {
//step1：setCookie()为“www.example.com”设置单个Cookie的值“value=test”
            web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

2.缓存与存储管理

在访问网站时，网络资源请求是相对比较耗时的。开发者可以通过Cache、Dom Storage等手段将资源保持至本地，以提升访问同一网站的速度。

2.1 Cache

2.2 Dom Storage

四、自定义页面请求响应

Web组件支持在应用拦截到页面请求后自定义响应请求。通过onInterceptRequest()接口来实现自定义资源请求响应。用于开发者自定义Web页面响应、自定义文件资源响应等场景。Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载

前端页面


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
</head>
<body>
<!-- 页面资源请求 -->
<a href="https://www.example.com/test.html">intercept test!</a>
</body>
</html>

应用侧代码


import web_webview from '@ohos.web.webview'
 
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  responseResource: WebResourceResponse = new WebResourceResponse()
//step2：构造自定义响应数据
  @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: $rawfile('index.html'), controller: this.controller })
        .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => {
          if (!event) {
            return new WebResourceResponse();
          }
          let mRequest: WebResourceRequest = event.request as WebResourceRequest;
          console.info('TAGLee: url:'+ mRequest.getRequestUrl());
//step1：Web组件拦截页面请求“https://www.example.com/test.html”，如果加载的url判断与目标url一致则返回自定义加载结果webdata
          if(mRequest.getRequestUrl() === 'https://www.example.com/test.html'){
            // 构造响应数据
            this.responseResource.setResponseData(this.webdata);
            this.responseResource.setResponseEncoding('utf-8');
            this.responseResource.setResponseMimeType('text/html');
            this.responseResource.setResponseCode(200);
            this.responseResource.setReasonMessage('OK');
            return this.responseResource;
          }
          return;
        })
    }
  }
}

五、Devtools工具调试前端页面

Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在PC端调试移动设备上的前端网页

step1：在应用代码中开启Web调试开关

本地html文件

应用侧代码

step2：将设备连接上电脑，在电脑端配置端口映射


// 添加映射 
hdc fport tcp:9222 tcp:9222 
// 查看映射 
hdc fport ls

step3：在电脑端chrome浏览器地址栏中输入chrome://inspect/#devices，页面识别到设备后，就可以开始页面调试

模拟器中页面显示

电脑端chrome浏览器地址栏中输入chrome://inspect/#devices

页面识别到设备，页面调试

总结

本文详细学习了鸿蒙开发web中应用侧与前端页面的JS交互方式，同时学习页面跳转以及浏览器记录导航、页面缓存以及自定义页面返回处理，最后学习了Devtools工具的调试方式，下文将学习ArkTs语言基础类库。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/860643