项目采用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 移动端物理返回键
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