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>

效果图

完结

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

相关推荐
你很易烊千玺43 分钟前
即时通讯小程序
小程序·uni-app·直播
风雨兼程^_^1 小时前
ai生成文章,流式传输(uniapp,微信小程序)
ai·微信小程序·uni-app·流式传输
2501_9159184110 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063210 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
我在看你呵呵笑12 小时前
GD32VW553-IOT开发板移植适配openharmony
物联网·华为·harmonyos
在人间耕耘13 小时前
HarmonyOS 开发学习分享:从入门到认证的完整路径
华为·harmonyos
森之鸟13 小时前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
程序员潘Sir15 小时前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙
iOS阿玮17 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple