uniapp app端webview嵌套的页面没有返回如何解决

在uniapp的app端使用webview嵌套页面时，发现没有返回按钮，导致用户无法返回上一页。请问该如何解决这个问题？是否有方法可以自定义返回按钮或者监听系统的返回事件？

2 回复

在webview页面内添加自定义返回按钮，通过uni.navigateBack()或history.back()实现返回。或使用uni-app的导航栏配置，设置返回按钮事件。


在Uniapp的App端，Webview嵌套页面没有返回按钮时，可以通过以下方式解决：

1. 自定义导航栏返回按钮

// 在pages.json中配置自定义导航栏
{
  "path": "pages/webview/webview",
  "style": {
    "navigationStyle": "custom"
  }
}

// 在webview页面添加返回按钮
<template>
  <view>
    <view class="custom-navbar">
      <view class="back-btn" @click="goBack">← 返回</view>
    </view>
    <web-view :src="url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.custom-navbar {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
}
.back-btn {
  font-size: 16px;
}
</style>

2. 监听Android物理返回键

export default {
  onBackPress() {
    // 处理Android物理返回键
    uni.navigateBack()
    return true // 阻止默认返回行为
  }
}

3. 使用Webview的返回方法

// 获取webview实例进行控制
const webview = this.$scope.$getAppWebview()
const currentWebview = webview.children()[0]
currentWebview.canBack((e) => {
  if (e.canBack) {
    currentWebview.back() // webview内部返回
  } else {
    uni.navigateBack() // 退出页面
  }
})

4. 与H5页面通信 如果H5页面可控制，可通过postMessage通信：

// Uniapp端
const wv = this.$refs.webview
wv.postMessage({ type: 'backButton', show: true })

// H5端监听
window.addEventListener('message', function(e) {
  if(e.data.type === 'backButton') {
    // 在H5页面显示返回按钮
  }
})

选择最适合的方案：

  • 简单场景使用方案1
  • 需要精细控制使用方案3
  • H5可配合时使用方案4
回到顶部