DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2018-10-23 17:17
  • 更新:2019-11-12 09:14
  • 阅读:34336

uni-app自定义返回逻辑教程

分类:uni-app

自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。

onBackPress(event) 返回 event ={form: backbutton | navigateBack}

说明

当用户进行以下操作时,会触发该函数:

  • Android 实体返回键 (from = backbutton)
  • 顶部导航栏左边的返回按钮 (from = backbutton)
  • 返回 API,即 uni.navigateBack() (from = navigateBack)

注意事项:

  • 只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。
  • 不返回或返回其它值,均会执行默认的返回行为。
  • H5 平台,顶部导航栏返回按钮支持 onBackPress(),浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
  • 暂不支持直接在自定义组件中配置该函数,目前只能是在页面中来处理。

场景示例

页面返回

场景说明:

页面中的遮罩处于显示状态时,点击返回不希望直接关闭页面,而是隐藏掉遮罩。遮罩隐藏后,继续点击返回再执行默认的逻辑。

自定义遮罩

通常自定义的遮罩/弹出层,都会做成组件,这样方便复用。

新建 uni-app 项目->components->mask.vue 文件,代码如下:

<template>  
    <view>  
        <view class="cpt-mask">  
        </view>  
    </view>  
</template>  

<script>  
    export default {}  
</script>  

<style>  
    .cpt-mask {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background-color: #000000;  
        opacity: 0.5;  
        z-index: 99;  
    }  
</style>

引用遮罩组件

在页面中引入 mask 自定义组件后,通过一个状态值来控制其隐藏/显示。

<mask v-if="showMask"></mask>

这里用 v-if,不要用 v-show,自定义组件存在一些问题待优化。

处理返回逻辑

在 onBackPress 中,判定当前遮罩是否处于显示状态。如果显示,则关闭遮罩并返回 true。

onBackPress() {  
  if(this.showMask) {  
    this.showMask = false;  
    return true;  
  }  
},

多级返回

部分业务场景下,返回的逻辑中需要返回多级页面。

由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。
此时,需要根据 onBackPress 的回调对象中的 from 值来做处理,当来源是 'navigateBack' 时,返回 false。

<template>  
    <view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onBackPress(options) {  
            if (options.from === 'navigateBack') {  
                return false;  
            }  
            this.back();  
            return true;  
        },  
        methods: {  
            back() {  
                uni.navigateBack({  
                    delta: 2  
                });  
            }  
        },  
    }  
</script>  

<style>  

</style>

应用退出

场景说明:

若在App首页,点击手机物理返回键,此时无返回页面可关闭,uni-app默认会提示“再按一次退出应用”;若想自定义退出信息,如修改为:出现一个拟态窗口提示我们是否退出应用,点击确定退出应用。点击取消,不做操作。

实现方案:

在 onBackPress 中,遮罩不显示的状态下,点击返回键将弹出拟态窗。

onBackPress() {  
   if(this.showMask) {  
     this.showMask = false;  
     return true;  
   }else{  
      uni.showModal({  
        title: '提示',  
        content: '是否退出uni-app?',  
        success: function(res) {  
            if (res.confirm) {  
                // 退出当前应用,改方法只在App中生效  
                plus.runtime.quit();  
            } else if (res.cancel) {  
                console.log('用户点击取消');  
            }  
        }  
      });  
      return true  
   }  
},

实现效果如下图:

运行体验

完整的示例代码,见附件。解压后,拖至 HBuilderX 运行即可。

11 关注 分享
Trust 854790679@qq.com dmj 122401027@qq.com 2083363836@qq.com 306816224@qq.com admin@astcn.net 达达x zting590 ai666 abovesky@qq.com

要回复文章请先登录注册

514683570@qq.com

514683570@qq.com

回复 970109789@qq.com:
onBackPress: function(options) {
if (options.from === 'navigateBack') {
return false;
}
if (this.remark != this.groupInfo.remark) {
uni.showModal({
content: '确定放弃编辑群公告?',
success: res => {
if (res.confirm) {
uni.navigateBack();
}
}
});
}
return true;
}
2019-11-12 09:14
514683570@qq.com

514683570@qq.com

回复 970109789@qq.com:
排除某一种返回类型
2019-11-12 09:14
970109789@qq.com

970109789@qq.com

如果一开始模态框不显示, 点击返回键调用uni.showModal 让用户二次确认之后才返回上一级页面, 这个应该怎么弄呢? 尝试了好久, 总是在onBackPress的return语句走了之后 才走success回调, 而且会陷入return true的死循环
2019-11-07 17:21
checkming@outlook.com

checkming@outlook.com

回复 873039435@qq.com:
那你后来是怎么解决的?
2019-11-07 13:44
checkming@outlook.com

checkming@outlook.com

小程序不支持
2019-11-07 13:43
yanfront@qq.com

yanfront@qq.com

h5怎么也不会进入这个方法
2019-09-30 16:11
1979563468@qq.com

1979563468@qq.com

会闪屏
2019-09-18 13:43
卡尔不太卡

卡尔不太卡

到底小程序支不支持?!!!!!!!!!!!!!!!!
2019-09-12 14:54
873039435@qq.com

873039435@qq.com

只能在H5 和APP中吗 如何在小程序中 监控物理返回呢
2019-09-06 14:09
Macking

Macking

搞了半天,小程序还是不支持 T ... T
2019-09-04 15:56
雪影

雪影

监听返回键 h5是from='backButton', 手机App是from='backbutton'才支持, 有大小写区分
2019-08-12 22:31
1275839779@qq.com

1275839779@qq.com

小程序不支持?那在小程序里要怎么监听这个onBackPress,急。。。
2019-07-26 11:02
senovo200@sina.com

senovo200@sina.com

回复 bz_liu88@126.com:
return true 是取消关闭,我这里app试过好的
2019-07-15 17:41
583692476@qq.com

583692476@qq.com

小程序不支持吗?
2019-07-15 10:30
bz_liu88@126.com

bz_liu88@126.com

h5的可以 ,就是手机上不行 ,但是我看了又好像是支持手机端的啊
2019-07-03 16:23
bz_liu88@126.com

bz_liu88@126.com

手机端这么点了没反应,是不支持吗
2019-07-03 16:20
半晴雨滴

半晴雨滴

请问我用的是多级返回,但是F5刷新一下函数就没有效果了,请问怎么解决
2019-07-02 15:26
903646809@qq.com

903646809@qq.com

我又实验了一下,多级返回把onBackPress(options)添加进去,F5刷新后,返回按钮仍然出现死循环 我的delta值是1
2019-06-28 14:39
程咬金3斧头

程咬金3斧头

回复 903646809@qq.com:
同问,location变化后,就不生效 怎么破
2019-06-26 02:06
1462487866@qq.com

1462487866@qq.com

// 监听用户点击返回键
onBackPress(options) {
console.log('from:' + options.from)
if (options.from == 'backButton') {

console.info(111)
uni.showToast({
title: '请提交取消原因再返回',
icon:'none'
});
return true;
}
},
这个是我写的
2019-06-20 12:09
1462487866@qq.com

1462487866@qq.com

为什么我在真机上测试不行再,h5上可以啊
2019-06-20 12:09
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 花爽:
感谢指正,已修改
2019-06-18 16:55
903646809@qq.com

903646809@qq.com

请问我用的是多级返回,但是F5刷新一下函数就没有效果了,请问怎么解决
2019-06-18 14:42
花爽

花爽

文中说明那里,应该是from不是form
2019-06-15 17:30
642307404@qq.com

642307404@qq.com

回复 DCloud_UNI_GSQ:
浏览器端 可以用原生js 条件注释判断 H5没试过 估计不行吧

<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()"></body>
<script type="text/javascript">
var DispClose = true;
function CloseEvent()
{
if (DispClose)
{
return "是否离开当前页面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在这里处理关闭页面前的动作
}
</script>
2019-06-10 15:07
2035232702@qq.com

2035232702@qq.com

这个弹出框能不能弹出图片啊,或者弹出二维码用什么弹出比较好
2019-06-06 18:20
DCloud_UNI_HT

DCloud_UNI_HT

回复 775436559@qq.com:
h5 只能拦截导航栏的返回事件 ,不能拦截浏览器或者物理按键的事件。
2019-04-16 17:23
Trust

Trust

回复 yunhuahesunjing@live.com:
小程序没有此类规范
2019-04-16 17:21
775436559@qq.com

775436559@qq.com

H5页面生命周期介绍里显示支持,但是我这边一直测试不支持
2019-04-15 16:19
yunhuahesunjing@live.com

yunhuahesunjing@live.com

小程序不支持吗?
2019-04-10 22:51
豆豆啊

豆豆啊

sskkkk
2019-04-01 21:16
fategaga

fategaga

这评论功能做的太烂了,评论一次,直接刷新整个浏览器页面。你玩呢啊。服了。就这水平还开发这个平台。
2019-03-31 21:30
fategaga

fategaga

回复 DCloud_heavensoft:
的用它 才能触发 uni.navigateBack();
2019-03-31 21:29
fategaga

fategaga

回复 bandeng:
这个监听怎么写?谢谢
2019-03-31 21:27
fategaga

fategaga

如此说来,返回键这块有点坑啊
2019-03-31 21:20
asdadad啊的

asdadad啊的

有俩个场景,第一个场景是我在客服页面,点击返回的时候(退出该窗口需要调用一个退出接口)
还有一个场景在用户忘记密码的时候,通过短信验证之后,调到重置登录密码,如何没写点击返回键是到主页
这些onBackPress 可以实现吗
2019-03-28 10:53
DCloud_UNI_GSQ

DCloud_UNI_GSQ

回复 bandeng:
浏览器是拦截不了的。
2019-03-01 19:18
bandeng

bandeng

H5 平台 导航栏左边的返回按钮可以,实体返回键不行
2019-03-01 11:52
哈哈八百

哈哈八百

回复 DCloud_UNI_CHB:
请问,可以点击页面的任何地方关闭 uni.showModal 吗??
2019-02-25 17:48
露珠

露珠

用遮罩层这种方式不可行,虚拟按键和手势无法阻止
2019-01-31 17:37
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 小明MMM:
onLoad仅在创建时会触发,你可以在onShow中刷新
2019-01-21 16:53
小明MMM

小明MMM

回复 DCloud_UNI_CHB:
就是返回后的那个页面,让他触发onLoad,重新刷新
2019-01-19 14:51
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 小明MMM:
你的需求场景是什么?每个页面都有onShow生命周期,返回时同样会触发
2019-01-17 18:07
小明MMM

小明MMM

回复 sfjlkd:
请问怎么监听返回后的页面,解决了吗
2019-01-17 11:00
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 小燕子:
iOS只有顶部导航的返回键,没有实体按键,你说的是什么?
2019-01-10 14:58
小燕子

小燕子

有没有ios返回键事件呀
2019-01-10 13:59
sfjlkd

sfjlkd

回复 DCloud_heavensoft:
搜嘎,谢谢哈
2018-12-13 12:05
86300845@qq.com

86300845@qq.com

make
2018-12-12 04:24
DCloud_heavensoft

DCloud_heavensoft

回复 sfjlkd:
返回后的页面有onshow
2018-12-11 18:53
sfjlkd

sfjlkd

只能监听当前页面。哪个页面点击了返回按钮,哪个页面触发事件;而不是返回之后的页面触发,有点扯
2018-12-11 18:28
sfjlkd

sfjlkd

111111111111
2018-12-11 18:26
沃广商城

沃广商城

组件内监听back事件尽快实现吧,现在如果要是写自己的confirm弹窗总不可能每个页面复制粘贴把。。。
2018-10-27 09:20
阿哇

阿哇

能说清楚点吗,期待
2018-10-24 01:15