cordova開發環境搭建

最近我在嘗試瞭解跨平臺技術的發展，首先則是想到了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 browser

Android

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

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

還沒錢買IOS設備，尷尬。。。

---

首發連接

---

掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章！