webApp点击手机返回键直接退出app的解决

  1. 新建一个appback.js文件,名字随便起,然后将下面的内容复制进去
/**
 * 解决hbuilder打包app之后点击手机返回键直接退出app的
 */
document.addEventListener('plusready', function () {
  var webview = plus.webview.currentWebview()
  plus.key.addEventListener('backbutton', function () {
    webview.canBack(function (e) {
      if (e.canBack) {
        webview.back()
      } else {
        // webview.close() //hide,quit
        // plus.runtime.quit()
        // 首页返回键处理
        // 处理逻辑:1秒内,连续两次按返回键,则退出应用;
        var first = null
        plus.key.addEventListener(
          'backbutton',
          function () {
            // 首次按键,提示‘再按一次退出应用’
            if (!first) {
              first = new Date().getTime()
              console.log('再按一次退出应用') // 此处可以用自定义提示
              setTimeout(function () {
                first = null
              }, 1000)
            } else {
              if (new Date().getTime() - first < 1500) {
                plus.runtime.quit()
              }
            }
          },
          false
        )
      }
    })
  })
})
  1. 然后在main.js中将该文件引入进去即可
import './utils/appback.js'
注意:
  1. 最最最重要的是 vue-router 路由的配置:要分清楚 router.push 和 router.replace 的区别。

vue 路由栈还有记录的话,它会一直一直,重复重复的返回,直到路由栈没有记录。

  1. router.push:会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL
  2. router.replace:不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

参考:
vue-router
参考链接:https://blog.csdn.net/qq_25252769/article/details/76913083

你可能感兴趣的:(webApp点击手机返回键直接退出app的解决)