最近我在嘗試瞭解跨平臺技術的發展，首先則是想到了cordova。本文簡單記錄下cordova環境搭建的過程。
安裝cordova
首先是要npm全局安裝cordova
npm install -g cordova創建應用
安裝的cordova類似於create-react-app這種腳手架，可以通過命令行直接創建應用
cordova create myapp添加平臺支持
cordova可以支持ios, android, web三端。
cordova platform add ios
cordova platform add android
cordova platform add browser
進入android目錄下，可以看到很多.java文件，而ios目錄下是很多的object-c文件，browser目錄下則是熟悉的web工程。
並且可以看到，每個平臺下都有一個cordova目錄，我初步猜想，這應該是負責和不同平臺通訊交互的cordova核心。
運行App
Web
web端是最直觀最簡單的，直接運行如下命令即可。
cordova run browserAndroid
對於Android和IOS，我們則需要先檢查相關環境是否安裝正常。
$ cordova requirements
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: not installed
Failed to find ‘ANDROID_HOME’ environment variable. Try setting it manually.
Detected ‘adb’ command at C:\Windows\system32 but no ‘platform-tools’ directory found near.
Try reinstall Android SDK or update your PATH to include valid path to SDK\platform-tools directory.
Android target: not installed
android: Command failed with exit code ENOENT Error output:
‘android’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up ‘ANDROID_HOME’ env variable.
Requirements check results for browser:
Requirements check results for ios:
Apple macOS: not installed
Cordova tooling for iOS requires Apple macOS
Some of requirements check failed
可以看到，我的電腦環境並不滿足android和ios平臺的要求。
首先我們來滿足下android平臺的環境要求。
JDK
首先是JDK，可以通過java和javac命令來檢查下。
C:\>java -version
java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)如果沒安裝，可以參考jdk下載與安裝簡明教程。
Gradle
Gradle是一個基於Apache Ant和Apache Maven概念的項目自動化構建開源工具。
具體安裝過程可以參考gradle環境搭建。
Android SDK
首先我們安裝Android Studio。根據安裝指引，我們會安裝好Android SDK。
在此安裝過程中，遇到了一個報錯：
Android SDK Tools, SDK Patch Applier v4 and 5 more SDK components were not installed感謝這位大佬提供的解決方案，迅速解決了問題，這裏順便記下SDK的安裝目錄。
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk接着我們需要在環境變量-系統變量-Path中新增兩項：
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\platform-tools
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools
並且新增一項系統變量ANDROID_HOME，變量值爲：
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk
試運行命令cordova run android，出現瞭如下警告
$ cordova run android
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk (DEPRECATED)
Starting a Gradle Daemon (subsequent builds will be faster)
於是我又新增了一項系統變量ANDROID_SDK_ROOT，變量值與ANDROID_HOME一樣。
重新跑cordova run android命令，首先看到警告如下：
> Configure project :app
Checking the license for package Android SDK Platform 28 in C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\licenses
Warning: License for package Android SDK Platform 28 not accepted.
上網一查，原來是沒有同意相關協議。我們來到C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\bin目錄下運行命令行，輸入sdkmanager --licenses，然後就會彈出一堆協議，沒辦法，無腦輸入y同意吧。
再次運行cordova run android，發現了新的報錯信息：
No target specified and no devices found, deploying to emulator
No emulator images (avds) found.
1. Download desired System Image by running: "C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\android.bat" sdk
2. Create an AVD by running: "C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
可以看到，是沒有找到設備的原因。需要將手機連接到PC，並且打開開發者選項，允許USB調試。再次嘗試，已經可以看到界面了。
Plugins
我們來試試調用一些原生API，比如調用原生Dialog， 調用相機等。我們先試下Dialog。
Dialog
首先需要插件：
cordova plugin add cordova-plugin-dialogs
接着我們在deviceready事件之後調用Dialog
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
navigator.notification.alert(
‘歡迎歡迎!’, // message
alertDismissed, // callback
‘試下Dialog’, // title
‘好的’ // buttonName
);
}
function alertDismissed() {
// 點擊按鈕後的回調
}
調試後發現彈出的中文亂碼了，需要在index.html加個meta
<meta charset="UTF-8">
Camera
接着我們試下調用相機，首先也是安裝插件：
cordova plugin add cordova-plugin-camera
嘗試調用相機拍照，並將得到的照片通過img元素顯示出來：
// Application Constructor
initialize: function() {
const _this = this;
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
// 點擊按鈕打開相機
document.querySelector('#btnOpenCamera').addEventListener('click', function() {
_this.openCamera()
})
},
openCamera: function() {
const cameraOptions = {
// 默認輸出格式爲base64
destinationType: Camera.DestinationType.DATA_URL,
// 輸出png格式
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
<span class="hljs-comment">// 相機拍照成功</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cameraSuccess</span>(<span class="hljs-params">base64Str</span>) </span>{
<span class="hljs-built_in">console</span>.log(base64Str)
<span class="hljs-comment">// 給圖片元素賦值src</span>
<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#captureImg'</span>).src = prefixBase64PNG(base64Str)
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cameraError</span>(<span class="hljs-params">err</span>) </span>{
<span class="hljs-built_in">console</span>.error(err)
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">prefixBase64PNG</span>(<span class="hljs-params">base64Str</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">'data:image/png;base64,'</span> + base64Str;
}
}
效果如下：
