美文网首页
解决hbuilder打包vue项目app点击手机返回键直接退出a

解决hbuilder打包vue项目app点击手机返回键直接退出a

作者: Thesand | 来源:发表于2020-08-06 13:49 被阅读0次

通过hbuilder将做了一部分的vue项目进行打包成app测试,发现打包成的app点击手机的返回键的时候直接退出了app,并不会返回上一页
于是去网上查了一下终于解决了这个问题
mui.js解决参考博客链接:https://blog.csdn.net/qq_25252769/article/details/76913083

首先我们新建一个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
        )
      }
    })
  })
})

然后在入口文件main.js中导入

import './utils/appback.js'

参考

https://blog.csdn.net/xuefeng11111/article/details/86501992?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

相关文章

网友评论

      本文标题:解决hbuilder打包vue项目app点击手机返回键直接退出a

      本文链接:https://www.haomeiwen.com/subject/mdvzrktx.html