uniapp嵌入webview时返回失效或提示退出app问题

【uniapp 解决使用web-view嵌套H5页面以后返回失效的问题】

uniapp 导航栏原生标题、按钮、输入框配置

背景

使用uniapp原生导航时, 返回按钮提示再点一次退出应用, 但是我期望的是在webview页面点返回时类似于页面体验一样, 返回上一页

解决方式

我使用的是原生导航栏及按钮, 并且页面是tab栏的页面, 不保证其他方式可行

pages.json (设置了一个返回按钮和首页按钮)

{
      "path": "pages/XXX/index",
      "style": {
        "navigationBarTitleText": "XXX中心",
        "app-plus": {
          "titleNView": {
            "buttons": [{
              "type": "back",
              "float": "left"
            },{
              "type": "home"
            }]
          }
        }
      }
    }

 页面代码

<template>
	<view>
        <web-view :src="src" class="webv"></web-view>
	</view>
</template>

JS

    var wv;
	export default {
		data() {
			return {
				src:"",
                canBack: false
			}
		},
		onShow() {
            // 隐藏tabbar
            //uni.hideTabBar({
            //    animation: false
            //});

            if (this.src == "") {
                this.src = "xxxxxxxx.com?token=";
            }
		},
        onReady() {
          // #ifdef APP-PLUS
          var self = this;
          var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
          setTimeout(function () {
            wv = currentWebview.children()[0];
            wv.addEventListener(
                "progressChanged",
                function (e) {
                  wv.canBack(function (e) {
                    self.canBack = e.canBack;
                  });
                },
                false
            );
          }, 500); //如果是页面初始化调用时,需要延时一下
          // #endif
        },
        // 设备上点击返回按钮时的处理
        onBackPress(e) {
          if (wv && this.canBack) {
            wv.back();
            return true;
          }
          return false;
        },
        onNavigationBarButtonTap(e) {
          // 返回
          if (e.index === 0) {
            // #ifdef H5
            uni.navigateBack();
            // #endif

            // #ifdef APP-PLUS
            this.canBack && wv.back();
            // #endif
          }
          // 首页
          if (e.index === 1) {
            // 显示tabbar
            //uni.showTabBar({
            //  animation: false
            //});
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }
	}

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值