Android H5混合開發(fā)(3):原生Android項(xiàng)目里嵌入Cordova

前言

如果安卓項(xiàng)目已經(jīng)存在了,那么如何使用Cordova做混合開發(fā)?

方案1(適用于插件會持續(xù)增加或變化的項(xiàng)目):

新建Cordova項(xiàng)目并添加Android平臺,把我們的安卓項(xiàng)目導(dǎo)入Android平臺(我們的安卓項(xiàng)目需要做目錄結(jié)構(gòu)、配置等很多內(nèi)容調(diào)整),后續(xù)開發(fā)中,可通過命令在Codova項(xiàng)目中統(tǒng)一快速添加插件,進(jìn)行原生與H5通信。

方案2(適用于插件較穩(wěn)定的項(xiàng)目):

新建Cordova項(xiàng)目并添加Android平臺,添加相關(guān)插件,將Android平臺下H5代碼、插件相關(guān)的內(nèi)容導(dǎo)入到我們的項(xiàng)目中(我們的安卓項(xiàng)目目錄結(jié)構(gòu)、配置信息等變化較小)。后續(xù)開發(fā)中,如果新增、編輯插件,則無法直接通過命令在我們的項(xiàng)目中維護(hù)插件,需要在新建的Cordova項(xiàng)目中維護(hù)好,然后手動復(fù)制過來相關(guān)的文件。

本次講解,我們使用第二種方案吧。實(shí)現(xiàn)也很簡單,大致過程如下:
1.準(zhǔn)備安卓項(xiàng)目
2.將Cordova項(xiàng)目的Cordovalib導(dǎo)入安卓項(xiàng)目,并在gradle中添加依賴
3.將Cordova項(xiàng)目的H5端代碼(即/WWW/)拷貝到 /安卓項(xiàng)目/src/assets/下
4.將Cordova項(xiàng)目的config.xml拷貝到 /安卓項(xiàng)目/res/xml/下
5.將Cordova項(xiàng)目的于H5端約定的插件.java代碼拷貝到 /安卓項(xiàng)目/src/對應(yīng)包名下/(我們主要此處寫代碼)
6.將Cordova項(xiàng)目的WhitelistPlugin拷貝到 /安卓項(xiàng)目/src/下

注意,本次講解:

1.我們新建一個(gè)項(xiàng)目mynativeapp作為已存在的安卓項(xiàng)目;
2.我們直接使用《Android H5混合開發(fā)(2):自定義Cordova插件》中的Demo作為Cordova項(xiàng)目;

1.準(zhǔn)備安卓項(xiàng)目

在/TestCordova/mynativeapp/目錄下,使用AndroidStudio創(chuàng)建一個(gè)普通的安卓項(xiàng)目,取名:mynativeapp,如下圖:


新建的安卓項(xiàng)目

2.將Cordova項(xiàng)目的Cordovalib導(dǎo)入安卓項(xiàng)目,并在gradle中添加依賴

一般方案:

使用cordova命令新建一個(gè)混合項(xiàng)目,添加android平臺,里面包含Cordovalib。然后在我們的安卓項(xiàng)目中導(dǎo)入即可。


此處,我們直接導(dǎo)入上一節(jié)課 /Cordova項(xiàng)目/android平臺下的Cordovalib:

導(dǎo)入后的mynativeapp項(xiàng)目目錄結(jié)構(gòu)和gradle

3.將Cordova項(xiàng)目的H5端代碼(即/WWW/)拷貝到 /安卓項(xiàng)目/src/assets/下

注意:因?yàn)樵蹅冞@里只是做Demo,實(shí)際上并沒有找H5端的人員寫這塊的代碼。在上一節(jié)課,咱們在Cordova項(xiàng)目的android平臺中,已經(jīng)寫了個(gè)測試的H5代碼,那么,就直接使用這個(gè)吧,如下圖:


H5的代碼



復(fù)制到/mynativeapp/src/assets/下

復(fù)制過來的H5的代碼

4.將Cordova項(xiàng)目的config.xml拷貝到 /安卓項(xiàng)目/res/xml/下

我們將Cordova項(xiàng)目/res/xml/config.xml文件,拷貝到/mynativeapp/res/xml/下


Cordova項(xiàng)目/res/xml/config.xml文件
拷貝到/mynativeapp/res/xml/下

5.將Cordova項(xiàng)目的于H5端約定的插件.java代碼拷貝到 /安卓項(xiàng)目/src/對應(yīng)包名下/

正常開發(fā)時(shí),我們主要此處寫代碼。
在上節(jié)課,我們的自定義插件的代碼已經(jīng)有了,所以直接復(fù)制過來就可以了。

Cordova項(xiàng)目的于H5端約定的插件.java代碼
自定義的插件代碼拷貝到 /安卓項(xiàng)目/src/對應(yīng)包名下/

6.將Cordova項(xiàng)目的WhitelistPlugin(插件白名單)拷貝到 /安卓項(xiàng)目/src/下

Cordova項(xiàng)目的WhitelistPlugin
拷貝到 /安卓項(xiàng)目/src/下

準(zhǔn)備工作完畢,開始測試

至此,安卓項(xiàng)目中所需的Cordova依賴、H5代碼、插件相關(guān)信息都手動導(dǎo)入了。接下來我們測試一下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添加按鈕,點(diǎn)擊跳轉(zhuǎn)至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);
            }
        });
    }
}
  1. 編譯安卓項(xiàng)目,運(yùn)行到手機(jī)


    MainActivity.jpg

    TestCordovaActivity.jpg

總結(jié)

本章介紹了在已有安卓項(xiàng)目中如何使用Cordova,沒有太多技術(shù)點(diǎn)。
如果有不明白的地方,建議去官網(wǎng)多查查資料。
[https://cordova.apache.org/docs/en/latest/)

Cordova的命令、插件的命令等只是方便我們快速管理維護(hù)項(xiàng)目和插件的工具。我們可以使用,但是不能太過依賴,要活學(xué)活用。


源碼已上傳至網(wǎng)盤:
https://pan.baidu.com/s/1THPUbfCgRQHZGLWy7_Zkww


第一篇:Android H5混合開發(fā)(1):構(gòu)建Cordova 項(xiàng)目

http://www.lxweimin.com/p/058a0dd7f809

第二篇:Android H5混合開發(fā)(2):自定義Cordova插件

http://www.lxweimin.com/p/8fcbf06a4c3a

第三篇:Android H5混合開發(fā)(3):原生Android項(xiàng)目里嵌入Cordova

http://www.lxweimin.com/p/e306ae0f1f03

第四篇:Android H5混合開發(fā)(4):構(gòu)建Cordova Jar包

http://www.lxweimin.com/p/447d41a1299d

第五篇:Android H5混合開發(fā)(5):封裝Cordova View

http://www.lxweimin.com/p/13a0fbaa3227

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容