鴻蒙系統（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() // 重新加載使注入生效
}這是橋接實現的核心方法，關鍵參數說明：
-
getTest：封裝了
say()等原生方法的ArkTS類實例 -
"getTest"：將對象掛載到Webview的
window.getTest -
["say"]：僅暴露指定方法，保證安全性
