cordova開發環境搭建

最近我在嘗試瞭解跨平臺技術的發展,首先則是想到了cordova。本文簡單記錄下cordova環境搭建的過程。javascript

安裝cordova

首先是要npm全局安裝cordovahtml

npm install -g cordova
複製代碼

建立應用

安裝的cordova相似於create-react-app這種腳手架,能夠經過命令行直接建立應用java

cordova create myapp
複製代碼

添加平臺支持

cordova能夠支持ios, android, web三端。react

cordova platform add ios
cordova platform add android
cordova platform add browser
複製代碼

cordova platforms

進入android目錄下,能夠看到不少.java文件,而ios目錄下是不少的object-c文件,browser目錄下則是熟悉的web工程。android

而且能夠看到,每一個平臺下都有一個cordova目錄,我初步猜測,這應該是負責和不一樣平臺通信交互的cordova核心。ios

運行App

Web

web端是最直觀最簡單的,直接運行以下命令便可。web

cordova run browser
複製代碼

Android

對於AndroidIOS,咱們則須要先檢查相關環境是否安裝正常。shell

$ 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
複製代碼

能夠看到,個人電腦環境並不知足androidios平臺的要求。npm

首先咱們來知足下android平臺的環境要求。小程序

JDK

首先是JDK,能夠經過javajavac命令來檢查下。

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調試。再次嘗試,已經能夠看到界面了。

cordova app界面

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">

複製代碼

cordova_dialog

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

複製代碼

效果以下:

cordova_camera

IOS

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


首發連接


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

Tusi博客