情况

  • 顶部返回,在header.vue公用组件中使用 this.$router.go(-1)
  • 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不做操作;
  • iOS:还未处理

预期

在一个公用js文件中使用编写一个函数(phoneOperate(isTopPage)):让app在点击手机返回按钮的时候默认返回上级,在一级页面单独处理让用户在点击的时候做提示.

  1. phoneOperate(isTopPage){
  2. let that = this
  3. isTopPage = isTopPage || false;
  4. if(isTopPage){
  5. that.$confirm('是否要退出app','操作提示')
  6. .then((){ plus.runtime.quit()})
  7. .catch((){return;})
  8. } else {
  9. that.$router.go(-1);
  10. }
  11. }

情况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

  1. import {
  2. Indicator,
  3. Toast
  4. } from 'mint-ui'
  5. let o = {
  6. stopBack() {
  7. let that = this;
  8. plus.key.removeEventListener('backbutton',function(){});
  9. plus.key.addEventListener("backbutton", function() {
  10. Indicator.close();
  11. that.$confirm('确定要退出程序吗?','操作提醒',{
  12. confirmButtonText: '退出',
  13. cancelButtonText: '取消'
  14. }).then(() => {
  15. plus.runtime.quit()
  16. }).catch(() => {
  17. return
  18. })
  19. }, false)
  20. },
  21. back(beforeBack) { // 点击手机`返回`按钮,非主页面返回上级;如果有返回前处理执行,如果前处理没有返回,或返回!true不再执行返回事件
  22. plus.key.removeEventListener('backbutton',function(){});
  23. plus.key.addEventListener("backbutton", function() {
  24. let cross = false;
  25. Indicator.close();
  26. if(beforeBack){
  27. cross = beforeBack()
  28. }
  29. if(cross){
  30. history.go(-1);
  31. }
  32. }, false)
  33. }
  34. }
  35. window.phone = o;
  36. export default o;

一级页面执行如下代码

  1. import phone './phone.js'
  2. ...
  3. created: function() {
  4. let that = this;
  5. document.addEventListener('plusready',function(){
  6. phone.stopBack.call(that);
  7. })
  8. }

非一级页面执行如下代码

  1. import phone './phone.js'
  2. ...
  3. created: function() {
  4. document.addEventListener('plusready',function(){
  5. phone.back;
  6. })
  7. }

结果3(只会执行一次)

在登录页面加载完成后,会执行phone.stopBack.call(that),但是在切换到别的页面后,不会再执行非一级页面组件中的

  1. created: function() {
  2. document.addEventListener('plusready',function(){
  3. phone.back;
  4. })
  5. }

最终状态

在将phone.js改写,将其中的phone对象添加到Vue对象的原型上,能够在所有组件中直接调用phone对象.

phone.js

  1. import Vue from 'vue'
  2. import {
  3. Indicator,
  4. Toast
  5. } from 'mint-ui'
  6. let o = {
  7. stopBack() {
  8. let that = this;
  9. plus.key.removeEventListener('backbutton',function(){});
  10. plus.key.addEventListener("backbutton", function() {
  11. Indicator.close();
  12. that.$confirm('确定要退出程序吗?','操作提醒',{
  13. confirmButtonText: '退出',
  14. cancelButtonText: '取消'
  15. }).then(() => {
  16. plus.runtime.quit()
  17. }).catch(() => {
  18. return
  19. })
  20. }, false)
  21. },
  22. back(beforeBack) { // 点击手机`返回`按钮,非主页面返回上级;如果有返回前处理执行,如果前处理没有返回,或返回!true不再执行返回事件
  23. plus.key.removeEventListener('backbutton',function(){});
  24. plus.key.addEventListener("backbutton", function() {
  25. let cross = false;
  26. Indicator.close();
  27. if(beforeBack){
  28. cross = beforeBack()
  29. if(cross){
  30. history.go(-1);
  31. }
  32. }else{
  33. history.go(-1);
  34. }
  35. }, false)
  36. }
  37. }
  38. window.phone = o; // 挂载到window上
  39. Vue.prototype.phone = o;
  40. export default o;

组件中的处理

在入口组件(非app.vue,本例为login.vue)中.

  1. created: function() {
  2. let that = this;
  3. document.addEventListener('plusready',function(){ // 这里必须得鉴定plusready事件,否则会提示plus没有定义
  4. phone.stopBack.call(that); // 点击手机`返回`按钮
  5. })
  6. }

在首页/我的/聊天这几个和二级页面有关联的一级页面中的处理


  1. /*created*/mounted: function() { // 这里必须用mounted,是因为页面1关闭和页面2打开的节点是:页面2先created,页面1再destroyed,接着页面1mounted
  2. let that = this;
  3. // document.addEventListener('plusready',function(){
  4. // phone.stopBack.call(that);
  5. // })
  6. // 上面注释掉的代码会因为无法监听到`plusready`事件而不能够重写手机的`backButton`事件
  7. phone.stopBack.call(that); // 点击手机`返回`按钮
  8. },
  9. destroyed(){
  10. phone.back()
  11. }

注意:本例中login->项目选择->首页的模式下,login和项目选择组件中是不需要在组件摧毁的时候覆写backButton的,因为首页也是一级页面需要提示.但是和首页平行的几个页面(聊天/我的)需要再组件摧毁的时候单独处理成默认的返回上级,这是因为它们往往会直接进入二级页面,而在二级页面中需要点击返回按钮返回上级的操作.

Vue单页面应用打包app处理返回按钮的更多相关文章

  1. vue单页面应用打包后相对路径、绝对路径相关问题

    原文链接:  vue单页面应用打包后相对路径.绝对路径相关问题展开       在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...

  2. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  3. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  4. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  5. 关于处理移动端Vue单页面及其内嵌兼容问题

    关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...

  6. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  7. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  8. Vue 单页面应用 SEO SPA single page application advantages and disadvantages

    处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...

  9. 在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...

随机推荐

  1. JenKins结合cppcheck及cpplint进行代码风格及静态代码检测

    JenKins结合cppcheck及cpplint 最近公司需要在Jenkins上安装cppcheck及cpplint进行代码风格及静态代码检测,这里记录下过程. 前提条件 安装了Jenkins 步骤 ...

  2. PHP 修改数组中的值

    PHP 修改数组中的值 ①.二维数组可以通过 for($i = 0; $i < count(Array()); ++ $i) 这种形式修改 实例代码: // 修改 二维数组中的 name为 Ge ...

  3. nyoj 276-比较字母大小 (顺序比较, 逆序输出)

    276-比较字母大小 内存限制:64MB 时间限制:3000ms 特判: No 通过数:13 提交数:15 难度:1 题目描述: 任意给出两个英文字母,比较它们的大小,规定26个英文字母A,B,C.. ...

  4. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  5. 20191010-7 alpha week 1/2 Scrum立会报告+燃尽图 05

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8750 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩 ...

  6. 小程序取消IOS虚拟支付解决方案

    前因 本来我们的小程序用的好好的,结果突然有一天,微信就把小程序的ios端的虚拟支付给关了...坑爹啊!搞的安卓端的可以支付,ios的支付不了.于是就在网上找解决办法. 一说通过app跳转支付,总不能 ...

  7. linux basic

    一:date 语法: 打印日期:date [OPTION].....  [+FORMAT] 设定日期:date [MMDDhhmm] [[cc][YY][.ss] 创建带实时日期的文件 touch $ ...

  8. python与redis交互及redis基本使用

    Redis简介 Redis是一使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日个开源的志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工 ...

  9. Apache和PHP结合、Apache默认虚拟主机

    5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...

  10. 前端工具-定制ESLint 插件以及了解ESLint的运行原理

    这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule,用以帮助我们更深入的理解ESLint的运行原理,并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则. 插 ...