【鸿蒙实战开发】混合开发-web组件入门和实战

最新推荐文章于 2024-12-19 00:09:39 发布
最新推荐文章于 2024-12-19 00:09:39 发布
阅读量702 收藏 12
点赞数 23
分类专栏： 鸿蒙开发 移动开发 HarmonyOS 文章标签： harmonyos 前端 移动开发 鸿蒙开发 ArkUI 组件化 混合开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CTrup/article/details/144546416
版权

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

一、混合开发的背景和好处

混合开发（Hybrid Development）是一种结合原生应用和Web应用的开发模式，旨在同时利用两者的优势。随着移动应用需求的多样化和复杂化，单一的开发方式往往难以满足所有需求。混合开发提供了一种灵活、高效的解决方案，特别是在以下方面具有显著的优势：

  1. 跨平台兼容：混合开发允许开发者编写一次代码，并在多个平台（如Android、iOS、HarmonyOS等）上运行。这大大减少了开发和维护成本。

  2. 快速迭代：Web技术（如HTML、CSS、JavaScript）的快速开发和部署能力，使得混合应用可以更快地进行迭代和更新。

  3. 丰富的Web生态：借助丰富的Web生态系统，开发者可以利用大量现有的Web库和框架，快速实现复杂功能。

  4. 原生性能：通过将关键功能部分使用原生代码实现，混合应用可以在保证性能的同时，享受Web开发的灵活性。

二、混合开发应用的结构

为了更好地理解混合开发的概念，以下是一张示意图，展示了混合开发架构中原生代码与Web代码的结合。

图中展示了混合开发应用的结构，其中包括：

  • 原生层（Native Layer）：包括操作系统（如HarmonyOS）、设备硬件和原生API，提供高性能和底层功能支持。
  • Web层（Web Layer）：包括HTML、CSS、JavaScript等Web技术，负责应用的界面和逻辑部分。
  • 桥接层（Bridge Layer）：连接原生层和Web层，允许两者之间的数据和功能交互。

通过这种架构，开发者可以在Web层快速构建界面和业务逻辑，同时利用原生层提供的高性能和丰富功能，实现混合开发的最佳效果。

在HarmonyOS NEXT Developer Beta1版本中，ArkTS 提供了强大的混合开发能力，允许开发者在应用中嵌入 Web 组件，利用 Web 技术构建应用的一部分。接下来，我将介绍如何在 ArkTS 中使用 Web 组件。

三、ArkTS Web 组件教程

一、语法说明

在 ArkTS 中，混合开发主要通过 Web 组件和 WebView API 来实现。通过这些工具，可以加载和显示网页内容，进行页面控制和数据交互。

1. 基本语法

Web 组件用于在界面中嵌入一个网页浏览器。它的常用属性包括：

  • src：指定要加载的网页资源地址。
  • controller：webview控制器。
src: ResourceStr = 'https://m.jd.com'

Web({ src: this.src, controller: this.controller })

注意：访问在线网页时需添加网络权限：ohos.permission.INTERNET

2. 事件处理

Web 组件支持多种事件，如：

  • onPageBegin：页面开始加载时触发。
  • onPageEnd：页面加载完成时触发。
  • onErrorReceive：页面加载出错时触发。
  • onTitleReceive：网页document标题更改时触发该回调。
  • onProgressChange：网页加载进度变化时触发该回调。
  • onRefreshAccessedHistory：加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。
  • onAppear：组件挂载显示后触发此回调（通用事件）。
      Web({ src: this.src, controller: this.controller })
          .onProgressChange((data) => {
          })
          .onPageBegin(() => {
          })
          .onPageEnd(() => {
          })
          .onErrorReceive((e) => {
          })
          .onTitleReceive((data) => {
          })
          .onRefreshAccessedHistory(() => {
          })
          .onAppear(() => {
          })
3. WebView API

WebView API 提供了一组方法和属性，用于更细粒度地控制 Web 组件，如加载URL、执行JavaScript代码等。

import { webview } from '@kit.ArkWeb'

// 1\. 创建 WebView 实例
controller = new webview.WebviewController()

// 2\. 调用WebView 实例 api 进行控制
run() {
  // 动态加载页面
  this.controller.loadUrl('url')
  // 注入 js 对象
  this.controller.registerJavaScriptProxy
  // ...
}

Web({ src: this.src, controller: this.controller })
四、实战案例

下面是一个完整的小案例，展示如何在 ArkTS 中使用 Web 组件加载网页、处理页面事件，并与网页进行交互。

开发环境

DevEco Studio NEXT Developer Beta1
构建版本：5.0.3.403, built on June 20, 2024
Runtime version: 17.0.10+1-b1087.17 aarch64

1. 新建工程

主要目录结构：

|-- entry
|   |-- src
|   |   |-- main
|   |   |   |-- ets
|   |   |   |   |-- pages
|   |   |   |   |   |-- Index.ets（案例代码）
|-- module.json5
2. 配置权限

在 module.json5 中配置网络权限：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
     // ...
    "requestPermissions": [
      { "name": "ohos.permission.INTERNET" }
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
        // ...
    ],
    "extensionAbilities": [
       // ...
    ]
  }
}
3. 加载页面

在 Index.ets 文件中，使用 Web 组件和 WebView API，加载京东商城首页：

@Entry
@Component
struct WebPage {
  // 1\. web 组件基本使用
  src: ResourceStr = 'https://m.jd.com'

  // webview控制器
  controller = new webview.WebviewController()

  build() {
      Navigation() {
        Web({ src: this.src, controller: this.controller })
      }
    .title('混合开发')
    .titleMode(NavigationTitleMode.Mini)

 }

}

效果如图：

4. 页面标题

获取当前加载网页标题，进行动态展示：

  // ...
  @State
  // 当前网页的标题
  title: string = ''

  build() {
      Navigation() {
        Web({ src: this.src, controller: this.controller })
       .onTitleReceive((data) => {
            this.title = data?.title || '--'
        })
      }
    .title(this.title)
    .titleMode(NavigationTitleMode.Mini)

 }

效果如图：

5. 页面进度

获取页面进度数据，添加进度条效果:

第一步：定义状态，存储加载中和进度数据
  // 网页是否在加载中
  @State loading: boolean = true
  // 网页加载进度
  @State progress: number = 0
第二步：添加进度条结构
build() {
  Navigation() {
    Stack({ alignContent: Alignment.Top }) {
    // 加载中显示进度条
    if (this.loading) {
      Progress({ type: ProgressType.Linear, value: this.progress, total: 100 })
        .style({ strokeWidth: 3, enableSmoothEffect: true })
        .color('#fd1800')
        .zIndex(1)
    }
    Web({ src: this.src, controller: this.controller })
   .onTitleReceive((data) => {
        this.title = data?.title || '--'
    })
   }
  .width('100%')
  .layoutWeight(1)
  }
.title(this.title)
.titleMode(NavigationTitleMode.Mini)

}
第三步：添加事件获取进度数据
Web({ src: this.src, controller: this.controller })
  .onProgressChange((data) => {
    if (data) {
      // 记录加载进度
      this.progress = data.newProgress
      if (data.newProgress === 100) {
        // 加载完成进度条消失
        animateTo({ duration: 300, delay: 200 }, () => {
          this.loading = false
        })
      }
    }
  })
  .onPageBegin(() => {
    console.log('mgx', '开始加载网页')
    this.progress = 0
    this.loading = true
  })
  .onPageEnd(() => {
    console.log('mgx', '网页加载完成')
  })

ok，看效果：

6. 页面返回和刷新

下边咱们来获取 web 容器中页面的历史记录进行返回控制和页面刷新操作。 点击左上角返回按钮，如果容器中页面有历史记录，则返回历史页面；否则，返回原生记录页面。

第一步：定义状态，存储当前历史记录索引
  // 当前访问页面历史记录索引
  historyCurrIndex: number = 0
第二步：添加事件获取历史记录
// ...
.onRefreshAccessedHistory(() => {
// == 网页加载完成可访问页面历史记录 ==
// 获取当前Webview的页面历史记录列表
const history = this.controller.getBackForwardEntries()
// 当前页面历史记录索引
this.historyCurrIndex = history.currentIndex
// 历史记录索引的数量，最多保存50条，超过时起始记录会被覆盖
console.log('mgx', history.size)
})
第三步：在原生返回钩子函数中控制逻辑
  onBackPress() {
    // 在web容器中, 当前页面之前还有页面, 则容器内返回上一页
    if (this.historyCurrIndex > 0) {
      this.controller.backward()
    } else {
    // 返回原生页面
      router.back()
    }
    // 自定义返回逻辑
    return true
  }

在页面标题中添加菜单图标，点击刷新页面。

第一步：给Navigation组件右侧添加菜单（图标随便）
build() {
  Navigation() {
    // ...
  }
.title(this.title)
.titleMode(NavigationTitleMode.Mini)
.menus(this.titleMenus)
}
第二步：定义菜单 Builder 绑定事件控制刷新
  @Builder
  titleMenus() {
    Row() {
      Image($r('app.media.startIcon'))
        .width(18)
        .aspectRatio(1)
        .margin({ right: 10 })
        .onClick(() => {
          // 刷新网页
          this.controller.refresh()
        })
    }
    .width(50)
    .height('100%')
    .justifyContent(FlexAlign.End)
    .alignItems(VerticalAlign.Center)
  }
7. JSBridge代理

接下来，进入重点环节，我们来学习实操下如何向 Web 容器的网页中注入 JS 对象，给网页提供原生的能力支持，例如： 选择相册、拍照、传感器等底层能力。

核心依赖webview 提供的registerJavaScriptProxy api，提供了应用与Web组件加载的网页之间强大的交互能力。注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。

第一步：定义注入 JS 的类型

示例注入了两个函数：

  1. test 方法，获取网页调用后传参
  2. select 方法，选择原生相册，获取选择图片结果显示到网页中
interface InjectJs {
  // 测试方法
  test: (a: string) => void
  // 选择相册
  select: () => Promise<string>
}

type InjectKeys = keyof InjectJs
第二步：定义注入的方法和逻辑
  // 2\. JSBridge代理
  webInject() {
    this.controller.registerJavaScriptProxy({
      // 参数 1：注入应用侧JavaScript对象
      // 参数 2：注入对象的名称，与window中调用的对象名一致
      // 参数 3：注入后window对象可以通过此名字访问应用侧JavaScript对象
      test: (a) => {
        AlertDialog.show({
          message: `网页传参：${a}`
        })
      },
      select: async () => {
        // 1\. 打开相册选择图片
        const photoSelectOptions = new picker.PhotoSelectOptions()
        photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
        photoSelectOptions.maxSelectNumber = 1;
        const photoPicker = new picker.PhotoViewPicker();
        const res = await photoPicker.select(photoSelectOptions)
        // 2\. 文件操作
        // 2.1 获取照片的uri地址
        const uri = res.photoUris[0]
        // 2.2 根据uri同步打开文件
        const file = fs.openSync(uri)
        // 2.3 同步获取文件的详细信息
        const stat = fs.statSync(file.fd)
        // 2.4 创建缓冲区存储读取的文件流
        const buffer = new ArrayBuffer(stat.size)
        // 2.5 开始同步读取文件流到缓冲区
        fs.readSync(file.fd, buffer)
        // 2.6 关闭文件流
        fs.closeSync(file)

        // 3\. 转成base64编码的字符串
        const helper = new util.Base64Helper()
        const str = helper.encodeToStringSync(new Uint8Array(buffer))

        return 'data:image/png;base64,' + str
      }

    } as InjectJs,
      'mg',
      [
        'test',
        'select',
      ] as InjectKeys[])
  }
第三步：在通用事件onAppear 执行注入
Web({ src: this.src, controller: this.controller })
// ...
.onAppear(() => {
// JSBridge代理注入
this.webInject()
})
第四步：本地创建网页加载

这里使用的是原生 js 开发网页端，实际开发中可选择 vue 、 react 、 uni-app 等框架开发，效率更高。
目录：entry/src/main/resources/rawfile/index.html

<!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>混合开发</title>
    <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      padding: 10px;
    }
</style>
</head>

<body>
<div>
    <h1>H5页面</h1>
    <div>
        <p>
            <!--     显示选择相册的图片       -->
            <img id="img"
                 src="">
        </p>
    </div>
    <ul>
        <li>
            <button id="test">调用原生test</button>
        </li>
        <li>
            <button id="sel">调用原生select选择相册</button>
        </li>
    </ul>
</div>
<script>
    window.onload = () => {
      document.querySelector('#test').addEventListener('click', () => {
        mg.test('我是来自web数据啦')
      })

      document.querySelector('#sel').addEventListener('click', async () => {
        const b64 = await mg.select()
        document.querySelector('#img').setAttribute('src', b64)
      })
    }
</script>
</body>

</html>

页面效果：

第五步：加载本地网页和测试调用

重新运行项目，点击按钮调用注入的函数测试

  // 1\. web 组件基本使用
  // src: ResourceStr = 'https://m.jd.com'
  src: ResourceStr = $rawfile('index.html')

效果如图：

第六步：使用eruda插件进行真机调试
<script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
<script>eruda.init()</script>

效果如图：

8. 执行网页JS

有时候，我们需要在原生端调用网页中 JS，完成一些业务需求。

第一步：网页中挂载 JS到 window
<script>
    window.go = () => {
      return '我是网页JS函数'
    }
    window.onload = () => {
      // ...
    }
</script>
第二步：原生端调用挂载的 JS

借助 webview 提供runJavaScript api 异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。

  // 3. 执行网页 js
  runJs() {
    // this.controller.loadUrl($rawfile('index.html'))
    this.controller.runJavaScript('go()', (error, res) => {
      if (error) {
        return AlertDialog.show({
          message: error.message
        })
      }
      // 获取执行返回值
      AlertDialog.show({
        message: res
      })
    })
  }

build() {
  Navigation() {
      Button('执行网页 js')
        .onClick(() => {
          this.runJs()
        })
   // ...
 }
}
五、总结

本文介绍了在 HarmonyOS NEXT Developer Beta1 版本中，使用 ArkTS 进行混合开发时 Web 组件的基本用法。通过 Web 组件和 WebView API，可以轻松地在应用中嵌入和控制网页内容。以下是几个关键点的总结：

  1. 基本语法：通过 Web 组件可以加载和显示网页，处理页面事件，并与网页进行交互。
  2. 事件处理：支持多种事件处理，如页面开始加载、加载完成和加载出错、访问历史记录等。
  3. API 使用：WebView API 提供了丰富的方法，用于充当 Bridge 代理，更好和网页端进行通信。

通过本文的介绍和示例代码，你应该能够初步掌握在 ArkTS 中使用 Web 组件的基本方法，并应用于实际开发中。混合开发可以让你充分利用 Web 技术的优势，同时享受 ArkTS 的高效开发体验。

鸿蒙原生App开发之：套用混合app开发思路
speedoooo的博客
06-17 1199
使用混合App开发思路来开发鸿蒙原生App是一种可行的方案。该方案可以提高开发效率、降低开发成本，但同时也存在一些劣势。开发者可以根据自己的具体需求来决定是否采用这种方案。 随着鸿蒙OS生态的不断完善，鸿蒙原生App开发也将迎来新的机遇和挑战。相信在不久的将
鸿蒙Web混合开发精要
m0_56144365的博客
04-10 999
1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库XML生成、解析、与转换通知应用模型的构成要素应用模型解读。
harmony鸿蒙Android安卓混合开发
le0102的博客
07-07 4954
harmony鸿蒙Android安卓混合开发 Android安卓端操作步骤 一、依赖鸿蒙兼容包，这个包可以在SDK路径下找到，如图 把这个包放到你Android项目的libs目录下，然后在项目的build.gradle中依赖，如图 compileOnly files('libs/abilityshell_ide_java.jar') 二、在AndroidManifest.xml中添加一下内容，位置如图 <uses-feature android:name="zidane.software.ab
【HarmonyOS NEXT】HarmonyOS 和 Flutter混合开发 （一）之鸿蒙Flutter环境安装
最新发布
路漫漫亦无涯
12-19 4841
flutter作为开源适配框架方案，已经在Android，IOS，Web，Window四大平台进行了适配，一套代码，可以同时展现在多个平台。所以Flutter适配鸿蒙也正式发布了。经过了今年的迭代，已经逐渐稳定中，虽然没有RN框架在鸿蒙上的适配速度快，但是也可以商用了。跨平台为何选择Flutter。
HarmonyOS实战开发：Web组件的基础用法
m0_64422261的博客
07-11 1225
最近研究了ArkUI中的一些常用组件，其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数，以及基本用法。先来一个AI画的Web组件助助兴（好吧，不能说毫无关系，只能说一点也不像）
【HarmonyOS 鸿蒙实战开发】全局自定义组件复用实现案例
CTrup的博客
09-19 1457
本示例是 全局自定义组件复用实现 的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。
鸿蒙next开发：混合模式开发-ContentSlot
DMZDAMS的博客
07-26 1019
支持混合模式开发，当容器是ArkTS组件，子组件在Native侧创建时，推荐使用ContentSlot占位组件。
【HarmonyOS 鸿蒙实战开发】 骨架屏实现案例
CTrup的博客
09-19 1739
本示例介绍通过骨架屏提升加载时用户体验的方法。骨架屏用于在页面数据加载完成前，先给用户展示出页面的大致结构（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏。通过网络接口返回的状态改变 loadingCollectedStatus 值，动态切换页面内容：初始显示骨架屏（LoadingView）；成功且有数据则显示列表页（ListView）；数据为空显示无数据页（NoneContentView）；加载失败则显示失败页（LoadingFailedView）。
【HarmonyOS 鸿蒙实战开发】H5页面调用自定义输入法案例
CTrup的博客
09-19 1603
本示例介绍了 @ohos.web.webview 组件和 Web 以及 CustomDialog 接口实现H5页面调用自定义输入法的功能。该场景多用于浏览器需要使用安全输入法时。
鸿蒙OS怎么运行JAVA项目,鸿蒙OS中JS与Java如何进行混合开发?
weixin_36238706的博客
03-11 1364
在进行鸿蒙应用开发中由于每个人的开发习惯不同，鸿蒙官方文档说明中也是支持多种开发方式，今天跟大家聊聊关于 JS 跟 Java 之间混合开发方式。01基本介绍首先是因为我个人习惯使用 JS 进行页面开发布局，但是鸿蒙提供的 Java API 的功能比 JSAPI 的功能要强大，所以我选择用 JS 开发页面用 Java 实现逻辑交互。那么这两者之间如何进行通信就是我们需要考虑的问题，好在官方文档中有关...
鸿蒙混合模式
qq_30234677的博客
07-10 643
使用canvas进行绘图时，可以通过使用BlendMode/PorterDuffMode将所绘制的图形的像素与Canvas中对应位置的像素按照一定的计算规则进行混合，形成新的像素值，从而更新Canvas中最终显示的像素颜色值。 当使用BlendMode时，需要将其作为参数传给Paint，即Paint.setBlendMode（BlendMode BlendMode）方法，这样在用该画笔Paint 进行绘图时，就会使用传入的BlendMode，如果不想再使用BlendMode，那么可以执行Paint.set
HarmonyOS开发实战指南：鸿蒙应用组件化-Hybrid
DMZDAMS的博客
07-12 1480
Hybrid应用开发是介于Web应用和原生应用两者之间的应用开发技术，兼具“原生应用良好交互体验”的优势和“Web应用跨平台开发”的优势
关于混合开发
qq_45335911的博客
10-08 1839
app原生开发与app混合开发有什么区别？ 一、app原生开发 原生开发（Native App开发），在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发，比如Android是利用Java、Eclipse、Android studio；IOS是利用Object—C和Xcode进行开发。 优点： 可访问手机所有功能（如GPS、摄像头等）、可实现功能齐全。 运行速度快、性能高，有绝佳的用户体验。 支持大量图形和动画，不卡顿，反应快。 兼容性高，每个代码都经过程序员精心设
鸿蒙3.0 APP混合开发闪退问题笔记
牟云飞的博客
02-24 3298
核心问题：引入了crosswork问题 crosswork本身为了兼容老版本的手机，在android7之后会有闪退问题，在鸿蒙系统里如果有该插件会导致当页面中出现很多问题，比如：字体不识别闪退、存在input标签时闪退，如果要保留crosswork，可以做兼容处理。
混合开发-JSBridge
2301_80345482的博客
09-21 660
混合开发是一种融合了原生开发和Web开发优势的移动应用开发方式。具体来说，混合开发通常指的是利用一种框架或平台来创建应用程序，这种程序结合了原生应用的一些功能和特性（比如访问设备的摄像头、相册、GPS、蓝牙等），并且使用Web技术（HTML5、CSS和JavaScript）来编写大部分的应用代码。
混合型应用开发全接触
weixin_34292959的博客
04-13 159
混合型应用开发全接触 许多企业向实施移动战略迈出了头几步，它们正面临将影响移动项目成效的一个重要决定。为移动 App 选择一种开发方法：Native、Web 还是 Hybrid 的过程牵涉许多因素，比如预算、项目时间表、目标群体和 App 功能，等等。每种方法都有天生的优点和局限性，找到最适合本企业要求的一种开发方法可能是项艰巨的任务。 我们公司从11年开始...
混合开发
胡老大的唯一大老婆的博客
12-09 883
混合开发是一种模式,英文名字hybird APP 顾名思义就是使用native(iOS和Android)和web(html\css\javascript)技术开发 优点:开发快,开发周期短 缺点:性能问题和兼容问题(原生充当浏览器,版本很多,所以兼容性问题可能会有,但是Android5.0和ios9.0以上版本,这个确定也不明显) 混合应用开发: 1.微信公众号:通过jssdk连接native和w...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值