uni-app 内嵌 webview 加载的 H5 中使用 uni.showToast 不显示内容

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 内嵌 webview 加载的 H5 中使用 uni.showToast 不显示内容

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 windows 10 专业版
HBuilderX类型 正式
HBuilderX版本 4.29
手机系统 全部
手机厂商 华为
页面类型 vue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • Android
  • iOS

示例代码：

<u-button type="primary" @click="toast">info</u-button>  

toast(){
uni.showToast({
title: '标题',
duration: 2000
});
}

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

vue3项目的app webview加载的内嵌H5
h5也是用uniapp开发的，环境是本地
在h5里写uni.showToast()会报错，内容展示不出来
用手机自带浏览器加载h5，toast是正常的


Harmonyos Next教程
3 回复

我这边测试app内嵌webview是可以正常提示的 可以把你的内嵌网页地址发一下吗？我用你的地址测试下 <template>
<view>

        <web-view src="https://hellouniapp.dcloud.net.cn/pages/API/toast/toast"></web-view>  

</view>

</template>


今天试的又可以了 不知道什么原因

在 uni-app 中内嵌 WebView 加载的 H5 页面使用 uni.showToast 方法不显示内容的问题，通常是由于 WebView 上下文与 uni-app 原生方法调用之间的隔离导致的。uni.showToast 是 uni-app 提供的原生接口，它需要在 uni-app 的原生环境中调用才有效，而在 WebView 中加载的 H5 页面运行在独立的浏览器环境中，无法直接调用这些原生接口。

为了在 H5 页面中实现类似 uni.showToast 的功能，你可以考虑以下几种替代方案：

1. 使用 JavaScript Alert

最简单的方式是使用 JavaScript 的 alert 函数来显示信息，虽然样式和功能较为简单，但可以满足基本的提示需求。

alert("This is a toast message!");

2. 使用自定义的 Toast 组件

在 H5 页面中创建一个自定义的 Toast 组件，通过 CSS 和 JavaScript 控制其显示和隐藏。

HTML:

<div id="toast" class="toast" style="display: none;">Toast Message</div>

CSS:

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

JavaScript:

function showToast(message, duration = 2000) {
  var toast = document.getElementById('toast');
  toast.textContent = message;
  toast.style.display = 'block';
  setTimeout(function() {
    toast.style.display = 'none';
  }, duration);
}

// Usage
showToast("This is a custom toast message!");

3. 通过 WebView 与 uni-app 通信

如果需要在 H5 页面中调用 uni-app 的原生功能，可以通过 WebView 与 uni-app 主应用进行通信。这需要你在 uni-app 中监听 WebView 的消息，并在接收到消息时调用相应的原生方法。

uni-app 端监听消息：

// 在 uni-app 的页面或组件中
webview.onMessage((event) => {
  const { data } = event.detail;
  if (data.action === 'showToast') {
    uni.showToast({
      title: data.message,
      icon: 'none',
      duration: 2000
    });
  }
});

H5 端发送消息：

function showToastInUniApp(message) {
  if (window.WeixinJSBridge) { // 假设这是 uni-app 的 WebView 环境
    WeixinJSBridge.invoke('sendMsgToNative', {
      data: {
        action: 'showToast',
        message: message
      }
    });
  } else {
    // Fallback for non-uni-app environments
    alert(message);
  }
}

// Usage
showToastInUniApp("Message from H5 to uni-app");

注意：上述 WeixinJSBridge.invoke 只是一个示例，实际通信方式取决于你的 uni-app WebView 配置和平台。

回到顶部