如何在原生Android專案裡嵌入Cordova
背景:
這段時間在維護一個Cordova混合專案,以前稍微接觸過Cordova,也寫過簡單的純純的Cordova的Demo,但是沒有嘗試過混合原生的Cordova。
在接到專案後比較了一下專案架構和Cordova的結構,發現其中的差別還是不少,主要差別就在專案是通過原生的Activity去啟動CordovaActivity的。經驗告訴我:這個Cordova被嵌入了原生當中,這貨是個混合App。
由於自己之前沒有這樣玩過,所以就開始從頭學習一下如何去將Cordova嵌入原生做一個最簡單的混合App,從簡單開始,慢慢迭加。
下面進入正題:
1、 就Android、Cordova的開發環境而言我這裡不再詳述。
2、確認好環境後,首先建立一個Cordova專案(這個專案只是為了給正式的原生專案提供必要一些必要資源的臨時專案),並新增Android平臺再編譯。指令如下:
$ cordova create CordovaProject
$ cd CordovaProject
$ cordova platform add android
$ cordova build
3、然後使用Android Studio將上述專案中的Android平臺所對應的子專案(Cordova\CordovaProject\platforms\android)開啟,此時系統會無法正常編譯,但是我們可以修改gradle和相關配置檔案解決這以問題,然後專案就能正常編譯了。3-1、修改檔案gradle-wrapper.properties中的distributionUrl為:3-2、修改build.gradle中的classpath為:distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
buildscript { repositories { jcenter() maven { url "https://maven.google.com" } } dependencies { classpath 'com.android.tools.build:gradle:2.2.3' } }
3-3、錯誤:Error:(262, 0) Could not find method implementation() for arguments *****
將gradle中對應的implementation換成compile
3-4、修改相關的js的Builder檔案:
1、platforms\android\cordova\lib\builders\StudioBuilder.js:將gradle的zip的版本改為3.3(gradle-3.3-all.zip),將所有的implement替換為compile
2、platforms\android\cordova\lib\builders\GradleBuilder.js:改動同上
4、通過編譯後再使用Gradle工具構造我們需要的jar包。
具體步驟:點選Android Studio右方的Gradle工具圖示,找到CordovaLib->Tasks->build->assembleRelease,雙擊。
進入CordovaProject\platforms\android\CordovaLib\build\outputs\aar目錄,解壓其中的CordovaLib-release.aar檔案,得到class.jar,這就是我們需要的jar包,將class.jar改為:cordova-8.0.0.jar。
5、新建一個Android原生專案,專案名為:MyAndroid。將上一步的jar包匯入此專案,關於Android Studio中怎樣匯入第三方jar包的具體操作本文不做介紹。
6、拷貝assets檔案。
具體操作:將臨時Cordova專案(第2步中建立的專案)中的Android的assets檔案(CordovaProject\platforms\android\app\src\main\assets),放入最終專案(第5步建立的專案)對應的目錄中(MyAndroid\app\src\main)中。
7、拷貝org檔案。
具體操作:將臨時Cordova專案(第2步中建立的專案)中的Android的org檔案(CordovaProject\platforms\android\app\src\main\java\org),放入最終專案(第5步建立的專案)對應的目錄中(MyAndroid\app\src\main\java)中。
8、拷貝config.xml檔案。
具體操作:將CordovaProject\platforms\android\app\src\main\res\xml\config.xml拷貝至MyAndroid\app\src\main\res\xml
9、將MainActivity.java改為繼承CordovaActivity.java,通過loadUrl(launchUrl)載入html頁面。(當然,你也可以選擇使用其他的Activity繼承CordovaActivity來達到混合目的)。
10、然後編譯執行,你將看到如下錯誤:
Error:Error converting bytecode to dex:
Cause: Dex cannot parse version 52 byte code.
解決方案:修改build.gradle(Module: app)中的defaultConfig,在其中加入jack允許:
...
defaultConfig {
...
jackOptions {
enabled true
}
}
11、然後,執行成功。