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>

效果图

完结

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

相关推荐
普宁彭于晏1 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
二二孚日1 小时前
自用华为ICT云赛道AI第三章知识点-MindSpore特性、MindSpore开发组件
人工智能·华为
Georgewu2 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu2 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
CRMEB定制开发3 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
ajassi20004 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉5 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡8 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
九章云极AladdinEdu8 小时前
华为昇腾NPU与NVIDIA CUDA生态兼容层开发实录:手写算子自动转换工具链(AST级代码迁移方案)
人工智能·深度学习·opencv·机器学习·华为·数据挖掘·gpu算力