Android H5混合開發（3）：原生Android專案裡嵌入Cordova

摘要： 前言 如果安卓專案已經存在了，那麼如何使用Cordova做混合開發？ 其實也很簡單，大致過程如下： 1.準備安卓專案 2.將Cordova專案的Cordovalib匯入安卓專案，並在gradle中新增依賴 3.將Cordova專案的H5端程式碼（即/WWW/）拷貝到 /安卓...

前言

如果安卓專案已經存在了，那麼如何使用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：

3.將Cordova專案的H5端程式碼（即/WWW/）拷貝到 /安卓專案/src/assets/下

注意：因為咱們這裡只是做Demo，實際上並沒有找H5端的人員寫這塊的程式碼。在上一節課，咱們在cordova專案的android平臺中，已經寫了個測試的H5程式碼，那麼，就直接使用這個吧，如下圖：

複製到/mynativeapp/src/assets/下

4.將Cordova專案的config.xml拷貝到 /安卓專案/res/xml/下

我們將Cordova專案/res/xml/config.xml檔案，拷貝到/mynativeapp/res/xml/下

5.將Cordova專案的於H5端約定的外掛.java程式碼拷貝到 /安卓專案/src/對應包名下/

6.將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);
}
});
}
}

3. 編譯安卓專案，執行到手機

   

   MainActivity.jpg

   

   TestCordovaActivity.jpg

總結

第一篇：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