HarmonyOS 5.0应用开发——鸿蒙混合开发

头像
高心星
     江苏
    阅读 5 分钟
    头图

    【高心星出品】

    鸿蒙混合开发

    混合开发（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+'')+1
    AlertDialog.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>
    HarmonyOSharmonyos先行者harmonyosarktsarkui
    高心星
    1 声望1 粉丝

    华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。

    « 上一篇
    HarmonyOS 5.0应用开发——Web组件的使用
    下一篇 »
    HarmonyOS 5.0应用开发——UIAbility跳转

    引用和评论

    推荐阅读
    头像
    HarmonyOS 5.0应用开发——属性动画

    高心星阅读 65

    头像
    HarmonyOS NEXT 技术问答冲榜，等你来战！

    SegmentFault思否赞 15阅读 43.1k评论 6

    头像
    “一起学 HarmonyOS”第二弹来啦！

    SegmentFault思否赞 5阅读 30.6k评论 5

    头像
    HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

    申公豹赞 8阅读 2k评论 3

    头像
    API接口设计的未来趋势：探索技术方向与实践方案

    Swift社区赞 3阅读 1k

    头像
    HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）

    Swift社区赞 3阅读 1k

    头像
    构建安全护盾：HarmonyOS 应用的数据安全审计与日志管理实战

    Swift社区赞 3阅读 846

    0 条评论
    得票最新