在 Windows 上使用 Cordova 开发鸿蒙应用

Cordova 介绍

Apache Cordova 是一个开源的移动开发框架，允许开发者使用标准的 Web 技术（HTML5、CSS3 和 JavaScript）来开发跨平台移动应用。Cordova 学习曲线平缓，可直接将现有Web应用迁移到鸿蒙平台，只需少量适配工作，它本质上是一个 “浏览器外壳”，把你的网页代码包起来，变成一个可以安装在手机上的应用。

官网：Apache Cordova
GitHub：apache/cordova: Apache Cordova

开发环境搭建

前置要求

在安装 Cordova 之前，确保你的系统已经安装了： Node.js 和 npm

Node.js 版本 >= 14.x
npm 会随 Node.js 一起安装

如果还没有安装，可以进入 Node.js官方下载，安装完成后，启动 cmd ，检查是否安装成功：

1 2	node -v npm -v

如果能正常看到版本，则说明安装成功。

安装 cordova CLI

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

# 全局安装 Cordova CLI
npm install -g cordova

# 验证安装
cordova --version
# 输出示例: 12.0.0

# 查看 Cordova 帮助
cordova help

鸿蒙平台专属依赖

安装 DevEco Studio
DevEco Studio 是鸿蒙应用开发 IDE，在官网下载 DevEco Studio 6.0.1 Release 版本，安装过程非常简单，Next Next 即可，安装完成后，启动 DevEco Studio，在右上角的 device manager 进入设备管理，点击 New Emulator 安装模拟器，用于后面开发应用预览。

命令行工具
Command Line Tools 集合了 HarmonyOS 应用开发所用到的系列工具，包括 SDK 管理 sdkmgr、代码检查 codelinter、三方库的包管理 ohpm、命令行解析 hstack。

下载完成命令行工具解压后，将 ${Command Line Tools解压路径}\command-line-tools\bin 目录配置到系统或者用户的 PATH 变量中。

可以通过 codelinter -v 指令，检查是否可以正确获取 codelinter 工具版本

第一个 Cordova 项目

创建项目

通过 cordova create 命令创建 Cordova 项目

# 创建新的 Cordova 项目
# 语法: cordova create <目录名> <包名> <应用名>
cordova create MyFirstApp io.cordova.hellocordova HelloCordova

# 进入项目目录
cd MyApp

# 查看项目信息
cordova info

核心文件

创建项目后，我们对核心文件进行说明：

config.xml 应用配置

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="io.cordova.hellocordova" version="1.0.0">
<name>HelloCordova</name>
<description>Sample Apache Cordova App</description>
<author email="dev@cordova.apache.org" href="https://cordova.apache.org"> Apache Cordova Team </author>
<content src="index.html"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
</widget>

www/index.html 应用入口

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <!--
        Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
            https://cordova.apache.org/docs/en/latest/
        Some notes:
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

www/js/index.js 应用逻辑

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // Cordova is now initialized. Have fun!

    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
}

项目运行

运行至浏览器

首先添加浏览器平台，然后通过 cordova 命令运行项目

# 1. 添加浏览器平台（如果还没添加）
cordova platform add browser

# 2. 运行项目
cordova run browser

# 或者使用 serve 命令
cordova serve

然后在浏览器中访问 http://localhost:8000 ，页面效果如下：

运行至鸿蒙

通过 npm 全局安装 hcordova 命令行工具，用于项目创建、构建与管理。hcordova HarmonyOS 命令化工具基于 cordova-openharmony 开发，前面使用 cordova 创建项目，也可以直接使用 hcordova create MyApp com.example.MyApp MyHarmonyApp 创建。

1
2
3

npm install -g hcordova

hcordova -v # 输出 hcordova 版本（如 1.0.0）即表示成功

进入前面创建好的项目目录 cd MyFirstApp 添加鸿蒙平台

1 2	hcordova platform add harmonyos hcordova platform ls #查看已添加平台

项目构建成功后，在 MyFirstApp 根目录会生成一个 harmonyos 文件夹，使用 DevEco 打开进行开发和调试。