情况

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

巴特西

Vue单页面应用打包app处理返回按钮

情况

预期

情况1

结果

情况2

结果2

情况3

phone.js

一级页面执行如下代码

非一级页面执行如下代码

结果3(只会执行一次)

最终状态

最新文章

热门文章