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

javascript 复制代码
import { NativeEmbedBuilderOptions, defineNativeEmbed } from "@dcloudio/uni-app-runtime"

interface ButtonBuilderOptions extends NativeEmbedBuilderOptions {
  label: string
}

interface ButtonClickEventDetail {
  text: string
}


@Component
struct ButtonComponent {
  @Prop label: string
  onButtonClick?: Function

  build() {
    Button(this.label)
      .width('100%')
      .height('100%')
      .onClick(() => {
        if (this.onButtonClick) {
          const detail = {
            text: 'test'
          } as ButtonClickEventDetail
          this.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

javascript 复制代码
<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>

效果图

完结

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

相关推荐
JohnnyDeng949 分钟前
ArkTs-Android 与 ArkTS (HarmonyOS) 存储目录全面对比
android·harmonyos·arkts·1024程序员节
王嘉俊92536 分钟前
HarmonyOS 超级终端与服务卡片开发:打造无缝多设备交互体验
华为·架构·harmonyos·arkts·1024程序员节
2501_9159184137 分钟前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
俩毛豆2 小时前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
2501_915909062 小时前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
逻极5 小时前
HarmonyOS 5 鸿蒙多设备适配与分布式开发指南
分布式·华为·harmonyos·鸿蒙
2501_9160088912 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_9159214312 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
爱笑的眼睛1115 小时前
HarmonyOS Want意图传递机制深度解析
华为·harmonyos
技术小丁16 小时前
uni-app 广告弹窗最佳实践:不扰民、可控制频次、含完整源码
前端·uni-app·1024程序员节