解决Hbuilder X打包app之后点击手机返回键直接退出app问题

第一步，创建back.js文件

内容为：

/**
 * 解决Hbuilder X打包app之后点击手机返回键直接退出app的
 */
import {Toast} from 'vant';

document.addEventListener('plusready', function () {
    const 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秒内，连续两次按返回键，则退出应用；
                let first = null
                plus.key.addEventListener(
                    'backbutton',
                    function () {
                        // 首次按键，提示‘再按一次退出应用’
                        if (!first) {
                            first = new Date().getTime()
                            Toast('再按一次退出应用') // 此处可以用自定义提示
                            setTimeout(function () {
                                first = null
                            }, 1000)
                        } else {
                            if (new Date().getTime() - first < 1500) {
                                plus.runtime.quit()
                            }
                        }
                    },
                    false
                )
            }
        })
    })
})

第二步，main.js中引入back.js

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import App from './App'
import store from './store'
import router from './router'
// 引入back.js防止手机返回键直接退出
import '@/utils/back'

这样就生效了！！！

【腾讯云】云产品限时秒杀，爆款2核4G云服务器首年74元

推荐阅读

1、发现一个超好用的文本编辑器！！！

2、SpringBoot + Vue 在线笔记

3、若依框架配置文件数据源配置加密

4、SpringBoot + Vue 请求加密（采用国密算法）

5、记录一下vue打包成app（Hbuilder X）

关注公众号