Ionic CLI

本项目基于 @ionic/[email protected] 开发。

简介

本项目旨在通过 Web 技术（HTML5、CSS3、JavaScript）快速构建支持 Android、iOS、OpenHarmony三平台的原生移动应用。工具结合capacitor 框架将 Web 代码封装为原生应用容器，实现 “一次开发，多端部署”，同时支持调用设备原生能力（如相机、定位、存储等），兼顾开发效率与原生体验。

下载安装

通过npm即可快速安装命令行工具。

从npm安装

# 安装hionic
npm install -g hionic

安装指定版本

npm install -g [email protected]

卸载

# 卸载
npm uninstall -g hionic 

权限要求

不涉及。

使用示例

添加OpenHarmony平台和添加相机插件。

//添加平台
hionic platform add openharmony

//添加插件
hionic plugin add @capacitor/camera

//移除插件
hionic plugin remove @capacitor/camera

使用说明

1.基础依赖（必装）

Node.js：v16.0.0 及以上（推荐 v18 LTS 版本）

请从官方站点下载安装后验证：

//查看 Node 版本
node -v  
//查看 npm 版本
npm -v 

2. 安装 hionic CLI

通过 npm 全局安装 hionic 命令行工具，用于项目创建、构建与管理：

// 安装hionic
npm install -g hionic

安装后验证：

hionic -v  
// 输出 hionic 版本（如 2.1.15）即表示成功

3. 创建项目

创建cordova 项目

语法：hionic start <框架名称> <项目目录> <应用包名> <应用名称>

//创建项目
hionic start cordova MyApp com.example.MyApp MyHarmonyApp

//进入项目目录
cd MyApp

创建capacitor 项目

语法：hionic start <框架名称> <项目目录> <应用包名> <应用名称> [模板名称]

//创建项目
hionic start capacitor MyApp com.example.MyApp MyHarmonyApp react

//进入项目目录
cd MyApp

已有web项目 直接初始化capacitor项目

语法：hionic init <应用名称> <应用包名>

//进入项目目录
cd MyApp

//初始化项目
hionic init MyHarmonyApp com.example.MyApp 

4. 平台管理

capacitor/cordova 项目需先添加目标平台，才能进行构建与运行。

添加平台

语法：hionic platform add <平台名称>

//添加 OpenHarmony 平台
hionic platform add openharmony

//添加 Android 平台（已安装 @capacitor/android 插件）
hionic platform add android

//添加 iOS 平台（仅 macOS）（已安装 @capacitor/ios 插件）
hionic platform add ios

查看已添加平台

语法：hionic platform ls

//查看已添加平台
hionic platform ls

//输出示例：Installed platforms: 
openharmony (installed)
android 12.0.0
ios 7.0.0

移除平台

语法：hionic platform remove <平台名称>

//移除 OpenHarmony 平台
hionic platform remove openharmony

//移除 Android 平台
hionic platform remove android

//移除 iOS 平台
hionic platform remove ios

5. 插件管理

capacitor/cordova 通过 插件 扩展应用能力（如调用相机、获取定位），核心插件由 Apache 维护，第三方插件可从 npm 获取。OpenHarmony平台插件有OpenHarmony官方维护，gitcode获取。

安装插件

语法：hionic plugin add <插件名称> --platform <平台名称>

//安装相机插件
//cordova插件
hionic plugin add cordova-plugin-camera 

//capacitor插件
hionic plugin add @capacitor/camera 

//指定平台安装
hionic plugin add cordova-plugin-camera --platform openharmony

//指定版本号安装（版本号不存在，默认最新版本号安装）
hionic plugin add [email protected] --platform openharmony

查看已安装插件

语法：hionic plugin ls

//查看已安装插件
hionic plugin ls
//输出示例：cordova-plugin-camera 7.0.0 "Camera"

移除插件

语法：hionic plugin remove <插件名称> --platform <平台名称>

//全平台移除插件
hionic plugin remove cordova-plugin-camera

//指定平台移除插件
hionic plugin remove cordova-plugin-camera --platform openharmony

6. 开发与调试

项目构建成功后，推荐使用DevEco进行开发和调试。

前端项目构建（构建 capacitor 项目, cordova项目不需要构建）

语法：hionic buildui

hionic buildui

在DevEco中打开项目

在DevEco中打开项目目录openharmony，即可进行签名配置和开发调试（限定windows平台，需已安装DevEco IDE）。

语法：hionic open <平台名称>

hionic open openharmony

编译构建hap应用

编译构建hap应用（限定windows平台，需配置签名配置，设置环境变量OpenHarmonySDK路径DEVECO_SDK_HOME和OpenHarmonyIDE路径DEVECO_IDE_PATH）。

语法：hionic buildapp <平台名称>

hionic buildapp openharmony

安装到OpenHarmony设备并启动运行

安装到OpenHarmony设备并启动运行（需已连接OpenHarmony设备或模拟器，已编译生成hap文件，已配置hdc工具到系统环境变量）。

语法：hionic run <平台名称>

hionic run openharmony

本地浏览器预览（快速调试）

cordova 项目通过 cordova 浏览器平台，可在电脑浏览器中快速预览应用界面与逻辑（不支持原生插件）。

语法：hionic run browser

//添加浏览器平台
cordova platform add browser

//运行浏览器预览
hionic run browser 

效果：自动打开浏览器，地址为 http://localhost:8000

capacitor 项目浏览器平台，参考框架原生浏览器平台调试。

OpenHarmony 日志

查看应用运行日志：

//查看所有日志（筛选 capacitor 相关内容）
hdc shell hilog | findstr "capacitor"

7. 项目目录结构说明

cordova 项目目录结构

your-cordova-app/
|—— openharmony         # OpenHarmony工程目录
|—— oh-plugins          # OpenHarmony专用插件
├── config.xml          # 项目配置文件（应用名称、版本、权限、插件配置等）
├── www/                # Web 代码目录（核心开发目录）
│   ├── index.html      # 应用入口页面
│   ├── css/            # 样式文件目录
│   ├── js/             # 脚本文件目录（含 cordova.js,nativeBridge.js 自动注入）
│   └── img/            # 图片资源目录
├── platforms/          # 平台目录（自动生成，存放 Android/iOS 原生项目）
├── plugins/            # 插件目录（自动生成，存放已安装插件）
└── package.json        # 项目依赖配置文件

capacitor 项目目录结构

your-capacitor-app/
|—— openharmony         # OpenHarmony工程目录
|—— oh-plugins          # OpenHarmony专用插件
|—— dist                # 前端构建输出目录
├── config.xml          # 项目配置文件（应用名称、版本、权限、插件配置等）
├── src/                # Web 框架代码目录
│   └── **/**           # Web 框架项目源码
├── platforms/          # 平台目录（自动生成，存放 Android/iOS 原生项目）
├── index.html          # 应用入口页面 (具体前端框架生产的入口页面)
├── vite.config.js      # 前端构建配置文件（vite 项目，根据项目框架配置）
├── capacitor.config.json    # capacitor项目配置文件
└── package.json        # 项目依赖配置文件

源码目录结构

|—— 目录
|    ├── bin    # 命令行入口目录
|    ├── src    # 命令行工具的实现代码
|    │    ├── utils  # js 功能模块代码
|    │    └── base-cli.js   # 核心业务代码
|    ├── templates    # OpenHarmony 项目模板
|    │     ├──capacitor  # capacitor框架 OpenHarmony 项目模板
|    │     └──cordova  #  cordova插件框架 OpenHarmony 项目模板
|    ├── README.md          # 说明文档
|    ├── package.json       # 配置文件
|    └── plugin_xml_helper.xml       # 插件配置文件说明指导文档

贡献代码

使用过程中发现任何问题都可以提 Issue ，当然，也非常欢迎发 PR 共建。

许可证

本插件基于 Apache License 2.0 开源，详见 LICENSE 文件。