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>

效果图

完结

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

相关推荐
万少20 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
aklry2 小时前
uniapp三步完成生成一维码图片
uni-app
雪芽蓝域zzs12 小时前
uniapp 国密sm2加密
uni-app
coder_pig14 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶15 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
二二孚日16 小时前
自用华为ICT云赛道Big Data第五章知识点-Flume海量日志聚合
大数据·华为
前端世界16 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor17 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
二二孚日18 小时前
自用华为ICT云赛道Big Data第四章知识点-Flink流批一体分布式实时处理引擎
大数据·华为
zhanshuo18 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos