vue-cli3打包app物理按键失效的问题[已解决]

项目采用vue-cli3打包成app后,手机测试物理按键失效.

经过百度查询相关资料

最终实现的效果就是按返回键退回上一页，当退回到栈的第一页之后再按返回键才退出页面

首先在新建一个js文件,我的路径是.srcutilsack.js

/* eslint-disable no-undef */
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)

document.addEventListener('plusready', function () {
  var webview = plus.webview.currentWebview()
  var first = null
// plus会报错,因为普通浏览器里没有plus环境，
// 只有HBuilder真机运行、打包后、或流应用环境下才能运行plus api。
// 这里使用注释忽略报错信息 


  plus.key.addEventListener('backbutton', function () {
    webview.canBack(function (e) {
      if (e.canBack) {
        webview.back(-1)
      } else {
        // 首页返回键处理
        // 处理逻辑：3秒内，连续两次按返回键，则退出应用；

        // 首次按键，提示‘再按一次退出应用’
        if (new Date().getTime() - first < 3000) {
          // console.log("关闭程序")
          plus.runtime.quit()
        } else {
          // 自定义的弹窗 （引入的vant.js 的toast）

          Toast({
            message: '再按一次退出应用',
            position: 'bottom'
          })
          first = new Date().getTime()
        }
      }
    })
  })
})

然后在公共的main.js中引入这个js文件：

import Back from './utils/back'

Vue.config.productionTip = true

new Vue({
  router,
  store,
  Back,
  render: h => h(App)
}).$mount('#app')

然后打包后使用hbuild真机测试, 结果没问题

参考文章:

原文地址：https://www.cnblogs.com/yad123/p/12700939.html

vue-cli3打包app物理按键失效的问题[已解决]

1.vue 移动端物理返回键

2.vue cli 2.X APP 物理返回键问题处理

3.plus初始化原理及plus is not defined，mui is not defined 错误汇总

4.vue+hbuilder 打包成移动app