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

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

经过百度查询相关资料

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

首先在新建一个js文件,我的路径是.\src\utils\back.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真机测试, 结果没问题

 

 

 

参考文章:

1.vue 移动端物理返回键

https://blog.csdn.net/qq_43052274/article/details/91956769?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1

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

https://www.jianshu.com/p/0a9111ff882e

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

https://ask.dcloud.net.cn/article/165

4.vue+hbuilder 打包成移动app

https://www.cnblogs.com/liujun1128/p/11426077.html

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

上一篇:Android Dom和XmlPullParse解析XML文件


下一篇:关于iOS11中UILabel的问题