Cordova嵌入Android项目(CordovaWebView)

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

准备

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

• 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)使用相同的包名和项目名。

1. 打开Cordova项目的根目录，进入CORDOVA_PROJECT_ROOT/platforms/android/CordovaLib/src/目录，复制其中的org目录，这个目录包含了Cordova的框架代码。

2. 打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/java/目录，然后粘贴刚刚复制的org目录。

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

4. 打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/java/目录，然后粘贴刚刚复制的org目录。

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

6. 打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/，粘贴刚刚复制的assets目录。

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

8. 打开Android项目的根目录，进入STUDIO_PROJECT_ROOT/app/src/main/res/目录，粘贴刚刚复制的xml目录。

配置Android项目(Cordova嵌入)

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

1. 编辑布局文件

   此处以空白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.SystemWebView
           android:id="@+id/webView"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   
   </android.support.constraint.ConstraintLayout>
   

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

2. 修改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 app
       super.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 {
       @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 app
           super.init();
           loadUrl(launchUrl); // Preload launch URL found from /res/xml/config.xml -> <content src...>
       }
   
       @Override
       protected 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.
        */
       @Override
       protected void createViews() { }
   }
   

完成嵌入

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

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

参考

android-cordova-embedded