cordova開發環境搭建

                小編:管理員 107閱讀 2022.09.13

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

                運行AppWeb

                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' ????????????????????????е????
                ?????????????
                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調試。再次嘗試,已經可以看到界面了。

                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

                關聯標簽:
                喵视频,国偷自产一区二视频观看,国产三级视频在线观看,国产精品免费久久久久电影,老师你下面太紧了拔不出来,国产成人亚洲欧美综合无码,亚洲日本VA中文字幕久久