ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙harmony-cordova(V1.2.1) [打印本页]

作者: 自由的羽毛 时间: 2025-1-2 01:02
标题: 鸿蒙harmony-cordova(V1.2.1)
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文件
1. 第60行: var resultObj = JSON.parse(msg);
2. 改为:var resultObj = msg;
3. 第83行:callback(resultObj.error, resultObj.data);
4. 改为: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返回变乱本身处理。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)