【高心星出品】
鸿蒙混合开发
混合开发（Hybrid Development）是一种结合原生应用和 Web 应用的开发模式，旨在同时利用两者的优势。随着移动应用需求的多样化和复杂化，单一的开发方式往往难以满足所有需求。混合开发提供了一种灵活、高效的解决方案，特别是在以下方面具有显著的优势：
跨平台兼容：混合开发允许开发者编写一次代码，并在多个平台（如 Android、iOS、HarmonyOS 等）上运行。这大大减少了开发和维护成本。
快速迭代：Web 技术（如 HTML、CSS、JavaScript）的快速开发和部署能力，使得混合应用可以更快地进行迭代和更新。
丰富的 Web 生态：借助丰富的 Web 生态系统，开发者可以利用大量现有的 Web 库和框架，快速实现复杂功能。
原生性能：通过将关键功能部分使用原生代码实现，混合应用可以在保证性能的同时，享受 Web 开发的灵活性。
原生层（Native Layer）：包括操作系统（如 HarmonyOS）、设备硬件和原生 API，提供高性能和底层功能支持。Web 层（Web Layer）：包括 HTML、CSS、JavaScript 等 Web 技术，负责应用的界面和逻辑部分。桥接层（Bridge Layer）：连接原生层和 Web 层，允许两者之间的数据和功能交互。
原生应用调用 JS
应用侧可以通过 runJavaScript()和 runJavaScriptExt()方法调用前端页面的 JavaScript 相关函数。
原生应用页面代码
import { webview } from '@kit.ArkWeb';
@Entry@Componentstruct Webppage { @State message: string = 'Hello World'; private controller: WebviewController = new webview.WebviewController()
build() { Column() { Row() { Button('执行函数') .onClick(() => { this.controller.runJavaScript('chcolor()').then((value) => { AlertDialog.show({ message: 'js脚本返回结果为： ' + value, confirm: { value: '确定', action: () => { } } }) }) }) Button('注入函数js调用') .onClick(() => { // 传入chtxt方法 this.controller.runJavaScript(` function chtxt() { document.getElementById('div').innerText='${this.message}'} `) }) }.width('100%') .padding(10) .margin(10) .justifyContent(FlexAlign.SpaceAround)
Web({ src: $rawfile('test1.html'), controller: this.controller }) } .width('100%') .height('100%') }}
复制代码
前端页面代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test1</title> <style> .div{ background-color: red; color:white; font-size:30px; font-weight:bolder; margin:20px; text-align:center;} </style></head><body><h1 id="h1t">这是一个html测试文档</h1><hr><div id="div" class="div" onclick="ck()"> div文本</div><script><!-- js定义函数 ArkTS去调用--> function chcolor() { document.getElementById('h1t').style.color='red' return 'ok' }
<!-- js定义函数 函数体由ArkTS传入--> function ck(){<!-- ArkTS传入chtxt内容--> document.getElementById('div').style.color='blue' chtxt() }
</script></body></html>
复制代码
JS 调用远程应用
开发者使用 Web 组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
注册应用侧代码有两种方式，一种在 Web 组件初始化调用，使用 javaScriptProxy()接口。另外一种在 Web 组件初始化完成后调用，使用 registerJavaScriptProxy()接口。
原生应用页面代码
import { webview } from '@kit.ArkWeb';class testclass{
randomstr(limit:number){ let ran=Number.parseInt(Math.random()*10+'')+1 AlertDialog.show({message:'产生数字为： '+ran,confirm:{value:'确定',action:()=>{}}}) return ran+'' }
}
@Entry@Componentstruct Webppage1 { @State message: string = 'Hello World'; private controller: WebviewController = new webview.WebviewController() private obj:testclass=new testclass() build() { Column() { Row() {
Button('注入ArkTS方法被JS调用') .onClick(() => { // 注入方法 this.controller.registerJavaScriptProxy(this.obj,'obj',['randomstr']) // 刷新 this.controller.refresh() }) }.width('100%') .padding(10) .margin(10) .justifyContent(FlexAlign.SpaceAround)
Web({ src: $rawfile('test2.html'), controller: this.controller }) } .width('100%') .height('100%') }}
复制代码
前端页面代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test1</title> <style> .div{ background-color: red; color:white; font-size:30px; font-weight:bolder; margin:20px; text-align:center;} </style></head><body><h1 id="h1t">这是一个html测试文档</h1><hr><div id="div" class="div" onclick="ck()"> div文本</div><script>function ck(){var limit=10var res=obj.randomstr(limit)document.getElementById('div').innerText=res}</script></body></html>
复制代码
评论