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

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

news 来源：原创 2025/5/24 5:17:43

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