uni-app web-view里的页面使用uni的api报错

uni-app web-view里的页面使用uni的api报错

操作步骤：

https://vue3-hellouniapp.dcloud.net.cn/pages/component/web-view/web-view
点击任意按钮都报错

预期结果：

不报错

实际结果：

报错

bug描述：

官方vue3 web-view组件里的示例，点击都报错，原因大概打包后是window.uni是个空的，而vue2和vue3开发环境window.uni上有uni的方法，打包后消失。
类似的报错issue：https://ask.dcloud.net.cn/question/144959
链接：https://vue3-hellouniapp.dcloud.net.cn/pages/component/web-view/web-view

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.03
浏览器平台 Chrome
浏览器版本 最新
项目创建方式 HBuilderX
App下载地址或H5网址 https://vue3-hellouniapp.dcloud.net.cn/pages/component/web-view/web-view

更多关于uni-app web-view里的页面使用uni的api报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

顶顶

更多关于uni-app web-view里的页面使用uni的api报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 web-view 组件时，web-view 内部加载的页面是运行在浏览器环境中的，而不是 uni-app 的运行环境。因此，web-view 中的页面无法直接调用 uni-app 提供的 API，因为这些 API 依赖于 uni-app 的运行时环境。

如果你在 web-view 中的页面尝试调用 uni-app 的 API，通常会遇到以下错误：

Uncaught ReferenceError: uni is not defined

解决方案

  1. 使用 uni.webView.postMessage 和 uni.webView.onMessage 进行通信：

    • 在 web-view 的页面中，你可以通过 window.postMessage 向 uni-app 发送消息。
    • 在 uni-app 中，你可以通过 uni.webView.onMessage 监听 web-view 发送的消息，并在收到消息后调用 uni-app 的 API。

    示例代码：

    <!-- uni-app 页面 -->
<template>
  <web-view src="/pages/webview/index.html" @message="handleMessage"></web-view>
</template>

<script>
export default {
  methods: {
    handleMessage(event) {
      const data = event.detail.data;
      console.log('Received message from web-view:', data);

      // 根据消息内容调用 uni-app 的 API
      if (data.action === 'navigateBack') {
        uni.navigateBack();
      }
    }
  }
}
</script>

    <!-- web-view 页面 -->
<script>
function sendMessageToApp() {
  const message = { action: 'navigateBack' };
  window.parent.postMessage(message, '*');
}

// 假设某个按钮点击事件触发发送消息
document.getElementById('back-button').addEventListener('click', sendMessageToApp);
</script>
回到顶部