Vue单页面应用打包app处理返回按钮
情况
- 顶部返回,在header.vue公用组件中使用
this.$router.go(-1) - 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不做操作;
- iOS:还未处理
预期
在一个公用js文件中使用编写一个函数(phoneOperate(isTopPage)):让app在点击手机返回按钮的时候默认返回上级,在一级页面单独处理让用户在点击的时候做提示.
phoneOperate(isTopPage){
let that = this
isTopPage = isTopPage || false;
if(isTopPage){
that.$confirm('是否要退出app','操作提示')
.then((){ plus.runtime.quit()})
.catch((){return;})
} else {
that.$router.go(-1);
}
}
情况1
- 在
app.vue组件中调用phoneOperate(isTopPage)实现所有页面点击手机返回键,返回上级页面
结果
app.vue组件在最开始初始化一次;之后加载一级页面的.vue组件时,是不会再次渲染的,因此所有的页面(包括一级页面)都只是会执行首次进入app时的条件.而在一级页面改写过返回按钮后进入非一级页面,因为没有对所有非一级页面改写返回按钮,所有页面都将继续执行一级页面的逻辑.
情况2
因为app.vue中调用所有所有其他.vue组件,即其他所有组件都是app.vue组件的子组件.能不能利用父子组件传值改变全局变量(isTopPage)的值
结果2
大概是入口组件的特殊性 app.vue组件中的
情况3
不知道具体有什么简单的办法,那就使用体力劳动了:每一页面都去执行一个函数,让他们都去覆写一遍点击返回按钮的函数.泪奔┭┮﹏┭┮,想哭的心,像玻璃碎片...............
phone.js
import {
Indicator,
Toast
} from 'mint-ui'
let o = {
stopBack() {
let that = this;
plus.key.removeEventListener('backbutton',function(){});
plus.key.addEventListener("backbutton", function() {
Indicator.close();
that.$confirm('确定要退出程序吗？','操作提醒',{
confirmButtonText: '退出',
cancelButtonText: '取消'
}).then(() => {
plus.runtime.quit()
}).catch(() => {
return
})
}, false)
},
back(beforeBack) { // 点击手机`返回`按钮,非主页面返回上级;如果有返回前处理执行,如果前处理没有返回,或返回!true不再执行返回事件
plus.key.removeEventListener('backbutton',function(){});
plus.key.addEventListener("backbutton", function() {
let cross = false;
Indicator.close();
if(beforeBack){
cross = beforeBack()
}
if(cross){
history.go(-1);
}
}, false)
}
}
window.phone = o;
export default o;
一级页面执行如下代码
import phone './phone.js'
...
created: function() {
let that = this;
document.addEventListener('plusready',function(){
phone.stopBack.call(that);
})
}
非一级页面执行如下代码
import phone './phone.js'
...
created: function() {
document.addEventListener('plusready',function(){
phone.back;
})
}
结果3(只会执行一次)
在登录页面加载完成后,会执行phone.stopBack.call(that),但是在切换到别的页面后,不会再执行非一级页面组件中的
created: function() {
document.addEventListener('plusready',function(){
phone.back;
})
}
最终状态
在将phone.js改写,将其中的phone对象添加到Vue对象的原型上,能够在所有组件中直接调用phone对象.
phone.js
import Vue from 'vue'
import {
Indicator,
Toast
} from 'mint-ui'
let o = {
stopBack() {
let that = this;
plus.key.removeEventListener('backbutton',function(){});
plus.key.addEventListener("backbutton", function() {
Indicator.close();
that.$confirm('确定要退出程序吗？','操作提醒',{
confirmButtonText: '退出',
cancelButtonText: '取消'
}).then(() => {
plus.runtime.quit()
}).catch(() => {
return
})
}, false)
},
back(beforeBack) { // 点击手机`返回`按钮,非主页面返回上级;如果有返回前处理执行,如果前处理没有返回,或返回!true不再执行返回事件
plus.key.removeEventListener('backbutton',function(){});
plus.key.addEventListener("backbutton", function() {
let cross = false;
Indicator.close();
if(beforeBack){
cross = beforeBack()
if(cross){
history.go(-1);
}
}else{
history.go(-1);
}
}, false)
}
}
window.phone = o; // 挂载到window上
Vue.prototype.phone = o;
export default o;
组件中的处理
在入口组件(非app.vue,本例为login.vue)中.
created: function() {
let that = this;
document.addEventListener('plusready',function(){ // 这里必须得鉴定plusready事件,否则会提示plus没有定义
phone.stopBack.call(that); // 点击手机`返回`按钮
})
}
在首页/我的/聊天这几个和二级页面有关联的一级页面中的处理
/*created*/mounted: function() { // 这里必须用mounted,是因为页面1关闭和页面2打开的节点是:页面2先created,页面1再destroyed,接着页面1mounted
let that = this;
// document.addEventListener('plusready',function(){
// phone.stopBack.call(that);
// })
// 上面注释掉的代码会因为无法监听到`plusready`事件而不能够重写手机的`backButton`事件
phone.stopBack.call(that); // 点击手机`返回`按钮
},
destroyed(){
phone.back()
}
注意:本例中login->项目选择->首页的模式下,login和项目选择组件中是不需要在组件摧毁的时候覆写backButton的,因为首页也是一级页面需要提示.但是和首页平行的几个页面(聊天/我的)需要再组件摧毁的时候单独处理成默认的返回上级,这是因为它们往往会直接进入二级页面,而在二级页面中需要点击返回按钮返回上级的操作.
