> 技术文档 > Uniapp在鸿蒙中的使用 二_uniapp打包鸿蒙应用

Uniapp在鸿蒙中的使用 二_uniapp打包鸿蒙应用


一、Uniapp 对鸿蒙平台的支持概述

Uniapp 从v3.1.0版本开始正式支持鸿蒙(HarmonyOS)平台,可将 Vue 代码编译为鸿蒙原生应用(HAP 包),支持以下特性:

  • 原生渲染:通过鸿蒙原生组件渲染界面,性能接近原生开发。
  • 系统能力集成:支持调用鸿蒙 API(如文件系统、网络、设备传感器等)。
  • 多端兼容:在同一套代码中同时适配鸿蒙、安卓、iOS、小程序等平台。
二、环境准备与工具安装
  1. 安装 HBuilderX

    • 下载最新版 HBuilderX(需v3.6.0及以上),官方地址。
    • 安装时勾选 “HarmonyOS 打包插件”(默认勾选)。
  2. 配置鸿蒙开发环境

    • 下载并安装DevEco Studio(需v3.0及以上),用于鸿蒙真机调试与证书生成。
    • 安装鸿蒙 SDK:在 DevEco Studio 中依次点击Tools > SDK Manager,下载HarmonyOS SDKBuild Tools
三、创建 Uniapp 鸿蒙项目
  1. 新建项目

    • 打开 HBuilderX,点击文件 > 新建 > 项目,选择Uniapp模板(如空项目或行业模板)。
    • 在项目配置中,填写应用名称、包名(需符合鸿蒙规范,如com.example.myapp)。
  2. 配置鸿蒙专属参数

    • 打开项目根目录的manifest.json,切换到App原生配置 > HarmonyOS标签:
      • 应用类型:选择Application(鸿蒙应用)或Feature(原子化服务)。
      • 设备类型:勾选目标设备(手机、平板、智能穿戴等)。
      • 证书配置:后续打包时需导入鸿蒙开发者证书(.p12 文件)。
四、开发阶段:鸿蒙平台适配
  1. 条件编译:区分鸿蒙与其他平台

    • 使用#ifdef HARMONY预处理指令编写鸿蒙专属代码:
         鸿蒙专属界面    export default { data() { return { isHarmony: false } }, onLoad() { // #ifdef HARMONY this.isHarmony = true; // 调用鸿蒙原生API uni.getSystemInfo({ success: (res) => { console.log(\'鸿蒙版本:\', res.harmonyVersion); } }); // #endif } }  
  2. 鸿蒙原生组件集成

    • Uniapp 支持鸿蒙原生组件(如mapcamera),需在页面中声明:
            export default { data() { return { lat: 39.9042, lng: 116.4074 } } }  
  3. 权限配置

    • manifest.jsonHarmonyOS标签中添加权限(如定位、相机):
      \"requestPermissions\": [ { \"name\": \"ohos.permission.LOCATION\", \"reason\": \"需要获取位置信息\" }, { \"name\": \"ohos.permission.CAMERA\", \"reason\": \"需要使用相机\" } ] 

 ##Uniapp##三方框架##