HarmonyOS ArkWeb 开发完整指南（上篇）：Hybrid 应用鸿蒙化与 JSBridge

优质文章学习记录

— 7 min read

背景

Hybrid 应用开发是介于 Web 应用和系统应用两者之间的应用开发技术，兼具"系统应用良好交互体验"的优势和"Web 应用跨平台开发"的优势。

其主要原理是由 Native 通过 JSBridge 通道提供统一的 API，然后用 Html/CSS 实现界面，JS 来写业务逻辑，能够调用系统 API，最终的页面在 WebView 中显示。

这篇文章聊聊 ArkWeb 开发的几个核心话题：

  1. Hybrid 应用鸿蒙化方案（架构设计、JSBridge、API 鸿蒙化、组件鸿蒙化）
  2. 同层渲染 Web（原理、实现、生命周期）
  3. 基于 Web 的视频适配
  4. 网页跨域解决方案
  5. Web 组件拦截能力

本文是上篇，主要介绍 Hybrid 应用鸿蒙化方案、双端通信（JSBridge）和 API 鸿蒙化。下篇将介绍组件鸿蒙化（同层渲染）、视频适配、跨域解决方案和 Web 组件拦截能力。

Hybrid 应用鸿蒙化方案

整体架构

Hybrid 应用鸿蒙化方案的整体架构包含三个核心部分：

Ark 进程：

  • 由 ArkTS 引擎提供运行时，具备调用系统 API 的能力
  • 应用启动从 Ark 进程进入，完成 EntryAbility 的初始化并创建 HarmonyOS 应用页面
  • Ark 进程可以动态或者静态创建 Webview 运行时环境，并加载 html/css/js 资源文件

Webview 进程：

  • 默认支持标准 W3C API，对 ArkTS 侧资源的访问有限制
  • Webview 渲染能力主要由 Web 组件提供
  • 用户可以通过 Web 组件的属性配置是否开启同层渲染能力、是否允许执行 JavaScript 脚本等

JSBridge：

  • 上述两种进程的通讯机制，允许数据双向流动
  • Webview 进程通过 JSBridge 通道访问拓展 API

方案设计

Hybrid 应用鸿蒙化方案主要集中在三个方面：

  1. 双端通信 JSBridge 实现：前端与 ArkTS 进行双向通信的桥梁
  2. 拓展接口实现：针对 JS 侧平台相关的 API，提供一套 HarmonyOS 版本的实现
  3. 基于同层渲染的原生组件实现：使用系统提供的同层渲染能力，把部分性能要求比较高的前端组件改成 ArkTS 实现

业务实现中的关键点

Hybrid 应用鸿蒙化方案主要围绕双端通信、API 鸿蒙化、组件鸿蒙化三方面进行开发：

  • 双端通信：JS 侧使用 ArkTS 的通道，是鸿蒙化的基石
  • API 鸿蒙化：针对 JS 侧平台相关的 API，提供一套 HarmonyOS 版本的实现
  • 组件鸿蒙化：针对 Web 组件，以同层渲染的方式提供替代组件，以提升组件的性能与交互体验

双端通信（JSBridge）

JSBridge 扮演 Webview 进程与 ArkUI 主进程沟通的桥梁，是一种双向通信的机制。

HarmonyOS 系统提供 Web 组件以及@ohos.web.webview 等 ArkWeb API 来进行 Web 开发。可以通过 WebMessagePort 以及 javaScriptProxy 代理的方式实现 JSBridge。

WebMessagePort

WebMessagePort 是一种比较基础的消息发送以及接收机制，支持的消息类型为 string 和 ArrayBuffer。

具体业务消息内容的封装和解析需要从零设计，存在上手难、工作量大的特点。

JavaScriptProxy 代理

JavaScriptProxy 代理机制注入 ArkUI 主进程对象（如命名为 native）到 Webview 中，在 Webview 的 window 上生成对应代理对象，业务可以直接调用该代理对象的方法，相关的操作将作用到 ArkUI 主进程的 native 对象。

代码实例如下：

Web({ src:this.param.path, controller:this.webController }).zoomAccess(false).width(Const.WEB_CONSTANT_WIDTH).aspectRatio(1).margin({ left: Const.WEB_CONSTANT_MARGIN_LEFT, right: Const.WEB_CONSTANT_MARGIN_RIGHT, top: Const.WEB_CONSTANT_MARGIN_TOP}).onErrorReceive((event)=>{if(event?.error.getErrorInfo()==='ERR_INTERNET_DISCONNECTED'){this.getUIContext().getPromptAction().showToast({ message:$r('app.string.internet_err'), duration: Const.WEB_CONSTANT_DURATION});}if(event?.error.getErrorInfo()==='ERR_CONNECTION_TIMED_OUT'){this.getUIContext().getPromptAction().showToast({ message:$r('app.string.internet_err'), duration: Const.WEB_CONSTANT_DURATION});}}).onProgressChange((event)=>{if(event?.newProgress === Const.WEB_CONSTANT_PROGRESS_MAX){this.isLoading =false;clearInterval(this.intervalLoading);this.intervalLoading =-1;}}).javaScriptProxy({ object:this.linkObj, name:'linkObj', methodList:['messageFromHtml'], controller:this.webController })

前端可以使用 native.makePhoneCall(…) 的方式进行调用。且方法的参数支持基本类型、字典对象、函数等，对于 JSBridge 的设计提供了便利。

通过对比，javaScriptProxy 注入对象的方式构造 JSBridge 是一个比较好的技术选型。

JSBridge 分层设计

建议 JSBridge 的实现基于注入机制进行设计，并考虑分层设计来提高其通用性和灵活性：

通信层：

  • 对上层屏蔽具体的通信机制，主要负责 Web 侧和 ArkTS 侧数据的传递
  • 但不解析数据的业务含义，不关注传递的数据内容
  • 数据可以序列化为字符串进行传递或者以 object 对象进行传递

通道层（Channel）：

  • 允许注册多种方法层通道
  • 该层的 JS 侧实现负责把方法层的 API 信息对象（包含名称、参数、返回值类型等信息）打包成通信层识别的信息数据，交给通信层传递到 ArkTS 侧
  • ArkTS 侧的实现包含两个主要功能：
    • 把信息数据解包出 API 的信息，并交给 ArkTS 侧的方法层调用具体的 API
    • 执行 jsCall，ArkTS 侧通过 WebviewController.runJavaScript() 方法在执行 JS 侧的回调函数

在 JS 侧，nativeCall() 方法提供打包转换能力：

functionopenDialog(){ linkObj.messageFromHtml(prizesArr[prizesPosition]);}

在 ArkTS 侧，通过 runJavaScript() 执行 JS 侧方法：

Button($r('app.string.btnValue')).fontSize(Const.WEB_CONSTANT_BUTTON_FONT_SIZE).fontColor($r('app.color.start_window_background')).margin({ top: Const.WEB_CONSTANT_BUTTON_MARGIN_TOP}).width(Const.WEB_CONSTANT_BUTTON_WIDTH).height(Const.WEB_CONSTANT_BUTTON_HEIGHT).backgroundColor($r('app.color.blue')).borderRadius(Const.WEB_CONSTANT_BUTTON_BORDER_RADIUS).onClick(()=>{this.webController.runJavaScript('startDraw()');})

方法层（MethodChannel）：

  • 可以针对一类 API 格式封装成一种 MethodChannel
  • 同种 MethodChannel 的 API 具备一致的参数规范、返回值规范，比如小程序 API 规范
  • 这样便于把 API 的调用信息封装成结构化的信息对象，供给通道层进行传递

JSBridge 的设计是否合理关系到应用的性能，开发者也可以考虑是否需要批量缓存请求再统一发送请求来减少请求次数，或者把不变的请求结果进行缓存等等。

API 鸿蒙化

H5 业务设计中除了使用 W3C API 外，还可以使用 ArkTS 侧 API 拓展来访问设备。

系统高阶 API 是对系统 API 的一层封装，实现更符合业务要求的接口。

拓展 API 的规范设计具有较大的灵活性，建议对 API 的参数，返回值类型格式进行限制，使用基本类型或者简单的字典对象，尽量避免使用复杂的类型的参数或返回值。

可以参考比较成熟的小程序框架，其规范格式可以分成三种类型：

  1. func(paramObj)：其中 paramObj 包含基本类型的数据属性以及 success/fail/complete() 回调函数
  2. on/offFunc(callback)：注册和移除监听函数
  3. getXxManager(): obj：获取某类功能的全局单例管理器，如文件管理器。管理器的方法也遵守上述两点规范

设计过程中可以把 API 都汇聚到一个对象作为属性字段存在，方便在切面视角增加统一的参数、返回值加工处理，拦截处理。

上篇总结

上篇介绍了 Hybrid 应用鸿蒙化方案和双端通信：

Hybrid 应用鸿蒙化方案

  • 整体架构（Ark 进程、Webview 进程、JSBridge）
  • 方案设计（双端通信、拓展接口、同层渲染）
  • 业务实现关键点（双端通信、API 鸿蒙化、组件鸿蒙化）

双端通信（JSBridge）

  • WebMessagePort（基础消息机制）
  • JavaScriptProxy 代理（注入对象方式）
  • JSBridge 分层设计（通信层、通道层、方法层）

API 鸿蒙化

  • 系统高阶 API 封装
  • 三种规范格式（func/on-offFunc/getXxManager）

下篇预告：组件鸿蒙化（同层渲染）、基于 Web 的视频适配、网页跨域解决方案、Web 组件拦截能力。

Read more

GLM-4.6V-Flash-WEB Web界面使用指南，拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南，拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口，几秒钟后，它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告，而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型，专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里，而是真正做到了：部署快、启动快、响应快、上手更快。一块RTX 3090，一个浏览器，一次拖拽，结果即刻呈现。 本文不讲训练原理，不列参数表格，不堆技术术语。我们只聚焦一件事：怎么用好它的Web界面？从零开始，到稳定产出，每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术？ 很多多模态模型标榜“支持图文理解”，但实际用起来才发现：要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS（跨站脚本攻击）

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境（npm/yarn） 2. 浏览器环境 核心 API 基础使用 1. 基础过滤（默认规则） 2. 自定义过滤规则 （1）允许特定标签 （2）允许特定属性 （3）自定义标签处理 （4）自定义属性处理 （5）转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签（如富文本编辑器内容） 注意事项 更多配置 XSS（跨站脚本攻击）是一种常见的网络攻击手段，它允许攻击者将恶意脚本注入到其他用户的浏览器中。
详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）

详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题（CORS） 作为一名后端工程师，理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具（F12）查看和分析这些信息，并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章，打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧：用截图秒修前端Bug的保姆级教程（React/Chakra UI案例）

Cursor+Codex隐藏技巧：用截图秒修前端Bug的保姆级教程（React/Chakra UI案例） 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在，通过Cursor编辑器集成的Codex功能，你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始，掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前，确保你已经具备以下环境： * Cursor编辑器最新版（v2.5+） * Node.js 18.x及以上版本 * React 18项目（本文以Chakra UI 2.x为例） 首先在Cursor中安装Codex插件： 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户（需要ChatGPT Plus订阅） 关键配置项： // 在项目根目录创建.