Cordova在android物理返回按键的处理

最近Cordova项目开发的时候遇到一个问题。android端的App在跳到淘宝页领取优惠券的时候，按物理按键返回来的时候多返回一页。如：我在跳转之前是‘商品详情页’，但是在其他App按物理按键返回来的时候返回的是‘商品详情页’的上一页。针对这个问题自己花了一段时间研究cordova的生命周期和物理按键监听函数,在这里记录一下问题的解决方法。

未修复前

Cordova 的生命周期函数和物理按键的执行顺序

pause(进入后台) ==> resume(后台返回) ==> backbutton(物理按键)

实现思路

进入后台+注册禁止Cordova物理按键函数==>后台返回+注销禁止Cordova物理按键函数+注册恢复Cordova物理按键函数。

function init () {
  /*
    页面加载后添加Cordva生命周期事件监听
    */
  document.addEventListener('deviceready', onDeviceReady, false)
  document.addEventListener('pause', onPause, false)
  document.addEventListener('resume', onResume, false)
}

function onPause(){
  console.log('===进入后台===')
  //添加监听
  document.addEventListener('backbutton', appPause, false)
  //移除监听
  document.removeEventListener('backbutton', pageBack, false)
}

function onResume(){
  console.log('===恢复到前台===')
  // 恢复到前台cordova的物理按键0毫秒恢复
  setTimeout(() => {
    document.addEventListener('backbutton', pageBack, false)
    document.removeEventListener('backbutton', appPause, false)
  }, 0)
}
//禁止cordova物理按键后返回上页
function appPause (event) {
  event.preventDefault()
}
//按物理按键返回上页
function pageBack (event) {
  window.history.back()
}

上面onResume函数中有一个0秒的异步延迟函数，其原因是因为App重新返回到前台会先调用onResume函数，该函数中有注册返回上一页的按键监听函数，如果不将注册放在函数序列最后将会导致onResume函数执行完毕，在执行backbutton物理按键监听函数的时候执行的是刚刚注册的返回上页的物理按键监听函数。

修复后