進擊的網頁前端技術！

其實這個功能 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 安裝在手機上即可測試。