uniapp web-view 加载失败时如何触发提示

我在uniapp中使用web-view组件加载网页，但有时候会遇到加载失败的情况。目前不知道如何监听加载失败事件并给用户提示。请问该如何在web-view加载失败时触发错误提示？希望了解具体的实现方法或代码示例。

2 回复

在web-view组件的@error事件中监听加载失败，触发自定义提示即可：

<web-view src="https://xxx.com" @error="onWebviewError"></web-view>

methods: {
  onWebviewError() {
    uni.showToast({
      title: '页面加载失败',
      icon: 'none'
    })
  }
}

在 UniApp 中，当 web-view 组件加载失败时，可以通过监听 @error 事件来触发用户提示。以下是实现方法：

步骤：

  1. 在 web-view 组件上绑定 @error 事件。
  2. 在对应方法中处理错误（例如显示提示信息）。

示例代码：

<template>
  <view>
    <web-view 
      :src="url" 
      @error="onWebViewError"
    ></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    }
  },
  methods: {
    onWebViewError(e) {
      uni.showToast({
        title: '网页加载失败，请检查网络或链接',
        icon: 'none',
        duration: 3000
      });
      console.error('WebView加载错误:', e);
    }
  }
}
</script>

说明：

  • @error 事件在网页加载失败时触发（如网络问题、链接无效）。
  • 使用 uni.showToast 显示提示，可通过 icon 和 duration 自定义样式和显示时间。
  • 可根据需求替换为 uni.showModal 提供更详细的交互选项。

注意事项：

  • 仅支持监听加载失败事件，无法直接获取具体错误码。
  • 确保 web-view 的 URL 合法且网络正常。

通过以上方法即可在加载失败时向用户提供友好提示。

回到顶部