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

uniapp 嵌入鸿蒙原生组件 具体步骤

关于怎么使用uniapp 嵌入鸿蒙原生组件

HBuilder X 版本 4.64

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

app-harmony文件下新建 index.uts button.ets

在这里插入图片描述

button.ets里面复制uniapp 官方提供的 示例代码

https://uniapp.dcloud.net.cn/tutorial/harmony/native-component.html

button.ets

import { NativeEmbedBuilderOptions, defineNativeEmbed } from "@dcloudio/uni-app-runtime"interface ButtonBuilderOptions extends NativeEmbedBuilderOptions {label: string
}interface ButtonClickEventDetail {text: string
}@Component
struct ButtonComponent {@Prop label: stringonButtonClick?: Functionbuild() {Button(this.label).width('100%').height('100%').onClick(() => {if (this.onButtonClick) {const detail = {text: 'test'} as ButtonClickEventDetailthis.onButtonClick({detail})}})}
}@Builder
function ButtonBuilder(options: ButtonBuilderOptions) {ButtonComponent({label: options.label,onButtonClick: options?.on?.get('click')}).width(options.width).height(options.height)
}defineNativeEmbed('button', {builder: ButtonBuilder
})

index.vue

<template><embed class="native-button" tag="button" :options="options" @click="onClick"></embed>
</template><script setup lang="ts">
import "@/uni_modules/native-harmony-button";
import { ref } from 'vue';
const options = ref({ label: 'hello' })
const onClick = (e) => {console.log(e)
}
</script>
<style lang="scss" scoped>.native-button {display: block;width: 200px;height: 50px;margin: 10px auto;
}
</style>

效果图

在这里插入图片描述

完结

效果没出来的可以在评论区提问

http://www.dtcms.com/a/207853.html

相关文章:

  • ARFoundation系列讲解 - 77 音频可视化
  • CentOS 7.6 升级 Openssl 及 Openssh 方法文档
  • 达梦数据库-报错-01-[-3205]:全文索引词库加载出错
  • 【图像大模型】AnimateDiff:基于扩散模型的视频生成技术解析与实践指南
  • 机器学习第二十五讲:TensorFlow → 乐高式搭建深度学习模型
  • uniapp原生插件
  • vscode里几种程序调试配置
  • Swagger、Springfox、Springdoc-openapi 到底是什么关系
  • .NET外挂系列:7. harmony在高级调试中的一些实战案例
  • Jetson系统烧录与环境配置全流程详解(含驱动、GCC、.Net设置)
  • hadoop 无法存储数据到hbase里面 已经解决
  • 【论文阅读】LLaVA-OneVision: Easy Visual Task Transfer
  • Grafana XSSOpenRedirectSSRF漏洞复现(CVE-2025-4123)
  • AI与.NET技术实操系列(七):使用Emgu CV进行计算机视觉操作
  • 微信小程序调用蓝牙API “wx.writeBLECharacteristicValue()“ 报 errCode: 10008 的解决方案
  • 无法访问org.springframework.boot.SpringApplication
  • Android Studio 开发环境兼容性检索(AGP / Gradle / Kotlin / JDK)
  • 【数据架构03】数据治理架构篇
  • k8s容器入门(2) 容器化组件“可漂移“
  • 使用KubeKey快速部署k8s v1.31.8集群
  • 黑马k8s(十三)
  • Python刷题:神奇的函数
  • linux 内核warn_on/Bug_on
  • Java多线程同步:确保并发安全的关键策略
  • 肿瘤特异性标志物CD248
  • AES加密模式详解及OpenSSL C库函数指南
  • LeRobot 框架的开发指南 (下)
  • opencv 图像的平移和旋转
  • Flyweight(享元)设计模式 软考 享元 和 代理属于结构型设计模式
  • ArcGIS Pro 3.4 二次开发 - 编辑