前言
如果安卓項(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,如下圖:
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:
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è)吧,如下圖:
復(fù)制到/mynativeapp/src/assets/下
4.將Cordova項(xiàng)目的config.xml拷貝到 /安卓項(xiàng)目/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ù)制過來就可以了。
6.將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);
}
});
}
}
-
編譯安卓項(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