背景
Harmony NEXT 来势汹汹,App 也需要适配鸿蒙版本。有个古老的项目,用的还是上古的 Cordova 来实现,同时需要适配鸿蒙。我个人研究了几天,尝试做了改造。后来发现有开源的项目,只是没有合适的 readme 文件,在这里简单补充一下。
在 gitee 上有多个项目,看起来都是从这个项目中 fork 出去的。这个项目没有 readme 文件,不确定主要维护的伙伴是什么想法,我就按照我的理解写写文档,如果主要维护的伙伴不合适可以联系我删除掉。主要也是现在使用 Cordova 的越来越少了,随笔写下来作为笔记。希望对有用的伙伴一些帮助,可以相互交流,相互帮助。
实现思路
首先我们要梳理清楚我们要如何实现适配鸿蒙,我们都知道 Cordova 是 Hybrid 的形式,是通过 WebView 加载本地或远程的 H5 网页,H5 中通过 js 调用原生的功能。
Cordova 本身是很完善的体系,从 Cordova cli 可以直接生成 Android 和 iOS 的代码。但是 Cordova cli 是很复杂的,如果是增加鸿蒙平台是很有难度的。在 Cordova 本身的团队是没有鸿蒙平台的诉求的,所以他们是没有意愿来新增鸿蒙平台。自己研发性价比太低啦,大概率是很难被接受。
所以我们的目的不是要在 Cordova 中增加鸿蒙的平台,而是在鸿蒙平台中将 H5 代码移植过来。这样我们可以复用原有的 H5代码,对原有的 Android 和 iOS 影响降到最低,只需要在鸿蒙的代码中实现原生的功能就可以了。
具体的做法就是使用 Cordova cli 生成 H5,然后将编译后的文件移植到鸿蒙平台中。
实现方式
开源项目 ohos_cordova 已经实现了绝大部分的功能,已经基于 Cordova Android 实现了 js 的改造,同时实现了鸿蒙的原生代码框架,只需要我们将编译后的 H5 代码放进来就可以了。
具体的步骤:
- 下载 ohos_cordova 代码到本地
- 在原有的项目中编译前端 cordova prepare android
- 将编译后的代码放在 ohos_cordova/library/src/main/resources/rawfile/ 目录下。
- 用 ohos_cordova/js/cordova.harmony.js 文件替换 library/src/main/resources/rawfile/www/cordova.js
- 修改 index.ets CordovaWeb url 为 resource://rawfile/www/index.html
- 启动鸿蒙平台基本是可以跑起来项目了。
接下来就是新增插件,增加自己特有的原生代码了,具体做法可以参考这个文档,这位网友伙伴写的很清楚,我就没有再重复了。有疑问可以交流实现思路~😄