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组件中的组件不能够识别到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处理返回按钮的更多相关文章
- vue单页面应用打包后相对路径、绝对路径相关问题
原文链接: vue单页面应用打包后相对路径.绝对路径相关问题展开 在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 关于处理移动端Vue单页面及其内嵌兼容问题
关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- Vue 单页面应用 SEO SPA single page application advantages and disadvantages
处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...
- 在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...
随机推荐
- JenKins结合cppcheck及cpplint进行代码风格及静态代码检测
JenKins结合cppcheck及cpplint 最近公司需要在Jenkins上安装cppcheck及cpplint进行代码风格及静态代码检测,这里记录下过程. 前提条件 安装了Jenkins 步骤 ...
- PHP 修改数组中的值
PHP 修改数组中的值 ①.二维数组可以通过 for($i = 0; $i < count(Array()); ++ $i) 这种形式修改 实例代码: // 修改 二维数组中的 name为 Ge ...
- nyoj 276-比较字母大小 (顺序比较, 逆序输出)
276-比较字母大小 内存限制:64MB 时间限制:3000ms 特判: No 通过数:13 提交数:15 难度:1 题目描述: 任意给出两个英文字母,比较它们的大小,规定26个英文字母A,B,C.. ...
- HTML的footer置于页面最底部
vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...
- 20191010-7 alpha week 1/2 Scrum立会报告+燃尽图 05
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8750 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩 ...
- 小程序取消IOS虚拟支付解决方案
前因 本来我们的小程序用的好好的,结果突然有一天,微信就把小程序的ios端的虚拟支付给关了...坑爹啊!搞的安卓端的可以支付,ios的支付不了.于是就在网上找解决办法. 一说通过app跳转支付,总不能 ...
- linux basic
一:date 语法: 打印日期:date [OPTION]..... [+FORMAT] 设定日期:date [MMDDhhmm] [[cc][YY][.ss] 创建带实时日期的文件 touch $ ...
- python与redis交互及redis基本使用
Redis简介 Redis是一使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日个开源的志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工 ...
- Apache和PHP结合、Apache默认虚拟主机
5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...
- 前端工具-定制ESLint 插件以及了解ESLint的运行原理
这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule,用以帮助我们更深入的理解ESLint的运行原理,并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则. 插 ...