原生Android項目里嵌入Cordova

Android H5混合開發（3）：原生Android項目里嵌入Cordova


如果安卓項目已經存在了，那么如何使用Cordova做混合開發？

方案1（適用於插件會持續增加或變化的項目）：
新建Cordova項目並添加Android平台，把我們的安卓項目導入Android平台（我們的安卓項目需要做目錄結構、配置等很多內容調整），后續開發中，可通過命令在Codova項目中統一快速添加插件，進行原生與H5通信。

方案2（適用於插件較穩定的項目）：
新建Cordova項目並添加Android平台，添加相關插件，將Android平台下H5代碼、插件相關的內容導入到我們的項目中（我們的安卓項目目錄結構、配置信息等變化較小）。后續開發中，如果新增、編輯插件，則無法直接通過命令在我們的項目中維護插件，需要在新建的Cordova項目中維護好，然后手動復制過來相關的文件。

本次講解，我們使用第二種方案吧。實現也很簡單，大致過程如下：
1.准備安卓項目
2.將Cordova項目的Cordovalib導入安卓項目，並在gradle中添加依賴
3.將Cordova項目的H5端代碼（即/WWW/）拷貝到 /安卓項目/src/assets/下
4.將Cordova項目的config.xml拷貝到 /安卓項目/res/xml/下
5.將Cordova項目的於H5端約定的插件.java代碼拷貝到 /安卓項目/src/對應包名下/(我們主要此處寫代碼)
6.將Cordova項目的WhitelistPlugin拷貝到 /安卓項目/src/下


注意，本次講解：
1.我們新建一個項目mynativeapp作為已存在的安卓項目；
2.我們直接使用《Android H5混合開發（2）：自定義Cordova插件》中的Demo作為Cordova項目；

1.准備安卓項目
在/TestCordova/mynativeapp/目錄下，使用AndroidStudio創建一個普通的安卓項目，取名：mynativeapp，如下圖：


新建的安卓項目
2.將Cordova項目的Cordovalib導入安卓項目，並在gradle中添加依賴
一般方案：
使用cordova命令新建一個混合項目，添加android平台，里面包含Cordovalib。然后在我們的安卓項目中導入即可。


此處，我們直接導入上一節課 /Cordova項目/android平台下的Cordovalib：
導入后的mynativeapp項目目錄結構和gradle
3.將Cordova項目的H5端代碼（即/WWW/）拷貝到 /安卓項目/src/assets/下
注意：因為咱們這里只是做Demo，實際上並沒有找H5端的人員寫這塊的代碼。在上一節課，咱們在Cordova項目的android平台中，已經寫了個測試的H5代碼，那么，就直接使用這個吧，如下圖：


H5的代碼


復制到/mynativeapp/src/assets/下
復制過來的H5的代碼
4.將Cordova項目的config.xml拷貝到 /安卓項目/res/xml/下
我們將Cordova項目/res/xml/config.xml文件，拷貝到/mynativeapp/res/xml/下


Cordova項目/res/xml/config.xml文件
拷貝到/mynativeapp/res/xml/下
5.將Cordova項目的於H5端約定的插件.java代碼拷貝到 /安卓項目/src/對應包名下/
正常開發時，我們主要此處寫代碼。
在上節課，我們的自定義插件的代碼已經有了，所以直接復制過來就可以了。

Cordova項目的於H5端約定的插件.java代碼
自定義的插件代碼拷貝到 /安卓項目/src/對應包名下/
6.將Cordova項目的WhitelistPlugin（插件白名單）拷貝到 /安卓項目/src/下
Cordova項目的WhitelistPlugin
拷貝到 /安卓項目/src/下
准備工作完畢，開始測試
至此，安卓項目中所需的Cordova依賴、H5代碼、插件相關信息都手動導入了。接下來我們測試一下H5的功能吧。
1.新建類TestCordovaActivity，繼承CordovaActivity，加載index.html

package com.ccc.ddd;
import android.os.Bundle;
import org.apache.cordova.CordovaActivity;

/**
 * @author xc
 * @date 2018/9/25
 * @desc 測試H5的頁面
 */
public class TestCordovaActivity extends CordovaActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null 
                   && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }

        // Set by <content src="index.html" /> in config.xml
        // 加載H5首頁
        loadUrl(launchUrl);
    }
}
2.MainActivity添加按鈕，點擊跳轉至TestCordovaActivity頁面

package com.ccc.ddd;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, 
                                            TestCordovaActivity.class);
                MainActivity.this.startActivity(intent);
            }
        });
    }
}
編譯安卓項目，運行到手機


MainActivity.jpg

TestCordovaActivity.jpg
總結
本章介紹了在已有安卓項目中如何使用Cordova，沒有太多技術點。
如果有不明白的地方，建議去官網多查查資料。
[https://cordova.apache.org/docs/en/latest/)

Cordova的命令、插件的命令等只是方便我們快速管理維護項目和插件的工具。我們可以使用，但是不能太過依賴，要活學活用。


源碼已上傳至網盤：
https://pan.baidu.com/s/1THPUbfCgRQHZGLWy7_Zkww

第一篇：Android H5混合開發（1）：構建Cordova 項目
https://www.jianshu.com/p/058a0dd7f809

第二篇：Android H5混合開發（2）：自定義Cordova插件
https://www.jianshu.com/p/8fcbf06a4c3a

第三篇：Android H5混合開發（3）：原生Android項目里嵌入Cordova
https://www.jianshu.com/p/e306ae0f1f03

第四篇：Android H5混合開發（4）：構建Cordova Jar包
https://www.jianshu.com/p/447d41a1299d