Cordova是什么
關(guān)于這個問題甘穿，還是看看官網(wǎng)是怎么說的吧:
Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.
翻譯一下：
Cordova包裝你的HTML/JavaScript app到原生app容器中独旷，可以讓你訪問每個平臺設(shè)備的功能。這些功能通過統(tǒng)一的JavaScript API提供枕屉，讓你輕松的編寫一組代碼運行在幾乎市面上的所有手機和平板上，并可以發(fā)布到相應(yīng)的app商城中丁屎。
聽上去蠻不錯的负饲，那么我們就開始用它來做一個app吧！
PS: 因為本人沒有Mac設(shè)備蜜暑，所以此次演示僅限在Windows上模擬Android應(yīng)用铐姚，Mac上可類似完成。
搭建環(huán)境
- 安裝 nodejs, https://nodejs.org/en/
- 安裝 npm, 安裝nodejs時會一并被裝上
- 安裝 cordova
- 安裝 Android Studio, https://developer.android.com/studio/index.html
如果模擬iOS應(yīng)用肛捍，那么請使用Mac并安裝XCode, https://developer.apple.com/xcode/
npm install -g cordova
環(huán)境坑一
創(chuàng)建應(yīng)用
cordova create MyApp
如果按照Cordova(http://cordova.apache.org/)官網(wǎng)所述隐绵，直接用npm全局安裝cordova，并創(chuàng)建應(yīng)用拙毫，你可能遇到以下錯誤：
Error: Uncaught, unspecified "error" event. ( Error from Cordova Fetch: Error:
cmd: Command failed with exit code 4294963238 Error output:
npm ERR! not a package C:\Users\Administrator\AppData\Roaming\npm\node_modules\c
ordova\node_modules\.3.12.0@cordova-app-hello-world\index.js
npm ERR! addLocal Could not install C:\Users\Administrator\AppData\Roaming\npm\n
ode_modules\cordova\node_modules\.3.12.0@cordova-app-hello-world\index.js
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "install" "C:\\Users\\Administrator\\AppData
\\Roaming\\npm\\node_modules\\cordova\\node_modules\\.3.12.0@cordova-app-hello-w
orld\\index.js"
npm ERR! node v6.10.1
npm ERR! npm v3.10.10
...
此時不要緊張依许，卸載cordova，使用yarn重新安裝一下缀蹄，猜測可能和npm版本不兼容峭跳。
yarn是facebook出品，功能類似npm的包管理器缺前，可完全替代npm
npm uninstall -g cordova
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org
yarn global add cordova
環(huán)境坑二
安裝好yarn和cordova之后蛀醉，使用cli命令cordova create MyApp創(chuàng)建project，此時你可能會遇到以下錯誤：
'cordova' 不是內(nèi)部或外部命令衅码，也不是可運行的程序或批處理文件拯刁。
這是什么原因呢？
原來我們沒有將yarn的bin目錄加入到環(huán)境變量path逝段，作為一個Windows僵尸粉垛玻，判斷出這點還是不難的。執(zhí)行以下命令奶躯，找到yarn的bin目錄所在：
> yarn global bin
d:\Users\gy.wang\AppData\Local\Yarn\bin
將d:\Users\gy.wang\AppData\Local\Yarn\bin此目錄添加到windows環(huán)境變量path
配置好環(huán)境帚桩，重新打開CLI窗口，我們終于可以順利地創(chuàng)建cordova應(yīng)用巫糙，cordova使用默認(rèn)模板創(chuàng)建好一個Project朗儒。
> cordova create MyApp
Creating a new cordova project.
> tree
├─hooks
├─platforms
├─plugins
├─res
│ ├─icon
│ │ ├─android
│ │ ├─bada
│ │ ├─bada-wac
│ │ ├─blackberry
│ │ ├─blackberry10
│ │ ├─ios
│ │ ├─tizen
│ │ ├─webos
│ │ └─windows-phone
│ └─screen
│ ├─android
│ ├─bada
│ ├─bada-wac
│ ├─blackberry
│ ├─blackberry10
│ ├─ios
│ ├─tizen
│ ├─webos
│ └─windows-phone
└─www
├─css
├─img
└─js
在Mac和Linux系統(tǒng)下，環(huán)境變量的配置請自行g(shù)oogle一下
環(huán)境坑三
添加Android平臺
d:\cordova-app\MyApp>cordova platform add android
Using cordova-fetch for cordova-android@~6.2.2
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: io.cordova.hellocordova
Name: HelloCordova
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* ne
ed this plugin since the whitelist will be built in.
--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...
注意這里的
Android target: android-25
在項目根目錄下参淹，運行命令cordova build android來編譯你的項目醉锄，你可能遇到以下錯誤：
Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'android'.
> You have not accepted the license agreements of the following SDK components:
[Android SDK Platform 25].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Mana
ger.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
原因是啥呢？當(dāng)前cordova要求的Android版本比較高浙值，需要安裝Android SDK Platform 25才能順利編譯恳不，怎么辦？ 裝开呐！
打開Android Studio, 安裝SDK
安裝成功之后烟勋，執(zhí)行命令cordova build android规求，這次終于成功了！
......
BUILD SUCCESSFUL
Total time: 1 mins 28.925 secs
Built the following apk(s):
D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
APK包成功打好卵惦，這次我們運行一下阻肿，執(zhí)行命令：
cordova run android
這次我們會遇到環(huán)境坑四
環(huán)境坑四
....
No target specified and no devices found, deploying to emulator
Error: No emulator images (avds) found.
1. Download desired System Image by running: "d:\Users\gy.wang\AppData\Local\Android\sdk\tools\android.bat" sdk
2. Create an AVD by running: "d:\Users\gy.wang\AppData\Local\Android\sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
不急，仔細(xì)看報錯信息的意思是沒有可用的設(shè)備或模擬器沮尿。這個簡單丛塌，打開Android Studio添加一個:
再次運行cordova run android， 哈畜疾！ 這次成功了赴邻！
Total time: 2.737 secs
Built the following apk(s):
D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
ANDROID_HOME=d:\Users\gy.wang\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0
No target specified and no devices found, deploying to emulator
Skipping build...
Built the following apk(s):
D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
Using apk: D:/cordova-app/MyApp/platforms/android/build/outputs/apk/android-debug.apk
Package name: io.cordova.hellocordova
INSTALL SUCCESS
LAUNCH SUCCESS
環(huán)境坑五
什么！閃退啡捶！WTF!
運行命令cordova run android姥敛，將APK包安裝到模擬器上結(jié)果又報錯了！
離成功就差一步了瞎暑，別泄氣彤敛！我們慢慢查找原因~
-
step-1， 查看cordova所使用的android版本
"android": "6.2.3"對應(yīng) Android SDK Platform 25
-
step-2金顿， 查看模擬器使用的android版本
"android": "6.0"對應(yīng) Android SDK Platform 23
-
step-3臊泌， 分析：模擬器上的Android版本低于cordova打包時用的Android版本鲤桥，相應(yīng)的SDK版本也要低
此時怎么辦呢揍拆？
- Plan A: 降版本！刪除原有cordova默認(rèn)下載的android版本茶凳，然后安裝和模擬器上一樣的android版本嫂拴。
- Plan B: 升版本！通過Android Studio將模擬器升級到最新的版本
- Plan C: 用真機來調(diào)試贮喧！
step-4筒狠， 我是通過 Plan C解決了上述問題
至此，APP終于搞定了箱沦！
總結(jié)
- 本篇僅僅展示了如何利用Cordova制作一個Android App, 其實我們還可以利用Cordova制作H5應(yīng)用辩恼，chrome應(yīng)用等等，它們更加簡單谓形，有興趣的同學(xué)可以自己嘗試灶伊。
- Cordova是前端人員走近APP世界的一條捷徑，相比React Native寒跳，它更容易上手聘萨，因為說到底，它還是運行在瀏覽器中的童太，我們不需要深入了解原生API米辐，我們只需寫好HTML/CSS/JS即可胸完。
- 有人說它性能不好，我想說翘贮，這事得分場景看赊窥，除了游戲類的應(yīng)用，絕大多數(shù)應(yīng)用都不需要太高的性能狸页，隨著前端技術(shù)的發(fā)展誓琼，差距會越來越小，因此肴捉，我非掣孤拢看好它的前景。
- 作為一個獨立開發(fā)者或者一個創(chuàng)業(yè)團隊使用Cordova去完成一個APP齿穗，無疑是一個非常好的選擇傲隶。
- Cordova: 跨平臺，一次編寫窃页，多處運行跺株。
