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

cordova platforms

進入android目錄下，可以看到很多.java文件，而ios目錄下是很多的object-c文件，browser目錄下則是熟悉的web工程。

并且可以看到，每個平臺下都有一個cordova目錄，我初步猜想，這應該是負責和不同平臺通訊交互的cordova核心。

web端是最直觀最簡單的，直接運行如下命令即可。

cordova run browser

對于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' ????????????????????????е????
?????????????
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，可以通過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是一個基于Apache Ant和Apache Maven概念的項目自動化構建開源工具。

具體安裝過程可以參考gradle環境搭建。

首先我們安裝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調試。再次嘗試，已經可以看到界面了。

cordova app界面

我們來試試調用一些原生API，比如調用原生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

cordova_dialog

接著我們試下調用相機，首先也是安裝插件：

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);

    // 相機拍照成功
    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;
    }
}

效果如下：

cordova_camera