Cordova嵌入Android项目(CordovaWebView)

骑猪看日落 2022-12-06 12:40 270阅读 0赞

# Cordova嵌入Android项目(CordovaWebView) #

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

### 文章目录 ###

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

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

--------------------

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

--------------------

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

--------------------

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

--------------------

1.  \[可选\] 编辑`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的嵌入。

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][]

[Embedding Cordova WebView on Android]: https://cordova.apache.org/docs/en/2.5.0/guide/cordova-webview/android.html
[Create the App]: https://cordova.apache.org/docs/en/latest/guide/cli/index.html#create-the-app
[android-cordova-embedded]: https://github.com/realStandal/android-cordova-embedded