最近我在嘗試了解跨平臺(tái)技術(shù)的發(fā)展册踩，首先則是想到了cordova泳姐。本文簡(jiǎn)單記錄下cordova環(huán)境搭建的過(guò)程。
安裝cordova
首先是要npm全局安裝cordova
npm install -g cordova
創(chuàng)建應(yīng)用
安裝的cordova類似于create-react-app這種腳手架暂吉，可以通過(guò)命令行直接創(chuàng)建應(yīng)用
cordova create myapp
添加平臺(tái)支持
cordova可以支持ios, android, web三端胖秒。
cordova platform add ios
cordova platform add android
cordova platform add browser
進(jìn)入android目錄下缎患，可以看到很多.java文件，而ios目錄下是很多的object-c文件阎肝，browser目錄下則是熟悉的web工程挤渔。
并且可以看到，每個(gè)平臺(tái)下都有一個(gè)cordova目錄风题，我初步猜想判导，這應(yīng)該是負(fù)責(zé)和不同平臺(tái)通訊交互的cordova核心。
運(yùn)行App
Web
web端是最直觀最簡(jiǎn)單的沛硅，直接運(yùn)行如下命令即可眼刃。
cordova run browser
Android
對(duì)于Android和IOS，我們則需要先檢查相關(guān)環(huán)境是否安裝正常摇肌。
$ 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' ????????????????????????е????
?????????????
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
可以看到擂红，我的電腦環(huán)境并不滿足android和ios平臺(tái)的要求。
首先我們來(lái)滿足下android平臺(tái)的環(huán)境要求朦蕴。
JDK
首先是JDK篮条，可以通過(guò)java和javac命令來(lái)檢查下。
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)
如果沒(méi)安裝吩抓，可以參考jdk下載與安裝簡(jiǎn)明教程涉茧。
Gradle
Gradle是一個(gè)基于Apache Ant和Apache Maven概念的項(xiàng)目自動(dòng)化構(gòu)建開(kāi)源工具。
具體安裝過(guò)程可以參考gradle環(huán)境搭建疹娶。
Android SDK
首先我們安裝Android Studio伴栓。根據(jù)安裝指引，我們會(huì)安裝好Android SDK雨饺。
在此安裝過(guò)程中钳垮，遇到了一個(gè)報(bào)錯(cuò)：
Android SDK Tools, SDK Patch Applier v4 and 5 more SDK components were not installed
感謝這位大佬提供的解決方案，迅速解決了問(wèn)題额港，這里順便記下SDK的安裝目錄饺窿。
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk
接著我們需要在環(huán)境變量-系統(tǒng)變量-Path中新增兩項(xiàng)：
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\platform-tools
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools
并且新增一項(xiàng)系統(tǒng)變量ANDROID_HOME，變量值為：
C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk
試運(yùn)行命令cordova run android移斩，出現(xiàn)了如下警告
$ 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)
于是我又新增了一項(xiàng)系統(tǒng)變量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.
上網(wǎng)一查肠套，原來(lái)是沒(méi)有同意相關(guān)協(xié)議。我們來(lái)到C:\Users\Jiang.Wenbin\AppData\Local\Android\Sdk\tools\bin目錄下運(yùn)行命令行猖任，輸入sdkmanager --licenses你稚，然后就會(huì)彈出一堆協(xié)議，沒(méi)辦法，無(wú)腦輸入y同意吧刁赖。
再次運(yùn)行cordova run android搁痛，發(fā)現(xiàn)了新的報(bào)錯(cuò)信息：
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
可以看到，是沒(méi)有找到設(shè)備的原因宇弛。需要將手機(jī)連接到PC落追，并且打開(kāi)開(kāi)發(fā)者選項(xiàng)，允許USB調(diào)試涯肩。再次嘗試轿钠，已經(jīng)可以看到界面了。
Plugins
我們來(lái)試試調(diào)用一些原生API病苗，比如調(diào)用原生Dialog疗垛， 調(diào)用相機(jī)等。我們先試下Dialog硫朦。
Dialog
首先需要插件：
cordova plugin add cordova-plugin-dialogs
接著我們?cè)?code>deviceready事件之后調(diào)用Dialog
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
navigator.notification.alert(
'歡迎歡迎!', // message
alertDismissed, // callback
'試下Dialog', // title
'好的' // buttonName
);
}
function alertDismissed() {
// 點(diǎn)擊按鈕后的回調(diào)
}
調(diào)試后發(fā)現(xiàn)彈出的中文亂碼了贷腕，需要在index.html加個(gè)meta
<meta charset="UTF-8">
Camera
接著我們?cè)囅抡{(diào)用相機(jī)，首先也是安裝插件：
cordova plugin add cordova-plugin-camera
嘗試調(diào)用相機(jī)拍照咬展，并將得到的照片通過(guò)img元素顯示出來(lái)：
// Application Constructor
initialize: function() {
const _this = this;
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
// 點(diǎn)擊按鈕打開(kāi)相機(jī)
document.querySelector('#btnOpenCamera').addEventListener('click', function() {
_this.openCamera()
})
},
openCamera: function() {
const cameraOptions = {
// 默認(rèn)輸出格式為base64
destinationType: Camera.DestinationType.DATA_URL,
// 輸出png格式
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
// 相機(jī)拍照成功
function cameraSuccess(base64Str) {
console.log(base64Str)
// 給圖片元素賦值src
document.querySelector('#captureImg').src = prefixBase64PNG(base64Str)
}
function cameraError(err) {
console.error(err)
}
function prefixBase64PNG(base64Str) {
return 'data:image/png;base64,' + base64Str;
}
}
效果如下：
IOS
還沒(méi)錢買IOS設(shè)備泽裳，尷尬。破婆。涮总。
掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章祷舀！
