[Cordova] 如何監聽 Android 實體 back 按鈕並離開 App

摘要:[Cordova] 如何監聽 Android 實體 back 按鈕並離開 App

其實這個功能 Google 一下就可以知道了,最近剛好有用到,就順便做個心得紀錄。

不知道 Cordova 是什麼的可以先看一下官方網站:

http://cordova.apache.org/

簡單的說就是利用網頁技術控制手機硬體功能的橋樑。


$(document).on('deviceready', function () {
  $(document).on('backbutton', function () {
    // 按下實體 back 按鈕後要作的事
    ...
  });
});

當 Cordova 載入成功後,會發出 deviceready 事件,這時就可以註冊 backbutton 事件,並在每次點擊實體 back 按鈕時觸發。


$(document).on('deviceready', function () {
  $(document).on('backbutton', function () {
    exitApp();
  });
});

function exitApp() {
  navigator.notification.confirm(
    'Are you sure you want to quit?',
    function (buttonIndex) {
      if (buttonIndex === 1) {
        navigator.app.exitApp();
      }
    },
    'Exit'
  );
}

這邊就實作了 Cordova 另外兩個功能:confirm 與離開 App,也就是跳出一個確認視窗,當使用者按下確定後,才離開 App,取消就不動作。

實際範例如下:

http://jqmdesigner.appspot.com/designer.html#&ref=4878767453372416

須注意的是,因為這個範例無法在網頁上呈現,僅在手機才有效果,因此需點選 Export → Download APK,將範例匯出成 apk 檔,並利用手機掃瞄打包完成後所產生的 QR code,將 App 安裝在手機上即可測試。

Screenshot_2014-06-26-22-38-07.png