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

1. 在app.vue组件中调用phoneOperate(isTopPage)实现所有页面点击手机返回键,返回上级页面

结果

app.vue组件在最开始初始化一次;之后加载一级页面的.vue组件时,是不会再次渲染的,因此所有的页面(包括一级页面)都只是会执行首次进入app时的条件.而在一级页面改写过返回按钮后进入非一级页面,因为没有对所有非一级页面改写返回按钮,所有页面都将继续执行一级页面的逻辑.

情况2

因为app.vue中调用所有所有其他.vue组件,即其他所有组件都是app.vue组件的子组件.能不能利用父子组件传值改变全局变量(isTopPage)的值

结果2

大概是入口组件的特殊性 app.vue组件中的组件不能够识别到app.vue中的处理函数.so,无用功..........................

情况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的,因为首页也是一级页面需要提示.但是和首页平行的几个页面(聊天/我的)需要再组件摧毁的时候单独处理成默认的返回上级,这是因为它们往往会直接进入二级页面,而在二级页面中需要点击返回按钮返回上级的操作.