当前位置：首页 > news >正文

鸿蒙搭配前端开发：应用端与WEB端交互

news 2025/9/4 8:22:41

鸿蒙系统（HarmonyOS）是华为开发的一款面向全场景的分布式操作系统，其设计初衷是为了适应物联网时代的需求，旨在构建一个统一的操作系统，支持多种设备的无缝协同工作。其分布式开发的一些主要优势：

跨设备协同：鸿蒙系统支持跨设备的分布式软总线技术，使得不同类型的设备能够像一台设备一样协同工作，实现资源共享和服务迁移。
一次开发多端部署：开发者可以使用一套代码库开发出能在不同设备上运行的应用程序，这大大减少了开发成本和维护复杂度。这种“写一次，到处运行”的能力提高了开发效率。
灵活的模块化设计：鸿蒙应用可以被拆分成多个可独立部署的服务模块（Ability），每个模块可以根据需要部署在不同的设备上。这样的模块化设计有助于实现按需加载和服务的动态组合。
强大的安全机制：鸿蒙系统内置了多层次的安全机制，包括设备认证、数据加密、权限控制等，确保设备间的通信安全以及用户数据的安全。
高性能的通信能力：利用鸿蒙系统的分布式软总线技术，设备间的通信延迟更低，数据传输速度更快，为用户提供更加流畅的体验。
低功耗优化：针对物联网设备的特点，鸿蒙系统特别优化了功耗管理，能够在保证用户体验的同时延长设备的续航时间。

下面，给友友们分享鸿蒙开发中应用端与WEB段交互的手段-通过特定的API暴露给Web页面一些原生的能力。

WEB组件加载页面

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。本次分享主要是加载网路页面，涉及网络资源的获取，首先要配置ohos.permission.INTERNET网络访问权限。

@ohos.web.webview模块为网页控制提供 API，它用于显示网页。
通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。
Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页，设备需为4.1.0及以上版本。
web({ src: " ". controller: tis.controller })设置了加载页面的url
domStorageAccess(domStorageAccess: boolean)
设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
fileAccess(fileAccess: boolean)
设置是否开启应用中文件系统的访问，默认启用。$rawfile(filepath/filename)中rawfile路径的文件不受该属性影响而限制访问。
javaScriptAccess(javaScriptAccess: boolean)
设置是否允许执行JavaScript脚本，默认允许执行。
mixedMode(mixedMode: MixedMode)
设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。
使用当前窗口实例，便于后期调用接口。

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
import window from '@ohos.window'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {aboutToAppear() {// 设置不显示导航栏和状态栏window.getLastWindow(this.context).then((data) => {data.setWindowSystemBarEnable([]).then(() => {LogUtil.debug('Succeeded in setting the system bar to be invisible.');});});// 配置Web开启调试模式web_webview.WebviewController.setWebDebuggingAccess(true);}// 组件创建时，加载www.example.comWeb({ src:"http://10.1.1.12:8989/", controller: this.controller }).javaScriptAccess(true).fileAccess(true).domStorageAccess(true).mixedMode(MixedMode.All)}}
}

WEB端调用应用端函数

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

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。

下面讲解使用registerJavaScriptProxy()接口的方法:

javaScriptProxy()用于注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy()
registerJavaScriptProxy提供了应用与Web组件加载的网页之间强大的交互能力。
注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
import { GetTest } from '../common/GetTest';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {aboutToAppear() {// 配置Web开启调试模式web_webview.WebviewController.setWebDebuggingAccess(true);}// 组件创建时，加载www.example.comWeb({ src:"http://10.1.1.12:8989/", controller: this.controller }).javaScriptAccess(true).fileAccess(true).domStorageAccess(true).mixedMode(MixedMode.All)}}
private registerJavaScript() {// TODO 如何将多个对象注入到同一个window对象中let getTest = new GetTest()this.controller.registerJavaScriptProxy(getTest, "getTest", ["say"])this.controller.refresh()}
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>function callArkTS() {let str = window.getTest.say();document.getElementById("demo").innerHTML = str;console.info('ArkTS Hello World! :' + str);}
</script>
</body>
</html>

此时在前端页面中就可以看到打印内容啦。

更新！2025.02.24

鸿蒙ArkTS代码实现原生功能注入到Vue前端的原理详解：

通过 ArkTS Web组件 创建混合应用框架，利用 JavaScript桥接 技术实现原生能力注入。整体流程为：

鸿蒙原生能力 → 通过JS桥接注入 → Webview全局对象 → Vue组件调用

注册JS代理

private registerJavaScript() {let getTest = new GetTest()this.controller.registerJavaScriptProxy(getTest,        // 原生对象实例"getTest",      // 注入到window的对象名["say"]         // 暴露的方法白名单)this.controller.refresh() // 重新加载使注入生效
}

这是桥接实现的核心方法，关键参数说明：