鸿蒙harmony-cordova(V1.2.1)

最新推荐文章于 2025-03-11 16:59:20 发布

马弓手C语言

最新推荐文章于 2025-03-11 16:59:20 发布

阅读量2.6k

点赞数 37

文章标签： phonegap harmonyos angular.js react.js 前端框架

本文链接：https://blog.csdn.net/chenlihuiabc/article/details/144107785

版权

Cordova OpenHarmony

遵守Cordova（https://cordova.apache.org）官方插件接口规范

优势

Cordova OpenHarmony 所有插件遵守cordova（https://cordova.apache.org）官方接口规范，原android和Ios项目在几分钟内就可以生成原生纯血鸿蒙APP，无需做任何研发，节省大量时间和人力成本。

支持框架

支持移动端跨平台框架：

（1）vue.js
（2）ionic+angular.js
（3）ionic React
（4）jquery.js框架

开发说明

cordova，包含sdk和插件，只有cordova sdk没有插件无法使用，因此cordova（https://cordova.apache.org）官方，除了提供sdk外，同时提供了大量的官方插件，并且开源，同样cordova OpenHarmony遵守官方标准，除了提供鸿蒙版cordova sdk外，也提供了大量的插件，并且仍在持续新增插件，所有插件遵守cordova官方接口规范，因此开发者可以参考cordova官方插件的开发文档开发鸿蒙版app，如果开发者有自定义插件，接口规范也要遵守cordova官方标准。

开发背景

cordova是Apache基金会的开源项目，官方网站：https://cordova.apache.org，是移动端跨平台框架，地位不可撼动，大量厂商直接或间接采用此框架开发APP；但是目前不支持HarmonyOS Next版本，开发者将原Android和Ios项目移植到HarmonyOS Next版，无法适配，为此我们公司研发了cordova OpenHarmony，遵守cordova官方标准，使适配纯血鸿蒙在几分钟内就可以完成，无需投入任何研发，新开发的项目，一次研发就适用于Android、Ios和HarmonyOS三大平台，也节省了大量的时间和人力成本。

支持插件

插件ID	接口说明
cordova-plugin-device	名称：设备信息文档地址：GitHub - apache/cordova-plugin-device: Apache Cordova Device Plugin 所有接口遵守官方文档，uuid和serial读取是鸿蒙系统的ODID,鸿蒙只允许系统应用读取uuid和serial，普通应用无权读取，具体文档参考华为官方文档：文档中心
cordova-plugin-whitelist	名称：网络访问白名单文档地址：GitHub - apache/cordova-plugin-whitelist: [DEPRECATED] Apache Cordova - Whitelist Plugin 使用cordova OpenHarmony不存在跨域访问问题，任何域名都可以访问网络，因此为了安全性，需要配置网络访问白名单，使用方法保持和原接口一致外，做了一些修改如下: （1）自动识别http和https，http是80端口，https是443端口,支持自定义端口，但无需在config.xml里面配置（2）不支持目录配置，就是直接配置域名就可以了，域名支持二级域名通配符（3）举例1：在config.xml里面添加< allow-intent href=".magongshou.com" />支持maongshou.com的所有二级域名（4）举例2：在config.xml里面添加< allow-intent href="" /> 支持所有域名>
cordova-hot-code-push-plugin	名称：热更新插件文档地址:GitHub - nordnet/cordova-hot-code-push: [DEPRECATED] - This plugin provides functionality to perform automatic updates of the web based content in your application. 热更新部分js和css文件，无需升级整个app，主要是解决紧急情况下的bug，升级app还是建议上架应用市场。调用方法如下：（1）修改插件两处bug，在rawfile/plugins/cordova-hot-code-push-plugin/www/chcp.js文件第60行: var resultObj = JSON.parse(msg); 改为:var resultObj = msg; 第83行:callback(resultObj.error, resultObj.data); 改为:callback(resultObj.action, resultObj.error, resultObj.data); （2）js调用接口initPlugin初始化插件,插件自动调用，无需手动调用（3）js调用接口chcp.fetchUpdate检查是否有更新,调用此函数可以传入新的升级url地址，如果有更新回调action返回chcp_updateIsReadyToInstall,没有更新返回chcp_nothingToUpdate （4）js调用接口chcp.installUpdate立即启用更新，然后app会自动重启（5）如果不调用步骤3，下次app重启也会自动启用更新
cordova-plugin-network-information	名称：网络管理文档地址：GitHub - apache/cordova-plugin-network-information: Apache Cordova Network Information Plugin cordova网络管理，查看网络连接状态，wifi,4G和5G等连接类型,需申请网络权限，才可以正常使用，见声明权限部分
cordova-plugin-bd-geolocation	名称：百度地理位置定位文档地址:https://github.com/laixiangran/cordova-plugin-bd-geolocation 百度地理位置定位，支持wgs84、gcj02和bd09ll坐标,需申请位置权限，才可以正常使用，见声明权限部分
cordova-plugin-geolocation	名称：cordova地理位置定位官方插件文档地址:https://github.com/apache/cordova-plugin-geolocation cordova官方地理位置定位插件，支持wgs84、gcj02和bd09ll坐标,需申请位置权限，才可以正常使用，见声明权限部分
cordova-plugin-inappbrowser	名称：内置浏览器文档地址:GitHub - apache/cordova-plugin-inappbrowser: Apache Cordova InAppBrowser Plugin cordova的app的内置浏览器，实现app加载服务器网页
cordova-sqlite-storage	名称：数据库插件文档地址:GitHub - storesafe/cordova-sqlite-storage: A Cordova/PhoneGap plugin to open and use sqlite databases on Android, iOS and Windows with HTML5/Web SQL API cordova官方数据库插件，缓存本地数据，支持sql语句
cordova-plugin-camera	名称：相机功能文档地址:GitHub - apache/cordova-plugin-camera: Apache Cordova Plugin camera cordova相机功能，调用相机拍摄照片，无需权限申请
cordova-plugin-file	名称：本地文件管理文档地址:GitHub - apache/cordova-plugin-file: Apache Cordova File Plugin cordova管理本地文件，创建文件，保存文件，访问或加载文件
cordova-plugin-file-transfer	名称：网络文件传输文档地址:GitHub - apache/cordova-plugin-file-transfer: Apache Cordova File Transfer Plugin cordova上传和下载文件
cordova-plugin-dialogs	名称：dialog弹窗文档地址:GitHub - apache/cordova-plugin-dialogs: Apache Cordova Dialogs Plugin cordova接口，弹出鸿蒙系统弹窗
cordova-plugin-datepicker	名称：日期时间控件选择文档地址:GitHub - VitaliiBlagodir/cordova-plugin-datepicker cordova接口，调用鸿蒙系统原生日期和时间选择窗口
phonegap-plugin-barcodescanner	名称：扫码文档地址:GitHub - phonegap/phonegap-plugin-barcodescanner: cross-platform BarcodeScanner for Cordova / PhoneGap 调用摄像头扫码，也可从相册选择图片扫码
cordova-plugin-mlkit-barcode-scanner	名称：扫码文档地址:GitHub - MobisysGmbH/cordova-plugin-mlkit-barcode-scanner: A Cordova barcode scanning plugin based on the Google Mobile Vision library for iOS & Android. 调用摄像头扫码，也可从相册选择图片扫码
cordova-plugin-statusbar	名称：状态栏设置文档地址:GitHub - apache/cordova-plugin-statusbar: Apache Cordova Status Bar Plugin 设置和管理状态栏
cordova-plugin-media-capture	名称：录制视频和音频文档地址:GitHub - apache/cordova-plugin-media-capture: Apache Cordova Media Capture Plugin cordova调用摄像头拍摄视频，和阿里云oss插件或者网络传输插件相结合实现拍摄视频后上传服务器功能
cordova-plugin-alipay-v2	名称：支付宝支付插件文档地址:GitHub - hhjjj1010/cordova-plugin-alipay-v2: 支付宝《APP支付》cordova插件依赖插件： OpenHarmony三方库中心仓自定义支付宝支付插件，只是按照文档接口调用了支付宝插件,依赖支付宝官方插件
aliyun.uploadvod	名称：阿里云OSS插件暂无文档，需联系开发者阿里云OSS插件，实现移动端直接上传文件到阿里云OSS
cordova-plugin-android-permissions	名称：权限申请插件文档地址:GitHub - NeoLSN/cordova-plugin-android-permissions: This plugin is designed for supporting Android new permissions checking mechanism. cordova授权插件，接口永远返回为拥有权限，主要为兼容android移植到harmony使用的，避免修改Android端的代码，harmong授权已下放到各个插件，无需单独编写代码
phonegap-bluetooth-plugin	名称：经典蓝牙插件文档地址:GitHub - tanelih/phonegap-bluetooth-plugin: Bluetooth plugin for PhoneGap version 2.6.0+ cordova官方经典蓝牙插件,需申请蓝牙权限，才可以正常使用，见声明权限部分
cordova-plugin-ble-central	名称：低功耗蓝牙文档地址:GitHub - tanelih/phonegap-bluetooth-plugin: Bluetooth plugin for PhoneGap version 2.6.0+ 蓝牙4.0版本，蓝牙打印更稳定、安全；cordova支持多款低功耗插件，主要是方便android和ios项目移植,需申请蓝牙权限，才可以正常使用，见声明权限部分
cordova-plugin-bluetooth-serial	名称：低功耗蓝牙文档地址:GitHub - don/BluetoothSerial: Cordova (PhoneGap) Plugin for Serial Communication over Bluetooth 蓝牙4.0版本，蓝牙打印更稳定、安全；cordova支持多款低功耗插件，主要是方便android和ios项目移植,需申请蓝牙权限，才可以正常使用，见声明权限部分
cordova-base64-to-gallery	名称：保存图片到相册文档地址:GitHub - goiarlabs/cordova-base64-to-gallery: :warning: this project is not longer maintained - Cordova plugin to save base64 data as a png image into the device cordova实现保存图片到相册
cordova-plugin-huawei-push	名称：华为推送文档地址:GitHub - waitaction/cordova-plugin-huawei-push: 华为推送Cordova插件 cordova鸿蒙推送

Android移植鸿蒙步骤

1，打开DevEco创建项目，选择Empty Ability进入下一步，填写必要信息，这里要注意，bundle name 先填写com.example.myapplication，也就是保持默认不变，因为在没有cordova.crt证书的情况下，cordova鸿蒙版要求bundle name必须为com.example.myapplication，主要用于研发测试，如果开发测试完成要修改bundle name上架鸿蒙应用市场，请联系开发者申请cordova.ert证书，或者事先联系开发者提供技术服务。

2，项目创建成功后，复制原有Android studio的工程assets/www目录下面的所有文件到鸿蒙工程entry/src/main/resources/rawfile目录下，注意直接复制原andriod工程www目录下的文件，不包含www，例如包含index.html（必须）、cordova.js（必须）、cordova_plugins.js（必须）、plugins目录（必须）、css目录、js目录等。

3，复制原android工程res/xml目录下的config.xml文件到鸿蒙工程entry/src/main/resources/rawfile目录下。

4，打开DevEco studio的Terminal终端，进入工程目录，执行 ohpm install @magongshou/harmony-cordova 安装本插件。

5，打开鸿蒙工程文件entry/src/main/etx/pages/Index.ets文件，修改代码如下：

      import { MainPage, pageBackPress, pageHideEvent, pageShowEvent } from '@magongshou/harmony-cordova/Index';
      @Entry
      @Component
      struct Index {
        onPageShow(){
          pageShowEvent(); //页面显示通知cordova
        }
        onBackPress() {
          pageBackPress(); //拦截返回键由cordova处理
          return true;
        }
        onPageHide() {
          pageHideEvent(); //页面隐藏通知cordova
        }
        build() {
          RelativeContainer() {
            MainPage({isWebDebug:false}); //isWebDebug:DevTools工具调试开关，启动首页index.html
          }
          .height('100%')
          .width('100%')
        }
      }

6，打开鸿蒙工程文件/entry/src/main/ets/entryAbility/EntryAbility.ets文件,修改onCreate函数如下

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';  //引入webview 
import { pagePushNotify, setSchemeHandler } from '@magongshou/harmony-cordova/Index';  //引入cordova sdk

... //省略部分代码
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
   hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
   webview.WebviewController.initializeWebEngine();//webview引擎初始化
   setSchemeHandler();//设置webview scheme
   pagePushNotify(want.parameters);//点击通知消息传送数据给cordova，如果app没有鸿蒙推送功能，此行代码可以不加
}

//增加onNewWant，app没有推送功能，可以不添加此函数
onNewWant(want: Want): void {
   hilog.info(0x0000, 'testTag', 'Succeeded in getting message data');
   pagePushNotify(want.parameters);//点击通知消息传送数据给cordova
}

7，鸿蒙混合研发，也许您会增加其他page页面，不一定应用的首页为cordova webview（index.html)的首页，例如应用增加了鸿蒙的原生的启动页面，包含首页弹窗，同意隐私政策后，然后再从启动页面进入cordova的页面，这样避免在用户没有同意隐私政策的情况下，初始化cordova sdk，因为初始化cordova sdk，系统读取了设备的网络状态，因为国内相关法律规定，在用户没有同意隐私政策的情况下，不允许读取设备的网络标识。

8，做以上代码修改后，鸿蒙的移植已经完毕，可以使用模拟器或者真机进行编译和测试了。

vue移植说明

1，vue开发完成后，需要发布的生产环境，鸿蒙的开发环境就是vue的生产环境，vue打包后生成dist目录，该目录的内容包含js、css和index.html文件

2，创建鸿蒙工程，参考Android移植步骤的创建方式，创建方式一样

3，将dist目录的内容复制到鸿蒙工程entry/src/main/resources/rawfile目录下

4，其他移植和Android移植步骤一样。

Ios移植鸿蒙步骤

如果您的项目有android和Ios的工程，请参考android项目移植项目的鸿蒙下，如果您的项目没有andriod工程，只有Ios工程，请使用如下方法移植，移植时大部分内容和安卓一样，只是复制的文件的路径不一致，以下只介绍不同部分，相同部分请参考android移植步骤。

1，复制Xcode的Ios工程目录下的Staging/www目录下的所有文件到鸿蒙工程entry/src/main/resources/rawfile目录下。

2，Xcode工程的config.xml文件在Staging目录下，Xcode工程的该文件不能直接被鸿蒙版cordova使用，需要进行转换，该文件主要记录的是插件的名称和初始化的类，因为鸿蒙版是根据android的config.xml进行插件初始化的，因此需要将Xcode工程config.xml转为安卓的config.xml，请将Xcode工程使用node加入安卓平台，系统会自动生成android版的config.xml。然后将文件复制到鸿蒙版工程的entry/src/main/resources/rawfile下。

附加说明：本人认为使用cordoca跨平台研发，一般至少都会包含android和ios两大平台，很少只有ios平台，没有android平台的，所以大部分移植鸿蒙参考android移植步骤，后续升级SDK会兼容Ios工程的config.xml，无需转换就可以使用。

应用权限声明

有些插件需要设置相应的权限才可以正常使用，不使用插件，不配置声明，因此需要配置声明权限，配置方法官方文档地址：

文档中心

特别说明：声明权限，有个reason的配置，需要在以下三个三件中配置

entry/src/main/resources/base/element/string.json

entry/src/main/resources/en_US/element/string.json

entry/src/main/resources/zh_CN/element/string.json

1，网络权限声明

     {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO",
        "reason": "$string:netWorkInfo",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      }

2，蓝牙权限声明

       {
        "name": "ohos.permission.ACCESS_BLUETOOTH",
        "reason": "$string:accessBleInfo",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.DISCOVER_BLUETOOTH",
        "reason": "$string:accessBleInfo",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.USE_BLUETOOTH",
        "reason": "$string:accessBleInfo",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      }

3，地理位置权限

      {
        "name": "ohos.permission.APPROXIMATELY_LOCATION",
        "reason": "$string:locationInfo",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.LOCATION",
        "reason": "$string:locationInfo",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      }

新项目，一次开发适用于andriod、Ios和Harmony三大平台

由于cordova官方当前并不支持HarmonyOS平台，使用node无法直接将HarmonyOS加入到cordova，也无法直接安装插件到HarmonyOS，因此对于新项目要一次开发满足三大平台的话，建议先通过node加入Android和Ios平台和安装插件，后续研发可以使用Android studio研发和调试，待研发成功后，然后再在Xcode和DevEco做跨平台适配。Xcode适配请参考cordova的官方文档，HarmonyOS适配请参考以上Android的移植步骤。

特别说明

当前版本不支持使用者自定义插件研发，如果该版本没有包含您要使用的插件，或者您的项目中有Android或Ios的自定义插件，需要移植到HarmonyOS平台，请您和本开发者联系，获取技术支持。

使用鸿蒙版cordova sdk在开发测试阶段务必将bundle name修改为com.example.myapplication，如果将bunlde name改为正式的Id，鸿蒙版cordova sdk会读取entry/src/main/resources/rawfile目录的cordova.crt证书文件，用于验签，如果该文件不存在，启动应用后，应用会闪退。如果应用的bundle name为com.example.myapplication，鸿蒙版 cordova sdk会跳过验签，不检测cordova.crt文件。但是上架鸿蒙应用市场，必须将bundle name改为正式的id，所以请联系开发者申请cordova.ert证书，另外由于操作系统之间的差异，虽然保持了cordova的插件接口不变，但是返回值会有所调整，后续文档会逐步完善，在使用本插件跨平台研发时请联系开发者提供技术服务。

常见问题

1，编译报错 Error: ... useNormalizedOHMUrl is not true. 支付宝支付插件引起的，在/build-profile.json5中增加找到buildOption配置选项，增加"useNormalizedOHMUrl": true，如下：

    "buildOption": {
      "strictMode": {
        "caseSensitiveCheck": true,
        "useNormalizedOHMUrl": true
      }
    }

2，鸿蒙返回键不起作用，就是手势事件，从左往右快速滑动，app不返回上一页面，或者到了顶层页面不退出应用不同的框架有不同的处理方式，如果不管使用的是什么框架，只在cordova层处理的，需要监听返回键事件，代码如下：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
          document.addEventListener("backbutton", onBackKeyDown, false);
}

function onBackKeyDown() {
    //自己处理返回
}

如果采用ionic angularjs框架，可以采用如下代码：

   function showConfirm() {
       //处理退出应用的逻辑
   }
   $ionicPlatform.registerBackButtonAction(function (e) {
    // Is there a page to go back to?
      if ($location.path() == '/tab/message') { //到了顶层页面，/tab/message是等层页面的路由，这里只是举个例子，实际情况根据您的项目设置
    	  showConfirm();
          return false
      } else if ($ionicHistory.backView()) {
          // Go back in history
    	  $ionicHistory.goBack(); //自己处理返回
      } else {
          // This is the last page: Show confirmation popup
          showConfirm();
          return false;
      }
      e.preventDefault();
      return false;
  }, 101);

说明：无论采用什么框架都可以在cordova层通过监听backbutton返回事件自己处理。