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

原创已于 2025-05-26 10:00:36 修改 · 712 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #harmonyos #华为 #前端 #javascript

于 2025-05-23 15:15:06 首次发布

关于怎么使用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: 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

<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>