Cordova | hoyo 學習紀錄

—

現況：棄坑

沒有背景服務，所以 APP 關閉就結束執行。FCM 推播無法顯示訊息，官方推薦 cordova-plugin-local-notifications 早就沒有維護無法使用

—

Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please include gradlein your path, or install Android Studio

>cordova run android --device
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\DAE User 201909\AppData\Local\Android\sdk (DEPRECATED)
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

>cordova run android --device

Checking Java JDK and Android SDK versions

ANDROID_SDK_ROOT=undefined (recommended setting)

ANDROID_HOME=C:\Users\DAE User 201909\AppData\Local\Android\sdk (DEPRECATED)

Could not find an installed version of Gradle either in Android Studio,

or on your system to install the gradle wrapper. Please include gradle

in your path, or install Android Studio

下載 gradle (Gradle | Installation)
解壓到 C:\Gradle
將 C:\Gradle\gradle-6.5.1\bin 新增到 PATH 環境變數內

—

什麼樣的開發環境？

因為是 Cordova 所以 Android 可以忽略 Android Studio IDE 以及 AVD ，因為要直接連手機測試

但是 IOS 就沒有省略 Xcode 的方式，因為 Mac 的硬體效能較佳，不像 PC 的差異

—

安裝、設定

設置Cordova Android編譯環境
install gradle for using in cordova build android
Direct Download Android SDK Tools / Manager (這裡有 25.2.5 的較新下載路徑)

步驟

建立 c:\bin\android 目錄，此目錄就是後續所有 Android 編譯所需用到程式存放位置
下載 25.2.3 Android SDK，下載最新版 (26.1.1) 不適用因為沒有圖形介面，後續操作不易
將 tools_r253.2.3-windows.zip 解壓縮到 c:\bin\android
設定環境變數 PATH
1. 建立 ANDROID_HOME 變數路徑到 c:\bin\android
2. 增加 tools 目錄到 PATH
3. 增加 tools\bin 目錄到 PATH
打開命令提示字元運行 >android sdk 安裝
1. Android SDK Tools
2. Android SDK Platform-tools
3. Android SDK Build-tools
4. Google USB Driver
下載 gradle Gradle | Releases
解壓縮 gradle-4.9-bin.zip 到 ANDROID_HOME 並改名為 gradle
增加 gradle\bin 目錄到 PATH

—

安裝 Cordova 以及實機測試

Apache Cordova

將手機切換到開發者模式之後，開啟 USB 偵錯，連上電腦後就可以開始安裝 Cordova 以及測試了

>npm install -g cordova
>cordova create MyApp
>cd MyApp
>cordova platform add android
>cordova run android --device

>npm install -g cordova

>cordova create MyApp

>cd MyApp

>cordova platform add android

>cordova run android --device

—

‘cordova’ 不是內部或外部命令、可執行的程式或批次檔

cordova不是内部或外部命令的解决方案

編輯 PATH 環境變數，增加 C:\Users\user name\AppData\Roaming\npm 路徑即可

—

No usable Android build tools found. Highest 30.x installed version is 30.0.2; minimum version required is 30.0.3.

Ionic Cordova Android: No usable Android build tools found. Highest 30.x installed version is 30.0.2; minimum version required is 30.0.3

—

1,292 total views, 1 views today

—

安裝 plugin

cordova plugin add cordova-plugin-dialogs

1	cordova plugin add cordova-plugin-dialogs

HTML

<script>
    var page = 1; // 從第一頁開始
</script>

<div class="container">
    <div class="page" id="page1">
        <div id="UUID"></div>

        <hr>
        <button type="button" onclick="changePage(2)">page2</button>
    </div>
    <div class="page" id="page2" style="display: none;">

        <button type="button" onclick="changePage(page-1)">返回</button>
        <hr>

        <h2>Page2</h2>

    </div>
</div>

<!-- 原生支援功能必須載入 cordova.js -->
<script src="cordova.js"></script>

var page = 1; // 從第一頁開始

</script>

<hr>

</div>

<hr>

</div>

JavaScript

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

    $(document).on('backbutton', function () {

        // 如果不是在第一頁就切換頁面
        if ( page >1 ){
            changePage(page -1);
        }
        // 第一頁就顯示離開提示以及動作
        else {

            navigator.notification.confirm(
                'Are you sure you want to quit?',
                function (buttonIndex) {
                    if (buttonIndex === 1) {
                        navigator.app.exitApp();
                    }
                },
                '離開！？',
                ['是', '否']
            );
        }
    });

}

// 切換頁面
function changePage(p){

    page = p;

    $('.page').hide();
    $('#page'+p).show();

}

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

$(document).on('backbutton', function () {

// 如果不是在第一頁就切換頁面

if ( page >1 ){

changePage(page -1);

}

// 第一頁就顯示離開提示以及動作

else {

navigator.notification.confirm(

'Are you sure you want to quit?',

function (buttonIndex) {

if (buttonIndex === 1) {

navigator.app.exitApp();

}

'離開！？',

['是', '否']

);

}

});

}

// 切換頁面

function changePage(p){

page = p;

$('.page').hide();

$('#page'+p).show();

}

—

681 total views

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Category Archives: Cordova

Cordova – 建立開發環境