ArkTS开发系列之Web组件的学习（2.9）-EW帮帮网

上篇回顾：ArkTS开发系列之事件（2.8.2手势事件）

本篇内容： ArkTS开发系列之Web组件的学习（2.9）

一、知识储备

Web组件就是用来展示网页的一个组件。具有页面加载、页面交互以及页面调试功能

1. 加载网络页面

      Web({ src: this.indexUrl, controller: this.webViewController })

2. 加载本地页面

      Web({ src: $rawfile('local.html'), controller: this.webViewController })

3. 加载html格式的文本数据

该示例中，是点击button后开始加载html格式的文本数据

      Button('加载html文本内容')
        .onClick(event => {
          this.webViewController.loadData(
            "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
            "text/html",
            "UTF-8"
          );
        })
     
      Web({ src: this.indexUrl, controller: this.webViewController })

4.深色模式设置

      Web({ src: this.indexUrl, controller: this.webViewController })
        .darkMode(WebDarkMode.On) //设置深色模式
        .forceDarkAccess(true)//强制生效

5. 文件上传

      Web({ src: $rawfile('local.html'), controller: this.webViewController })
        .onShowFileSelector(event=>{
        //设置要上传的文件路径
          let fileList: Array<string> =[

          ]
          if (event) {
            event.result.handleFileList(fileList)
          }
          return true;
        })

6. 在新容器中打开页面

通过multiWindowAccess()来设置是否允许网页在新窗口中打开。有新窗口打开时，应用侧会在onWindowNew()接口中收到新窗口事件，需要我们在此接口中处理web组件的窗口请求

.onWindowNew(event=>{
}

如果开发者在onWindowNew()接口通知中不需要打开新窗口，需要将ControllerHandler.setWebController()接口返回值设置成null。

7. 管理位置权限

        .geolocationAccess(true)

8. 应用调用html的js函数

      Web({ src: $rawfile('local.html'), controller: this.webViewController })
        .javaScriptAccess(true)

this.webViewController.runJavaScript('htmlTest()')

9. 前端调用应用函数

在web组件初始化的时候注入javaScriptProxy()

  @State testObj: TestClass = new TestClass(); //注册应用内js调用函数的对象

      Web({ src: $rawfile('local.html'), controller: this.webViewController })
        .javaScriptProxy({//将对角注入到web端
          object: this.testObj,
          name: 'testObjName',
          methodList: ['test'],
          controller: this.webViewController
        })

在web组件初始化完成后注入registerJavaScriptProxy()

 this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);

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

  aboutToAppear() {
    try {
      //1.在这里初始化ports
      this.ports = this.webViewController.createWebMessagePorts();
      this.ports[1].onMessageEvent((result: webview.WebMessage) => { //2.接收消息，并根据业务处理消息
        let msg = '读取网页消息'
        if (typeof (result) == 'string') {
          msg = msg + result;
        } else if (typeof (result) == 'object') {
          if (result instanceof ArrayBuffer) {
            msg = msg + " result length: " + result.byteLength;
          } else {
            console.error('msg not support')
          }
        } else {
          console.error('msg not support')
        }

        this.receiveMsgFromHtml = msg;

        // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
        this.webViewController.postMessage('__init_port__', [this.ports[0]], "*");
      })
    } catch (err) {
      console.error('err: ' + JSON.stringify(err))
    }
  }


//4.给html发消息
              this.ports[1].postMessageEvent(this.sendFromEts)

11. 管理web组件的页面跳转和浏览记录

          this.controller.backward()

          this.controller.forward()

从web组件跳转到hap应用内的页面

      Web({ controller: this.controller, src: $rawfile('route.html') })
        .onUrlLoadIntercept(event => {
          let url: string = event.data as string;
          if (url.indexOf('native://') === 0) {
            router.pushUrl({ url: url.substring(9) })
            return true;
          }
          return false;
        })

跨应用的页面跳转

            call.makeCall(url.substring(6), err => {
              if (!err) {
                console.info('打电话成功')
              } else {
                console.info('拨号失败' + JSON.stringify(err))
              }
            })

12. 管理Cookie及数据存储

Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中。
由WebCookieManager管理cookie

      webview.WebCookieManager.setCookie('https://www.baidu.com','val=yes') //存储cookie

四种缓存策略(Cache)
Default : 优先使用未过期的缓存，如果缓存不存在，则从网络获取。
None : 加载资源使用cache，如果cache中无该资源则从网络中获取。
Online : 加载资源不使用cache，全部从网络中获取。
Only ：只从cache中加载资源。
清除缓存

this.controller.removeCache(true);

是否持久化缓存domStorageAccess

domStorageAccess(true) ///true是Local Storage持久化存储；false是Session Storage，会随会话生命周期释放

13. 自定义页面请求响应

通过对onIntercerptRequest接口来实现自定义

        .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => {

          if (!event) {
            return new WebResourceResponse();
          }
          let mRequest: WebResourceRequest = event.request as WebResourceRequest;

          console.info('url: ' + mRequest.getRequestUrl())
          if (mRequest.getRequestUrl().indexOf('https://www.baidu.com') === 0) {
            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;
        })

14.

第一步

  aboutToAppear() {
    // 配置web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

第二步

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

第三步

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

二、效果一览

在这里插入图片描述

三、源码大杂烩

import webview from '@ohos.web.webview'
import router from '@ohos.router';
import call from '@ohos.telephony.call';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  responseResource: WebResourceResponse = new WebResourceResponse();
  @State webdata: string = "<!DOCTYPE html>\n" +
  "<html>\n" +
  "<head>\n" +
  "<title>将www.baidu.com改成我</title>\n" +
  "</head>\n" +
  "<body>\n" +
  "<h1>将www.baidu.com改成我</h1>\n" +
  "</body>\n" +
  "</html>"

  build() {
    Column() {
      Button('上一页')
        .onClick(() => {
          this.controller.backward()
        })

      Button('下一页')
        .onClick(() => {
          this.controller.forward()
        })

      Web({ controller: this.controller, src: 'www.baidu.com' })
        // Web({ controller: this.controller, src: $rawfile('route.html') })
        .onUrlLoadIntercept(event => {
          let url: string = event.data as string;
          if (url.indexOf('native://') === 0) {
            router.pushUrl({ url: url.substring(9) })
            return true;
          } else if (url.indexOf('tel://') === 0) {
            call.makeCall(url.substring(6), err => {
              if (!err) {
                console.info('打电话成功')
              } else {
                console.info('拨号失败' + JSON.stringify(err))
              }
            })
            return true;
          }
          return false;
        })
        .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => {

          if (!event) {
            return new WebResourceResponse();
          }
          let mRequest: WebResourceRequest = event.request as WebResourceRequest;

          console.info('url: ' + mRequest.getRequestUrl())
          if (mRequest.getRequestUrl().indexOf('https://www.baidu.com') === 0) {
            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;
        })

      // webview.WebCookieManager.setCookie('https://www.baidu.com','val=yes')
    }
    .width('100%')
    .height('100%')
  }
}

import webview from '@ohos.web.webview';
import common from '@ohos.app.ability.common';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import geoLocationManager from '@ohos.geoLocationManager';

let context = getContext(this) as common.UIAbilityContext;
let atManager = abilityAccessCtrl.createAtManager();
try {
  atManager.requestPermissionsFromUser(context, ["ohos.permission.LOCATION", "ohos.permission.APPROXIMATELY_LOCATION"], (err, data) => {
    // let requestInfo: geoLocationManager.LocationRequest = {
    //   'priority': 0x203,
    //   'scenario': 0x300,
    //   'maxAccuracy': 0
    // };
    //
    // let locationChange = (location: geoLocationManager.Location): void => {
    //   if (location) {
    //     console.error('location = ' + JSON.stringify(location))
    //   }
    // };
    //
    // try {
    //   geoLocationManager.on('locationChange', requestInfo, locationChange);
    //   geoLocationManager.off('locationChange', locationChange);
    // } catch (err) {
    //   console.error('err : ' + JSON.stringify(err))
    // }
    console.info('data: ' + JSON.stringify(data))
    console.info("data permissions: " + JSON.stringify(data.permissions))
    console.info("data authResults: " + JSON.stringify(data.authResults))
  }
  )
} catch (err) {
  console.error('err : ', err)
}

class TestClass {
  constructor() {
  }

  test() {
    return '我是应用内函数';
  }
}

@Entry
@Component
struct Index {
  @State indexUrl: string = 'www.baidu.com';
  webViewController: webview.WebviewController = new webview.WebviewController();
  dialog: CustomDialogController | null = null
  @State testObj: TestClass = new TestClass(); //注册应用内js调用函数的对象

  ports: webview.WebMessagePort[]; //消息端口

  @State sendFromEts: string = '这消息将被发送到html'
  @State receiveMsgFromHtml: string = '这将展示接收到html发来的消息'

  aboutToAppear() {
    try {
      //1.在这里初始化ports
      this.ports = this.webViewController.createWebMessagePorts();
      this.ports[1].onMessageEvent((result: webview.WebMessage) => { //2.接收消息，并根据业务处理消息
        let msg = '读取网页消息'
        if (typeof (result) == 'string') {
          msg = msg + result;
        } else if (typeof (result) == 'object') {
          if (result instanceof ArrayBuffer) {
            msg = msg + " result length: " + result.byteLength;
          } else {
            console.error('msg not support')
          }
        } else {
          console.error('msg not support')
        }

        this.receiveMsgFromHtml = msg;

        // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
        this.webViewController.postMessage('__init_port__', [this.ports[0]], "*");
      })
    } catch (err) {
      console.error('err: ' + JSON.stringify(err))
    }
  }

  build() {
    Column() {
      Button('加载html文本内容')
        .onClick(event => {
          this.webViewController.loadData(
            "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
            "text/html",
            "UTF-8"
          );
        })
      Button('调用html的js函数')
        .onClick(event => {
          this.webViewController.runJavaScript('htmlTest()')
        })
      Button('web组件初始化完成后注入')
        .onClick(event => {
          this.webViewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test"]);
        })
      Text(this.receiveMsgFromHtml).fontSize(33)
      Button('给html端发消息')
        .onClick(() => {
          try {
            if (this.ports && this.ports[1]) {
              //4.给html发消息
              this.ports[1].postMessageEvent(this.sendFromEts)
            } else {
              console.error('ports init fail')
            }
          } catch (err) {
            console.error('ports init fail ' + JSON.stringify(err))
          }
        })

      // Web({ src: this.indexUrl, controller: this.webViewController })
      //   .darkMode(WebDarkMode.On) //设置深色模式
      //   .forceDarkAccess(true) //强制生效
      // Web({ src: $rawfile('window.html'), controller: this.webViewController })
      //   .javaScriptAccess(true)
      //   .multiWindowAccess(true)
      //   .onWindowNew(event=>{
      //     if (this.dialog) {
      //       this.dialog.close()
      //     }
      //
      //     let popController: webview.WebviewController = new webview.WebviewController();
      //
      //     this.dialog = new CustomDialogController({
      //       builder: NewWebViewComp({webviewController1: popController})
      //     })
      //     this.dialog.open()
      //     //将新窗口对应WebviewController返回给Web内核。
      //     //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
      //     //若不调用event.handler.setWebController接口，会造成render进程阻塞。
      //     event.handler.setWebController(popController)
      //   })

      Web({ src: $rawfile('postMsg.html'), controller: this.webViewController })

      // Web({ src: $rawfile('local.html'), controller: this.webViewController })
      //   .onShowFileSelector(event => {
      //     //设置要上传的文件路径
      //     let fileList: Array<string> = []
      //     if (event) {
      //       event.result.handleFileList(fileList)
      //     }
      //     return true;
      //   })
      //   .geolocationAccess(true)
      //   .javaScriptAccess(true)
      //   .javaScriptProxy({//将对角注入到web端
      //     object: this.testObj,
      //     name: 'testObjName',
      //     methodList: ['test'],
      //     controller: this.webViewController
      //   })
      //   .onGeolocationShow(event => {
      //     AlertDialog.show({
      //       title: '位置权限请求',
      //       message: '是否允许获取位置信息',
      //       primaryButton: {
      //         value: '同意',
      //         action: () => {
      //           event.geolocation.invoke(event.origin, true, false);
      //         }
      //       },
      //       secondaryButton: {
      //         value: '取消',
      //         action: () => {
      //           if (event) {
      //             event.geolocation.invoke(event.origin, false, false)
      //           }
      //         }
      //       },
      //       cancel: () => {
      //         if (event) {
      //           event.geolocation.invoke(event.origin, false, false)
      //         }
      //       }
      //
      //     })
      //   })
    }
    .width('100%')
    .height('100%')
  }
}

ArkTS开发系列之Web组件的学习（2.9）

上篇回顾：ArkTS开发系列之事件（2.8.2手势事件）

本篇内容： ArkTS开发系列之Web组件的学习（2.9）

一、知识储备

1. 加载网络页面

2. 加载本地页面

3. 加载html格式的文本数据

4.深色模式设置

5. 文件上传

6. 在新容器中打开页面

7. 管理位置权限

8. 应用调用html的js函数

9. 前端调用应用函数

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

11. 管理web组件的页面跳转和浏览记录

12. 管理Cookie及数据存储

13. 自定义页面请求响应

14.

二、效果一览

三、源码大杂烩

网站公告

今日签到

热门文章

最新发布

ArkTS开发系列之Web组件的学习（2.9）

上篇回顾：ArkTS开发系列之事件（2.8.2手势事件）

本篇内容： ArkTS开发系列之Web组件的学习（2.9）

一、知识储备

1. 加载网络页面

2. 加载本地页面

3. 加载html格式的文本数据

4.深色模式设置

5. 文件上传

6. 在新容器中打开页面

7. 管理位置权限

8. 应用调用html的js函数

9. 前端调用应用函数

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

11. 管理web组件的页面跳转和浏览记录

12. 管理Cookie及数据存储

13. 自定义页面请求响应

14.

二、 效果一览

三、 源码大杂烩

网站公告

今日签到

热门文章

最新发布

二、效果一览

三、源码大杂烩