【原】HBuilderX 4.62 開始，uni-app 支持嵌入鴻蒙原生組件

大前端之旅 2025-04-28 發(fā)布于甘肅

展開全文

HBuilderX 4.62 開始，uni-app 支持嵌入鴻蒙原生組件

從 uni-app 4.62 版本起，開發(fā)者可以通過 UTS 插件將鴻蒙原生組件嵌入到 uni-app 應用中，并且支持同層渲染。這一功能使得開發(fā)者能夠充分利用鴻蒙系統(tǒng)的原生組件，提升應用的性能和用戶體驗。以下是具體介紹和實際案例。

嵌入鴻蒙原生組件

鴻蒙系統(tǒng)提供了豐富的原生組件，這些組件可以通過 UTS 插件注冊為 WebView 支持的原生組件。目前，鴻蒙原生組件僅支持定義在 ETS 文件中，UTS 插件支持導入 ETS 文件，從而實現(xiàn)原生組件在 uni-app 中的嵌入。

例如，在頁面中嵌入原生的 button、map 等組件，具體實現(xiàn)方式可參考uni-app 官方文檔^[1]。

實際案例：使用華為花瓣地圖

接下來，我們將通過一個實際案例，展示如何在 uni-app 中嵌入華為花瓣地圖。

效果展示

代碼實現(xiàn)

Template 部分

<template>
  <view class="container">
    <view class="map-container">
      <embed class="native-map" tag="map" :options="options" @markertap="onMarkerTap"></embed>
    </view>
  </view>
</template>

Script 部分

<script>
import"@/uni_modules/native-harmony-map";
exportdefault {
  data() {
    return {
      options: {
        latitude: 22.5431,
        longitude: 114.0579,
        scale: 12,
        circles: [
          {
            latitude: 22.5431,
            longitude: 114.0579,
            color: 0xffff0000, // 圓形邊框顏色
            fillColor: 0xff00ffff, // 圓形填充顏色
            radius: 80, // 圓形半徑，單位：米
            strokeWidth: 10, // 圓形邊框?qū)挾?，單位：像?/span>
          },
        ],
        markers: [
          {
            latitude: 22.5431,
            longitude: 114.0579,
          },
        ],
      },
    };
  },
methods: {
    onMarkerTap(e) {
      console.log("onMarkerTap", e);
      uni.showToast({
        title: `點擊了標記點 ${e.detail.markerId}`,
        icon: "none",
      });
    },
  },
};
</script>

Style 部分

<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}

.map-container {
width: 100%;
height: 70%;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
box-shadow: 04px12pxrgba(0, 0, 0, 0.1);
}

.native-map {
width: 100%;
height: 100%;
}
</style>

完整代碼

<template>
  <view class="container">
    <view class="map-container">
      <embed class="native-map" tag="map" :options="options" @markertap="onMarkerTap"></embed>
    </view>
  </view>
</template>

<script>
import "@/uni_modules/native-harmony-map";
export default {
  data() {
    return {
      options: {
        latitude: 22.5431,
        longitude: 114.0579,
        scale: 12,
        circles: [
          {
            latitude: 22.5431,
            longitude: 114.0579,
            color: 0xffff0000,
            fillColor: 0xff00ffff,
            radius: 80,
            strokeWidth: 10,
          },
        ],
        markers: [
          {
            latitude: 22.5431,
            longitude: 114.0579,
          },
        ],
      },
    };
  },
  methods: {
    onMarkerTap(e) {
      console.log("onMarkerTap", e);
      uni.showToast({
        title: `點擊了標記點 ${e.detail.markerId}`,
        icon: "none",
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.map-container {
  width: 100%;
  height: 70%;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.native-map {
  width: 100%;
  height: 100%;
}
</style>

優(yōu)化與總結(jié)

優(yōu)化建議

1. 性能優(yōu)化 ：在使用原生組件時，注意組件的性能表現(xiàn)，避免過度使用復雜的原生組件導致應用性能下降。
2. 用戶體驗 ：確保原生組件與 uni-app 的其他部分在視覺和交互上的一致性，提供流暢的用戶體驗。
3. 兼容性測試 ：在不同設(shè)備和鴻蒙系統(tǒng)版本上進行充分的兼容性測試，確保應用的穩(wěn)定性和功能完整性。
4. 代碼復用 ：將常用的原生組件封裝成可復用的模塊或插件，提高開發(fā)效率。

總結(jié)

HBuilderX 4.62 開始，uni-app 對鴻蒙原生組件的支持為開發(fā)者提供了更廣闊的空間來構(gòu)建高性能、功能豐富的應用。通過 UTS 插件，開發(fā)者可以輕松地將鴻蒙原生組件嵌入到 uni-app 應用中，充分利用鴻蒙系統(tǒng)的特性。未來，隨著 uni-app 和鴻蒙系統(tǒng)的不斷發(fā)展，我們有理由相信，這種結(jié)合將為開發(fā)者帶來更多的創(chuàng)新機會和可能性。

開源項目地址

https:///nutpi/uniapp-harmony-map

參考

UTS 語法^[2]
UTS API 插件^[3]
UTS uni-app 兼容模式組件^[4]
UTS 標準模式組件^[5]
Hello UTS^[6]
uniapp 嵌入鴻蒙原生組件^[7]
調(diào)用鴻蒙原生 API^[8]
uniapp 同層渲染調(diào)用華為花瓣地圖^[9]

堅果派

堅果派由堅果等人創(chuàng)建，團隊擁有若干華為 HDE，以及若干其他領(lǐng)域的三十余位萬粉博主運營。專注于分享的技術(shù)包括 HarmonyOS/OpenHarmony，ArkUI-X，元服務，服務卡片，華為自研語言，BlueOS 操作系統(tǒng)、團隊成員聚集在北京、上海、廣州、深圳、南京、杭州、蘇州、寧夏等地。聚焦“鴻蒙原生應用”、“智能物聯(lián)”和“AI 賦能”、“人工智能”四大業(yè)務領(lǐng)域，依托華為開發(fā)者專家等強大的技術(shù)團隊，以及涵蓋需求、開發(fā)、測試、運維于一體的綜合服務體系，賦能文旅、媒體、社交、家居、消費電子等行業(yè)客戶，滿足社區(qū)客戶數(shù)字化升級轉(zhuǎn)型的需求，幫助客戶實現(xiàn)價值提升。目前上架鴻蒙原生應用 18 款，三方庫 80 個。歡迎大家加微信聯(lián)系。

地址：https:///nutpi

https:///nutpi