【高心星出品】
文章目录
- 鸿蒙混合开发
- 原生应用调用JS
- JS调用远程应用
鸿蒙混合开发
混合开发（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
@Component
struct 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+'')+1AlertDialog.show({message:'产生数字为： '+ran,confirm:{value:'确定',action:()=>{}}})return ran+''}}@Entry
@Component
struct 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=10
var res=obj.randomstr(limit)
document.getElementById('div').innerText=res
}
</script>
</body>
</html>
r>
<div id="div" class="div" onclick="ck()">div文本
</div>
<script>
function ck()
{
var limit=10
var res=obj.randomstr(limit)
document.getElementById('div').innerText=res
}
</script>
</body>
</html>