【鸿蒙开发】 使用ArkWeb组件加载H5页面

已于 2024-04-10 14:16:01 修改
阅读量2.7k 收藏 32
点赞数 19
文章标签： harmonyos 鸿蒙 鸿蒙开发
于 2024-04-10 14:15:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56255097/article/details/137594870
版权

1. ArkWeb

相当于iOS/Android中的WebView控件，给个url就可以展示H5页面。

但是在项目中，我们需要考虑以下需求：

  • H5页面加载（处理页面加载的状态：成功、失败、加载中）
  • H5页面栈（window.history）管理
  • UserAgent管理
  • Cookie管理
  • Native和H5交互
  • 页面加载优化
  • Web页面调试

我也是带着这些问题去学习使用ArkWeb的。

2. 使用ArkWeb加载url

页面加载是Web组件最基本的功能了，支持三种场景：

  • 加载网络页面（需要配置ohos.permission.INTERNET网络访问权限）；
  • 加载本地页面；
  • 加载HTML格式的富文本数据；

我们以加载网络页面为例：

// 导入webview
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {

  private webviewController = new webview.WebviewController()

  build() {
    Stack() {
      Web({ src: "https://www.baidu.com", controller: this.webviewController })
        .onPageBegin((event) => {
          // 网页开始加载时触发该回调
        })
        .onPageEnd((event) => {
          // 网页加载完成时触发该回调
        })
        .onErrorReceive((event) => {
          // 网页加载遇到错误时触发该回调. 无网下会触发该回调
        })
        .onHttpErrorReceive((event) => {
          // 网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调
        })
        .onProgressChange((event) => {
          // 网页加载进度变化时触发该回调
        })
    }
  }
}

Web组件暴露了很多回调方法，我们可以在跟加载进度和状态的回调方法中设置webview在加载中、加载失败、加载成功的样式。

3. H5页面栈（window.history）管理

在上面的示例中，可以看到在创建Web组件的时候，传入了一个controller。我们没办法直接操作Web组件，只能通过controller去操作Web组件的行为，包括页面栈管理、页面刷新、执行JS等。

我们先来看下controller提供的管理页面栈的方法，如下所示：

// 判断当前页面是否可前进，是否有前进历史记录
accessForward(): boolean

// 判断页面是否可后退，即当前页面是否有返回历史记录
accessBackward(): boolean

// 按照历史栈，前进一个页面
forward(): void

// 按照历史栈，后退一个页面
backward(): void

// 删除所有前进后退记录
clearHistory(): void

4. UserAgent管理

默认的UserAgent定义如下： Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}

截屏2024-04-09 18.25.01.png

举例：

Mozilla/5.0 (Phone; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile

4.1 在webInited回调设置UA

目前在Preview1版本测试webInited对应的回调方法不会执行，等升级后再进行验证。🙋🙋🙋

如果我们想基于默认的UserAgent去定制UserAgent：

// 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();
  @State ua: string = ""

  aboutToAppear():void {
    web_webview.once('webInited', () => {
      try {
        // 应用侧用法示例，定制UserAgent。
        this.ua = this.controller.getUserAgent() + 'xxx';
      } catch(error) {
        let e:business_error.BusinessError = error as business_error.BusinessError;
        console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
      }
    })
  }

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .userAgent(this.ua)
    }
  }
}

上面的代码是在webInited回调中，通过this.controller.getUserAgent()获取默认的UA。once是webview提供的方法，用于订阅一次指定类型Web事件的回调，目前也仅支持webInited（Web初始化完成）事件。

4.2 在onControllerAttached回调中设置UA

controller中可以通过setCustomUserAgent方法来设置自定义用户代理，会覆盖系统的用户代理，推荐放在onControllerAttached回调中。

若需要setCustomUserAgent，在setCustomUserAgent方法后执行this.controller.loadUrl(this.webUrl)，webUrl为要加载的web页面，在原始的web组件的src可以设置一个空字符串。

import web_webview from '@ohos.web.webview'

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

  build() {
    Column() {
      // 这个src可以先设置为空的字符串
      Web({ src: '', controller: this.controller })
        .onControllerAttached(()=>{
          let userAgent = this.controller.getUserAgent() + "xxx";
          this.controller.setCustomUserAgent(userAgent);
          // 设置完UA之后，再次加载url
          this.controller.loadUrl("www.baidu.com")
        })
    }
  }
}

5. Cookie管理

Web组件提供了WebCookieManager类，用来管理Web组件的Cookie信息，Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中。

下面以configCookieSync接口举例，为 www.example.com设置单个Cookie的值：

// 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() {
      Button('configCookieSync')
        .onClick(() => {
          try {
            web_webview.WebCookieManager.configCookieSync('https://www.example.com', 'value=test');
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

WebCookieManager还提供了其他操作Cookie的方法，截图如下：

在这里插入图片描述

6. Native和H5交互

6.1 Native调用H5页面中的函数

Native可以通过runJavaScript()方法执行JavaScript，调用前端页面的JavaScript相关函数。

H5页面：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<script>
    var param = "JavaScript Hello World!";
    function htmlTest(param) {
        console.log(param);
    }
</script>
</body>
</html>

Native页面：

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

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

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

  build() {
    Column() {
      Button('runJavaScript')
        .onClick(() => {
          // 通过调用webviewController的runJavaScript方法执行js函数
          this.webviewController.runJavaScript('htmlTest(param)');
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
    }
  }
}

6.2 H5页面调用Native函数

Native需要先将应用侧代码注册到H5页面中，之后H5页面就可以使用注册的对象名称调用应用侧的函数，实现在H5页面中调用Native的方法。

有两种注册方式：

  • Web组件初始化调用，使用javaScriptProxy接口；
  • Web组件初始化完成后调用，使用registerJavaScriptProxy接口；

只是注册时机不同，其它都一样。这里以Web组件初始化调用为例，在Web组件初始化时进行注册：

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

// 用于注入的对象
class testClass {

  constructor() {
  }

  // H5页面要调用的方法
  test(): string {
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.testObj,
          name: "testObjName",  // H5会通过这个name调用方法
          methodList: ["test"], // 暴露有H5的方法
          controller: this.webviewController
        })
    }
  }
}

H5页面触发应用侧代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        // testObjName是Native侧注册的名称
        // test是Native侧暴露的方法名称
        let str = testObjName.test();
        document.getElementById("demo").innerHTML = str;
        console.info('ArkTS Hello World! :' + str);
    }
</script>
</body>
</html>

双方可以互相通信之后，就可以根据业务需要进行封装和分发事件了。

6.3 兼容DSBridge

当前项目iOS/Android和H5通信用的是DSBridg这个库（当时项目时间紧，所以没考虑自己封装）。

DSBridge的实现原理还是挺简单的，通过H5页面调用prompt方法来向Native传递数据，数据中会包括：

  • H5页面的回调函数名
  • 调用Native的目标方法名
  • 调用Native的目标方法参数

Native会拦截系统Webview的prompt方法，解析数据，在执行完方法之后通过H5页面传过来的回调函数名执行H5的回调方法。

如果我们要做鸿蒙版本的App，就需要考虑对鸿蒙版本App的兼容，有两个选择：

  • 鸿蒙App中实现DSBridge的逻辑，这样H5侧不需要任何改动；
  • 基于鸿蒙Web组件提供的方法封装一套鸿蒙App特有的逻辑，这需要H5侧在通信层进行系统判断处理；

由于当时这个库只支持了API9，我们是基于API11进行开发和学习的，为了避免作者更新不及时，我们选择自己仿照这个库的逻辑进行实现。

主要是能拦截到H5侧DSBridge的方法调用，先来看下DSBridge在H5侧的实现：

if(window._dsbridge) {
    // 这个是关键代码
    ret = _dsbridge.call(method, arg)
}else if(window._dswk || navigator.userAgent.indexOf("_dsbridge") != -1){
    ret = prompt("_dsbridge=" + method, arg);
}

_dsbridge.call(method, arg)是关键代码，跟上面6.2中H5调用Native的方法是很相似的。

所以，我们可以在Native侧对其进行注册：

import web_webview from '@ohos.web.webview'

class JSBridge {

  // 暴露给H5的唯一的方法
  call(methodName: string, params: string): string {
    // 这里可以获取到methodName和params
    return ""
  }

}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  jsbridge: JSBridge = new JSBridge()

  build() {
    Column() {
      // 这个src可以先设置为空的字符串
      Web({ src: '', controller: this.controller })
        .onControllerAttached(()=>{
          let userAgent = this.controller.getUserAgent() + "xxx";
          this.controller.setCustomUserAgent(userAgent);
          // 设置完UA之后，再次加载url
          this.controller.loadUrl("www.baidu.com")
        })
        .javaScriptProxy({
          object: this.jsbridge,
          name: "_dsbridge", // _dsbridge是固定名字
          methodList: ["call"], // call也是固定方法名
          controller: this.controller
        })
    }
  }
}

这样DSBridge在H5页面就可以通过_dsbridge.call(method, arg)调用到Native的call方法了，然后Native在call方法中解析数据，按照iOS/Android的实现逻辑进行实现即可。

怎样学习鸿蒙？

首先必学的是开发语言 ArkTS，这是重中之重，然后就是ArkUI声明式UI开发、Stage模型、网络/数据库管理、分布式应用开发、进程间通信与线程间通信技术、OpenHarmony多媒体技术……。中间还有许多的知识点，都整理成思维导图来分享给大家~
在这里插入图片描述
此外，小编精心准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

【有需要的小伙伴，可以扫描下方二维码免费领取！！！】

快速入门

  • 开发准备
  • 构建第一个ArkTS应用（Stage模型）
  • 构建第一个ArkTS应用（FA模型）
  • 构建第一个JS应用（FA模型）
    在这里插入图片描述

开发基础知识

  • 应用程序包基础知识
  • 应用配置文件（Stage模型）
  • 应用配置文件概述（FA模型）
    在这里插入图片描述

资源分类与访问

  • 资源分类与访问
  • 创建资源目录和资源文件
  • 资源访问
    在这里插入图片描述

学习ArkTs语言

  • 初识ArkTS语言
  • 基本语法
  • 状态管理
  • 其他状态管理
  • 渲染控制
    在这里插入图片描述

基于ArkTS声明式开发范式

  • UI开发（ArkTS声明式开发范式）概述
  • 开发布局
  • 添加组件
  • 显示图片
  • 使用动画
  • 支持交互事件
  • 性能提升的推荐方法

在这里插入图片描述

兼容JS的类Web开发范式

  • 概述
  • 框架说明
  • 构建用户界面
  • 常见组件开发指导
  • 动效开发指导
  • 自定义组件
    在这里插入图片描述

Web组件

  • 概述
  • 设置基本属性和事件
  • 并发
  • 窗口管理
  • WebGL
  • 媒体
  • 安全
  • 网络与连接
  • 电话服务
  • 数据管理
  • …
    在这里插入图片描述

应用模型

  • 概述
  • Stage模型开发指导
  • FA模型开发指导
    在这里插入图片描述
2024完整鸿蒙学习资料领取方式：扫描下方二维码即可
AI女王
关注
HTML5实现的页面加载效果
PmtxPhp的博客
09-24 616
通过以上代码，我们实现了一个简单而又炫酷的页面加载缓冲效果。你可以将上述HTML代码复制到一个新建的HTML文件中，并在浏览器中打开该文件，即可看到加载效果的展示。在网页设计中，为了提升用户体验，常常会使用加载缓冲效果来提示用户正在加载内容。的CSS类，用于包裹加载缓冲效果的容器。标签中，我们将实现加载缓冲效果的容器和相应的HTML结构。变换使圆形图形按顺时针方向旋转360度，从而实现了加载缓冲的效果。属性来设置边框的顶部颜色，这样加载效果就会呈现出旋转的动画效果。在上面的代码中，我们创建了一个名为。
HarmonyOS—使用Web组件加载页面
HarmonyOSDev的博客
08-31 2078
页面加载是 Web 组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载 HTML 格式的富文本数据。页面加载过程中，若涉及网络资源获取，需要配置网络访问权限。
鸿蒙next开发进阶：H5页面调用自定义输入法案例
m0_72493819的博客
06-18 1122
该场景多用于浏览器需要使用安全输入法时。
HarmonyOS NEXT鸿蒙开发入门，ArkWeb基础使用
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-19 606
ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、html格式文本数据。页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
ArkWeb简介
sinat_34896766的博客
08-15 839
Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。可以用于实现移动端的混合式开发（Hybrid App）。页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、HTML格式文本数据。页面交互：Web组件提供丰富的页面交互的方式，包括设置前端页面深色模式、新窗口中加载页面、位置权限管理、Cookie管理、应用侧使用前端页面JavaScript等能力。页面调试：Web组件支持使用Devtools工具调试前端页面。
鸿蒙——Web组件加载h5
priest44的博客
07-04 1151
Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、Html格式文本数据。页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。页面调试：Web组件支持使用Devtools工具调试前端页面。
鸿蒙ArkTS页面如何与H5页面交互？
自然 醒的博客
08-14 1025
在下面的示例中，点击App的“runJavaScript”按钮时，来触发html页面的htmlTest()方法。在开发App时，我们经常会遇到使用webView加载H5页面的场景，这样做的好处就不多加赘述了，那么鸿蒙App如何加载H5页面呢？，废话少说，直接上代码。鸿蒙App可以通过web组件的javaScriptProxy()注册代码，在H5页面调用注册的对象和方法名实现触发App的函数。鸿蒙的Web组件加载H5页面会出现很多意外的问题，我这里建议把。组件的以下两个选项开启，避免问题的产生。
鸿蒙ArkTs Web组件的基础用法以及H5层与应用层的通讯基础
weixin_44640245的博客
12-22 2877
鸿蒙ArkTs Web组件的基础用法以及H5层与应用层的通讯
鸿蒙webview与H5的交互
最新发布
m0_73196616的博客
09-12 509
解决在鸿蒙框架中使用webview后跳转H5项目在点击返回鸿蒙框架的功能
h5单页面上拉刷新下拉加载
10-16
在H5应用中，上拉刷新和下拉加载是提高用户体验的重要功能，尤其在移动设备上，用户可以方便地查看更多的内容而无需离开当前页面。本项目主要关注于实现这样的功能，结合了JavaScript和CSS技术，同时应用了tab选项卡...
OpenHarmony实战开发-如何使用Web组件加载页面
m0_70749039的博客
05-06 998
页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。
H5多种加载效果loading，H5页面加载中动画
03-07
H5多种加载效果loading，H5页面加载中动画，炫酷的加载中动画
H5非常炫酷的加载特效loading
12-08
H5非常炫酷的加载特效loading,简单实用
Android仿微信加载H5页面进度条
08-27
在Android开发中，为了提供更好的用户体验，特别是在加载H5页面时，我们经常需要模拟类似微信的加载进度条来展示网页加载的状态。这个功能可以通过自定义一个WebView子类并结合WebChromeClient来实现。以下是详细的...
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
10-16
1. **Webview显示H5页面**：使用`<web-view>`组件加载H5页面，确保本地链接在开发者工具中开启允许访问。 ```html <web-view src="http://localhost:8080/index.html"></web-view> ``` 2. **H5页面**： - 在H5...
在 HarmonyOS 上实现 ArkTS 与 H5 的交互
HarmonyOSDev的博客
11-13 3043
您已经完成了本次 Codelab 的学习，并了解到以下知识点：1. ArkTS 侧如何使用桥接通道提供给 H5 调用方法。2. H5 如何接收 ArkTS 侧的异步数据。
微信H5使用resLoader实现加载页效果
jiameng15的博客
01-12 2005
微信H5没有页面加载效果是一种什么样的体验
【鸿蒙开发】第十八章 Web组件（二）
Yvan
03-09 1129
Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过接口来实现自定义资源请求响应。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。在下面的示例中，Web组件通过拦截页面请求“https://www.example.com/test.html”， 在应用侧代码构建响应资源，实现自定义页面响应场景。
鸿蒙——H5和原生是怎么通信的?
priest44的博客
06-21 1059
首先通过原生端的webviewController进行创建通信端口，createMessagePorts, 该方法会创建两个端口，一个用作原生端，一个用作h5端。此时，h5端用接收的端口发送消息给原生端，原声端用自己剩余的端口进行onMessage接听消息，此时就可以实现双向通信。需要注意的点: 如果原生端的sdk方法是个异步方法，在h5端无法及时得到结果，此时需要再用原生反调h5进行传递结果。原生端可以通过javascriptProxy给h5页面注入可用的sdk应用方法集合，在h5完成初始化后，可。
app加载h5页面很慢
05-25
可能有多种原因导致app加载h5页面很慢，以下是一些可能的解决方案： 1. 网络问题：确保网络连接良好，可以尝试使用其他网络连接方式或者更换网络环境。 2. 服务器问题：如果h5页面是从服务器上加载的，可能是服务器响应时间较慢，可以联系服务器维护人员进行优化。 3. 页面优化：优化h5页面的代码结构、图片大小、CSS和JavaScript文件等，可以减少页面加载时间。 4. 缓存问题：使用浏览器缓存或者应用内缓存可以减少页面加载时间，可以尝试开启缓存功能。 5. 资源合并：将多个CSS和JavaScript文件合并成一个文件，可以减少网络请求次数，从而加快页面加载速度。 6. 使用CDN加速：使用CDN可以将静态资源缓存在离用户最近的服务器上，从而减少网络延迟和提高访问速度。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值