当前位置: 首页 > news >正文

鸿蒙与web混合开发双向通信

鸿蒙与web混合开发双向通信用runJavaScript和registerJavaScriptProxy
web
entry/src/main/resources/rawfile/1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>混合开发</title>
</head>
<body><div></div><img src="./a.png" alt=""><button onclick="selectImg()">打开相册</button>
</body>
</html>
<script>//直接写js代码function changeImg(){//1.获取img这个元素const img = document.querySelector('img')//2.修改元素的属性img.src = './b.png'}async function selectImg(){//通知鸿蒙,让鸿蒙设备打开相册const res = await harmonyDevice.selectImage()const div = document.querySelector('div')div.innerText = JSON.stringify(res)}</script>

鸿蒙

import { webview } from '@kit.ArkWeb'
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { promptAction } from '@kit.ArkUI'@Entry
@Component
struct Page {webController:WebviewController = new webview.WebviewController()selectImg(){const picker = new photoAccessHelper.PhotoViewPicker()return picker.select()}build() {Column(){// 1.想让网页干嘛,直接调网页的JS方法Button('鸿蒙-改变网页图片').onClick(()=>{// 控制器this.webController.runJavaScript('changeImg()')})// 2.网页控制鸿蒙测Button('注入鸿蒙的事件').onClick(()=>{promptAction.showToast({message:'注入成功'})// 1.先给网页一个对象,这个对象上包含了所有网页要用到的方法集合// 2.给这个对象起一个名字,让网页可以使用这个对象// 3.确定网页可以使用的方法结合this.webController.registerJavaScriptProxy({selectImage:async()=>{const res = await this.selectImg()return res}},"harmonyDevice",["selectImage"])})// 1.加载的地址// 2.控制Button('刷新页面').onClick(()=>{this.webController.refresh()})Web({// 本地:src:$rawfile('1.html'),// src:'https://www.amap.com/',controller:this.webController})}.width('100%').height('100%')}
}
http://www.lryc.cn/news/593222.html

相关文章:

  • Linux:多线程---深入生产消费模型环形队列生产消费模型
  • Nestjs框架: RxJS 核心方法实践与错误处理详解
  • 告别项目混乱:基于 pnpm + Turborepo 的现代化 Monorepo 工程化最佳实践
  • win10连接鼠标自动关闭触摸板/win10关闭触摸板(笔记本)
  • 深度学习图像分类数据集—六十种植物病害分类
  • ABP VNext + Temporal:分布式工作流与 Saga
  • install_arm_docker.sh
  • Django接口自动化平台实现(三)
  • Django母婴商城项目实践(八)- 数据渲染与显示之首页
  • LLM 的Top-P参数 是在LLM中的每一层发挥作用,还是最后一层?
  • 【设计模式C#】外观模式(用于解决客户端对系统的许多类进行频繁沟通)
  • Django母婴商城项目实践(七)- 首页数据业务视图
  • 洛谷 P2947:[USACO09MAR] Look Up S ← 数组模拟+单调栈
  • 使用 Gunicorn 部署 Django 项目
  • 5 基于STM32单片机的绝缘检测系统设计(STM32代码编写+手机APP设计+PCB设计+Proteus仿真)
  • 6 STM32单片机的智能家居安防系统设计(STM32代码+手机APP设计+PCB设计+Proteus仿真)
  • 对话访谈 | 盘古信息×锐明科技:中国企业高质量出海“走进去”和“走上去”
  • 家庭KTV v1.1.9 | 曲库丰富,无限制免费K歌
  • 驾驭 Spring Boot 事件机制:8 个内置事件 + 自定义扩展实战
  • 《一行注解解决重复提交:Spring Boot 接口幂等实战》
  • 深入理解设计模式:策略模式的艺术与实践
  • 在非Spring Boot的Spring项目中使用Lock4j
  • 用graphviz画一个关系图
  • 云服务器磁盘IO性能优化的测试与配置方法
  • 2025年7月19日,二维矩阵
  • 智能制造——解读39页汽车行业数字化工厂解决方案【附全文阅读】
  • 异世界历险之数据结构世界(二叉树-leetcode)
  • 国产电科金仓数据库:融合进化,智领未来
  • 【Unity3D实例-功能-移动】角色移动-通过WSAD(Rigidbody方式)
  • 架构探索笔记【1】