Cordova嵌入Android项目(CordovaWebView)

首先，Cordova官方是有介绍如何将Cordova嵌入Android项目中的，链接Embedding Cordova WebView on Android。
不过这篇文章年久失修，使用的Cordova版本还是1.9，其中的用法对现在的Cordova已经完全不适用了。本文使用的Cordova版本为10.0.0和androidx。
最新官方文档地址：Cordova Android WebViews

文章目录

Cordova嵌入Android项目(CordovaWebView)
准备
摘要
创建Cordova项目
添加Cordova插件和Android平台
Cordova框架迁移
配置Android项目(Cordova嵌入)
完成嵌入
参考

准备

首先你需要准备相关的工具：

Cordova CLI
Java SE JDK
Android Studio
Android SDK Platform Tools.

摘要

想要嵌入Cordova项目到Android之中，首先需要使用Cordova CLI来创建一个Cordova项目，然后再下载需要使用的Cordova plugin。

然后将Cordova项目创建的文件拷贝到需要嵌入的Android项目中。

最后修改Android项目的相关配置和代码完成嵌入。

创建Cordova项目

使用Cordova提供的命令行工具(CLI)创建Cordova项目，指令如下（指令文档：Create the App）：

cordova create  hello com.example.hello HelloWorld

添加Cordova插件和Android平台

使用Cordova CLI来添加需要使用的Cordova插件(例如相机)：

cordova plugin add cordova-plugin-camera

使用Cordova CLI来添加Android平台，生成的Android代码我们后面会用到：

cordova platform add android

最后使用下面的prepare命令来同步Android项目的配置

cordova prepare android

Cordova框架迁移

创建一个Android项目或者打开已有的Android项目，并且最好两个项目(Cordova/Android)使用相同的包名和项目名。

打开Cordova项目的根目录，进入CORDOVA_PROJECT_ROOT/platforms/android/CordovaLib/src/目录，复制其中的org目录，这个目录包含了Cordova的框架代码。
打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/java/目录，然后粘贴刚刚复制的org目录。

打开Cordova项目的根目录，进入CORDOVA_PROJECT_ROOT/platforms/android/app/src/main/java/目录，复制其中的org目录，这个目录包含了我们之前添加Cordova Plugin代码。
打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/java/目录，然后粘贴刚刚复制的org目录。

打开Cordova项目的根目录，进入CORDOVA_PROJECT_ROOT/platforms/android/app/src/main/目录，复制其中的assets目录，这个目录包含了Cordova的JavaScript库，和默认的HTML文件。
打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/，粘贴刚刚复制的assets目录。

打开Cordova项目的根目录，进入CORDOVA_PROJECT_ROOT/platforms/android/app/src/main/res/目录，复制其中的xml目录，这个目录包含了Cordova需要使用的相关配置。
打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/res/目录，粘贴刚刚复制的xml目录。

[可选] 编辑AndroidManifest.xml，有些插件会修改此文件，并且添加相关的权限。请参照CORDOVA_PROJECT_ROOT/platforms/android/app/src/main/AndroidManifest.xml修改STUDIO_PROJECT_ROOT/app/src/main/AndroidManifest.xml。

配置Android项目(Cordova嵌入)

Cordova项目都已经迁移到Android项目当中了，现在需要修改Android项目来完成Cordova的嵌入。

编辑布局文件

此处以空白Android项目的activity_main.xml布局文件为例，插入Cordova框架提供的SystemWebView：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><org.apache.cordova.engine.SystemWebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="match_parent" /></android.support.constraint.ConstraintLayout>

这样，Cordova提供的webView就被被我们添加到了自己的布局文件中。

修改Activity

此处以空白Android项目的MainActivity为例。

2.1 修改activity的父类

public class MainActivity extends CordovaActivity { ... }

这样我们就可以使用Cordova提供的相关方法了。

2.2 修改onCreate方法的初始化

在onCreate中进行CordovaActivity的初始化和加载应用的根目录(URL):

@Override
public void onCreate(Bundle savedInstanceState)
{super.onCreate(savedInstanceState);setContentView(R.layout.activity_main); // Set content view to main activity as done in any Android appsuper.init();loadUrl(launchUrl); // Preload launch URL found from /res/xml/config.xml -> <content src...>
}

注意：onCreate方法的访问权限由protected改为了public。

2.3 重写makeWebView方法

我们需要重写makeWebView方法来进行CordovaWebView的初始化，CordovaWebView会管理所有的事件、插件和CordovaWebViewEngine。并且将使用SystemWebViewEngine的实现类(CordovaWebViewImpl)来接管所有来自WebView的事件。

@Override
protected CordovaWebView makeWebView() {SystemWebView appView = findViewById(R.id.webView);return new CordovaWebViewImpl(new SystemWebViewEngine(appView));
}

2.4 添加一个空的createViews方法

createViews会确保activity_main.xml被用来进行UI的渲染。

@Override
protected void createViews() { }

2.5 MainActivity修改结果

最后的修改结果应该像下面这样：

public class MainActivity extends CordovaActivity {@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main); // Set content view to main activity as done in any Android appsuper.init();loadUrl(launchUrl); // Preload launch URL found from /res/xml/config.xml -> <content src...>}@Overrideprotected CordovaWebView makeWebView() {SystemWebView appView = findViewById(R.id.webView);return new CordovaWebViewImpl(new SystemWebViewEngine(appView));}/*** Intentionally left blank so that the activity_hud and webView are used.*/@Overrideprotected void createViews() { }
}

完成嵌入

至此，所有的嵌入工作已经完成了。直接运行会看到Cordova的默认页面(Device Ready)。

注：如果某些插件包的代码报错，那就把对应的v4包内容使用androidx的代替即可。

参考

android-cordova-embedded