vue h5通过hbuilder打包为App的返回键兼容问题

最新推荐文章于 2024-01-08 21:50:41 发布

抓一把鸭

最新推荐文章于 2024-01-08 21:50:41 发布

阅读量524

点赞数 2

文章标签： html5 javascript ajax vue.js html

本文链接：https://blog.csdn.net/weixin_49698648/article/details/125543817

版权

之前项目开发用的vue写的h5，通过hbuilder打包成安卓后，发现手机返回键按一次直接退出应用到桌面了，下面的代码片段直接复用到项目源码的index.html就ok!

document.addEventListener('plusready', function () {

var first = null;

var webview = plus.webview.currentWebview();

plus.key.addEventListener('backbutton', function () {

webview.canBack(function (e) {

if (e.canBack) {

webview.back(); //这里不建议修改自己跳转的路径

} else {

//首次按键，提示‘再按一次退出应用’

if (!first) {

first = new Date().getTime(); //获取第一次点击的时间戳

// console.log('再按一次退出应用');//用自定义toast提示最好

// toast('双击返回键退出应用'); //调用自己写的吐丝提示函数

plus.nativeUI.toast("再按一次退出应用", {

duration: 'short'

}); //通过H5+ API 调用Android 上的toast 提示框

setTimeout(function () {

first = null;

}, 1000);

} else {

if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差小于 1000ms 说明1s点击了两次,

plus.runtime.quit(); //退出应用

}

})

});

<script>
    document.addEventListener('plusready', function () {
      var first = null;
      var webview = plus.webview.currentWebview();
      plus.key.addEventListener('backbutton', function () {
        webview.canBack(function (e) {
          if (e.canBack) {
            webview.back(); //这里不建议修改自己跳转的路径  
          } else {
            //首次按键，提示‘再按一次退出应用’  
            if (!first) {
              first = new Date().getTime(); //获取第一次点击的时间戳  
              // console.log('再按一次退出应用');//用自定义toast提示最好  
              // toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数  
              plus.nativeUI.toast("再按一次退出应用", {
                duration: 'short'
              }); //通过H5+ API 调用Android 上的toast 提示框  
              setTimeout(function () {
                first = null;
              }, 1000);
            } else {
              if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,  
                plus.runtime.quit(); //退出应用  
              }
            }
          }
        })
      });
    });
  </script>