admin管理员组文章数量:1437229
HBuilderX 4.62 开始，uni
HBuilderX 4.62 开始，uni-app 支持嵌入鸿蒙原生组件
从 uni-app 4.62 版本起，开发者可以通过 UTS 插件将鸿蒙原生组件嵌入到 uni-app 应用中，并且支持同层渲染。这一功能使得开发者能够充分利用鸿蒙系统的原生组件，提升应用的性能和用户体验。以下是具体介绍和实际案例。
嵌入鸿蒙原生组件
鸿蒙系统提供了丰富的原生组件，这些组件可以通过 UTS 插件注册为 WebView 支持的原生组件。目前，鸿蒙原生组件仅支持定义在 ETS 文件中，UTS 插件支持导入 ETS 文件，从而实现原生组件在 uni-app 中的嵌入。
例如，在页面中嵌入原生的 button、map 等组件，具体实现方式可参考uni-app 官方文档[1]。
实际案例：使用华为花瓣地图
接下来，我们将通过一个实际案例，展示如何在 uni-app 中嵌入华为花瓣地图。
效果展示
image-20250418181608436
代码实现
Template 部分
代码语言：javascript代码运行次数：0运行复制<template>
<view class="container">
<view class="map-container">
<embed class="native-map" tag="map" :options="options" @markertap="onMarkerTap"></embed>
</view>
</view>
</template>
Script 部分
代码语言：javascript代码运行次数：0运行复制<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, // 圆形边框宽度，单位：像素
},
],
markers: [
{
latitude: 22.5431,
longitude: 114.0579,
},
],
},
};
},
methods: {
onMarkerTap(e) {
console.log("onMarkerTap", e);
uni.showToast({
title: `点击了标记点 ${e.detail.markerId}`,
icon: "none",
});
},
},
};
</script>
Style 部分
代码语言：javascript代码运行次数：0运行复制<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>
完整代码
代码语言：javascript代码运行次数：0运行复制<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>
优化与总结
优化建议
代码语言：javascript代码运行次数：0运行复制1. 性能优化 ：在使用原生组件时，注意组件的性能表现，避免过度使用复杂的原生组件导致应用性能下降。
2. 用户体验 ：确保原生组件与 uni-app 的其他部分在视觉和交互上的一致性，提供流畅的用户体验。
3. 兼容性测试 ：在不同设备和鸿蒙系统版本上进行充分的兼容性测试，确保应用的稳定性和功能完整性。
4. 代码复用 ：将常用的原生组件封装成可复用的模块或插件，提高开发效率。
总结
HBuilderX 4.62 开始，uni-app 对鸿蒙原生组件的支持为开发者提供了更广阔的空间来构建高性能、功能丰富的应用。通过 UTS 插件，开发者可以轻松地将鸿蒙原生组件嵌入到 uni-app 应用中，充分利用鸿蒙系统的特性。未来，随着 uni-app 和鸿蒙系统的不断发展，我们有理由相信，这种结合将为开发者带来更多的创新机会和可能性。
开源项目地址
参考
- UTS 语法[2]
- UTS API 插件[3]
- UTS uni-app 兼容模式组件[4]
- UTS 标准模式组件[5]
- Hello UTS[6]
- uniapp 嵌入鸿蒙原生组件[7]
- 调用鸿蒙原生 API[8]
- uniapp 同层渲染调用华为花瓣地图[9]
参考资料
[1]
uni-app 官方文档: .html
[2]
UTS 语法: .html
[3]
UTS API 插件: .html
[4]
UTS uni-app 兼容模式组件: .html
[5]
UTS 标准模式组件: .html
[6]
Hello UTS:
[7]
uniapp 嵌入鸿蒙原生组件: .html
[8]
调用鸿蒙原生 API: .html
[9]
uniapp 同层渲染调用华为花瓣地图:
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-28，如有侵权请联系 cloudcommunity@tencent 删除插件华为开发者系统app本文标签： HBuilderX 462 开始，uni
版权声明：本文标题：HBuilderX 4.62 开始，uni 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1747480383a2699320.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论