最近項(xiàng)目計(jì)劃開發(fā)單頁面應(yīng)用,計(jì)劃使用cordova進(jìn)行包裝,本篇對(duì)Cordova開發(fā)需要的環(huán)境和創(chuàng)建過程進(jìn)行總結(jié),由于小弟也是在學(xué)習(xí)過程中,文章出錯(cuò)處歡迎大神指正...,廢話多說無意,開始擼碼~~~
一 環(huán)境安裝:
首先要準(zhǔn)備android平臺(tái)下cordova開發(fā)用到的環(huán)境...
這里提供的為這些工具的官網(wǎng)或下載地址：
- 安裝Node.js
https://nodejs.org/en- 安裝Cordova
http://cordova.apache.org
1.安裝Node.js
因?yàn)?Cordova 命令行工具是作為一個(gè) npm 包來分發(fā)的督赤，因此需要預(yù)先安裝 Node.js 稽犁，并且能夠調(diào)用 node 和 npm命令 。因?yàn)?Cordova 命令行工具是作為一個(gè) npm 包來分發(fā)的，因此需要預(yù)先安裝 Node.js ，并且能夠調(diào)用 node 和 npm命令 摸吠。
2.安裝Cordova
安裝好 Node.js 以及 npm，利用 npm 工具能自動(dòng)下載 Cordova 模塊。
C:\>npm install -g cordova
二 創(chuàng)建Cordova APP
官方文檔： http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html
1.新建一個(gè)cordova android應(yīng)用
新建一個(gè)目錄(F:\workroom\Cordova)胸墙，Shift+鼠標(biāo)右鍵，在此處打開命令窗口
F:\workroom\Cordova>cordova create helloworld com.example.hello HelloWorld
創(chuàng)建一個(gè)HelloWorld的應(yīng)用按咒，helloworld文件夾名迟隅，com.example.hello包名，HelloWorld應(yīng)用名
2.添加平臺(tái)
cd helloworld
添加Android平臺(tái)
cordova platform add android --save
檢查當(dāng)前添加的平臺(tái)
cordova platform ls
3.創(chuàng)建app
cordova build android
三 用Android studio打開Cordova 應(yīng)用
1.運(yùn)行項(xiàng)目
運(yùn)行studio,打開File -->Open... 對(duì)話框,選擇創(chuàng)建的helloworld\platform文件夾下的android項(xiàng)目,點(diǎn)擊OK,等待項(xiàng)目編譯
注意: 如果你使用的studio版本較高(最新的是android studio 3.0),因?yàn)閏ordova創(chuàng)建的應(yīng)用版本低,會(huì)有Android Gradle Plugin Update提示,為了不跳坑可以先選擇忽略更新
Cordova和Android版本支持對(duì)應(yīng)關(guān)系
Cordova每個(gè)版本所支持Android最高的API有可能是不一樣的励七，目前Cordova最新的版本支持Android API為23玻淑，其他的版本支持對(duì)應(yīng)關(guān)系可以參考如下：
2.查看目錄結(jié)構(gòu)
選擇Project視圖,查看cordova編譯的完整目錄結(jié)構(gòu)
3. 項(xiàng)目運(yùn)行結(jié)果
使用真機(jī)或者模擬器運(yùn)行HelloWorld項(xiàng)目,如下
四 Cordova加載遠(yuǎn)程網(wǎng)站
1.修改默認(rèn)加載頁面
Corvoda應(yīng)用的 MainActivity.java 有個(gè) loadUrl(launchUrl) 的方法，將launchUrl 修改為遠(yuǎn)程網(wǎng)站的地址呀伙，即可加載遠(yuǎn)程網(wǎng)站补履。eg：loadUrl("https://www.baidu.com")；
或者修改項(xiàng)目的根文件夾里的 config.xml 文件剿另，將 content src 指定為遠(yuǎn)程網(wǎng)站的地址<content src="https://www.baidu.com" />這樣運(yùn)行后箫锤，直接在應(yīng)用內(nèi)部加載該網(wǎng)頁。不過點(diǎn)網(wǎng)站里面的鏈接跳轉(zhuǎn)會(huì)調(diào)用系統(tǒng)自帶的瀏覽器打開雨女，不是我們想要的效果谚攒。我們想在應(yīng)用的內(nèi)部直接跳轉(zhuǎn)。
2.使用Cordova內(nèi)部瀏覽器跳轉(zhuǎn)鏈接
目前網(wǎng)上有兩種解決方案氛堕，第一種是重寫shouldOverrideUrlLoading方法馏臭，第二種是修改config.xml
- 重寫
shouldOverrideUrlLoading方法
之前的版本可以在OnCreate方法中重寫 shouldOverrideUrlLoading 方法，最新的版本改動(dòng)比較大讼稚，MainActivity.java 是這樣的：
import android.os.Bundle;
import org.apache.cordova.*;
public class MainActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}
不過可以找到 shouldOverrideUrlLoading 方法括儒，在 SystemWebViewClient.java 中，直接修改
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
//return parentEngine.client.onNavigationAttempt(url);
view.loadUrl(url);
return true;
}
- 修改config.xml
在res\config.xml中添加<allow-navigation href="http://*/*" />
好了,到這里你的第一個(gè)Android平臺(tái)的Cordova項(xiàng)目已經(jīng)可以運(yùn)行了,要想體驗(yàn)Cordova帶給我們的更多驚喜可以關(guān)注我后面要寫的Cordova自定義插件開發(fā)~~
(文章參考地址:http://www.reibang.com/p/c86581cb343e)
