DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2018-10-23 17:17
  • 更新:2020-11-24 13:33
  • 阅读:97177

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

分类:uni-app

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

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

说明

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

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

注意事项:

  • 只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。
  • 当不阻止页面返回却直接调用页面路由相关接口(如:uni.switchTab)时,可能会导致页面显示异常,可以通过延迟调用路由相关接口解决。
  • 不返回或返回其它值,均会执行默认的返回行为。
  • 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 运行即可。

22 关注 分享
Trust 854790679@qq.com dmj 122401027@qq.com 2083363836@qq.com 306816224@qq.com admin@astcn.net 达达x zting590 abovesky@qq.com 1076955397@qq.com www.635914453@qq.com 恰似你的温柔丶 最光阴 mfan 1457368987@qq.com Jasmine001 1510794450@qq.com caoliangcheng@sodo-tech.com zr12041019 307675141@qq.com uniuk

要回复文章请先登录注册

55452582@qq.com

55452582@qq.com

现在这个在hbuildx 2.9.8 android 10 上面 都监听不到 是怎么回事呢 H5能监听到 或者用reLaunch跳转页面能监听到 用navigateTo跳转 顶部有返回按钮 就监听不到
2020-11-24 13:33
brush

brush

后台运行,再点开来,这个事件就失效了
2020-11-13 11:24
595105762@qq.com

595105762@qq.com

回复 chirs :
3q,完美实现退回桌面功能,但我有个疑问,moveTaskToBack这个方法是哪来的?uniapp官网和h5+的官网完全找不到相关介绍啊
2020-11-10 18:07
chirs

chirs

回复 595105762@qq.com :
var main = plus.android.runtimeMainActivity();
main.moveTaskToBack(false);
2020-11-10 14:55
595105762@qq.com

595105762@qq.com

我现在有个需求,就是在首页按下返回键时不关闭应用,而是直接返回桌面,就和微信类似,求问如何不退出应用返回桌面?
2020-11-09 10:23
shmily138

shmily138

iOS监听不了系统自带的返回事件?
2020-10-20 17:34
2083742018@qq.com

2083742018@qq.com

uni-app打包成h5嵌入原生App后,app跳转进入h5后的第一个页面onBackPress生命周期监听不到,目前我用了自定义导航去解决,大家还有其他的方法的话欢迎评论告知
2020-09-18 09:11
2083742018@qq.com

2083742018@qq.com

回复 243869476@qq.com :
找到除了自定义导航外的其他解决办法了么
2020-09-18 09:03
445962968@qq.com

445962968@qq.com

这个方法监听不到$emit页面通信
2020-09-16 14:40
243869476@qq.com

243869476@qq.com

回复 243869476@qq.com :
app跳转进入H5后的第一个页面onBackPress监听不到..
2020-09-09 19:30