分为两种情况进入app需要登录和进入app不需要登录
1,不需要登录
只需在打包配置文件sitemap.json添加配置easyConfig配置
"pages": [
{
"webviewId": "__W2A__xxxx.com",
"matchUrls": [
{"pathname":"http://xxxx.com"} //首页
],
"easyConfig": {
"back":{
"history":true //允许执行history.back
}
}
}
]
关于easyConfig更多配置:https://ask.dcloud.net.cn/article/12750
2,进入app需要登录(或者判断是否需要登录)
这种情况下如果使用1的配置,如果从登录进入首页,在首页后退双击会无法退出,因为从登录页进入首页,最后一层页面为登录页,首页后退会退回登录页,由于已经登录了,所以又会调回首页,导致在首页点击后退按钮页面不停刷新却无法退出;
再次打开app是直接进入index.vue,这时的后退双击是可正常退出app的,因为此时最后一层页面为首页
这种情况下有一种解决办法就是自定义返回按钮事件:
步骤一:
删除掉1中的easyConfig配置,打开vue项目中的public文件夹,新建static文件夹,下载mui.min.js放到里面去,编辑index.html,其中homePage中放置不返回且连续两次返回需要退出的页面hash
<script src="./static/mui.min.js"></script>
<script>
// 一级页面不返回,连续按两次退出,根据项目自行添加homePage 里的值
const homePage = ['#/Authen', '#/','#/Game', '#/InviteLogin']
mui.plusReady(function () {
// 首页返回键处理
// 处理逻辑:1秒内,连续两次按返回键,则退出应用;
var first = null
var webview = plus.webview.currentWebview()
plus.key.addEventListener('backbutton', function () {
//在顶层
if (homePage.indexOf(this.location.hash) !== -1) {
// 首次按键,提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime()
mui.toast('再按一次退出应用')
setTimeout(function () {
first = null
}, 1000)
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit()
}
}
} else {
webview.canBack(function (e) {
if (e.canBack) {
webview.back()
} else {
webview.close() // hide,quit
// plus.runtime.quit()
}
})
}
}, false)
})
</script>
步骤二:
修改vue的路由配置,将登录页设置为默认路由地址,比如上面#/Authen对应的登录页面,则需要配置路由:
...
{
path: '/',
name: 'Authen',
component: Authen
},
{
path: '/Authen',
name: 'Authen',
component: Authen
},
...
3,存在问题
1)尽管2这个方法可以解决登录条件下的返回双击退出问题,但是在双击返回的第一次仍会刷新一次页面
2)此种方法需要将首页设置为登录页,尽管一般会配置已经登录自动跳转,但是登录页还是会闪现一下