uni-app与vue3打包的h5项目交互时，出现TypeError: Cannot read property 'navigateBack' of undefined

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

uni-app与vue3打包的h5项目交互时，出现TypeError: Cannot read property ‘navigateBack’ of undefined

测试发现（uniapp）vue2项目打包成h5后，可与uniapp开发的app项目正常传递数据；但（uniapp）vue3项目转成h5后，与uniapp开发的app（vue3）项目调用相关api会直接报错。

比如调用uni.webView.navigateBack()后报错：TypeError: Cannot read property ‘navigateBack’ of undefined

vue3打包生成的index.html文件配置如下：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/web/work/assets/uni.bd4a33f8.css">
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title>同声传译</title>
<!--preload-links-->
<!--app-context-->
<script type="module" crossorigin src="/web/work/assets/index-CF7zsC1G.js"></script>
<link rel="stylesheet" crossorigin href="/web/work/assets/index-CObtIVYn.css">
</head>
<body>
<div id="app"><!--app-html--></div>
<script src="uniwebview.js"></script>
</body>
</html>

Harmonyos Next教程
2 回复

问题已解决


在uni-app与Vue 3打包的H5项目交互时遇到TypeError: Cannot read property 'navigateBack' of undefined错误，通常是因为在Vue 3的H5项目中尝试调用了uni-app特有的页面导航方法navigateBack，而这个方法在纯H5环境中是不存在的。uni-app的API主要在其原生小程序或App环境中生效，H5打包后虽然可以运行，但很多平台特有的API无法使用。

为了解决这个问题，你需要根据运行环境区分处理。以下是一个基本的代码示例，展示如何在Vue 3项目中根据环境调用不同的逻辑，避免在H5环境中调用uni-app特有的API。

首先，你可以在Vue 3项目中创建一个工具函数来判断当前是否运行在uni-app环境中：

// utils/env.js
export function isUniApp() {
  return typeof uni !== 'undefined' && typeof uni.getSystemInfoSync === 'function';
}

然后，在你的组件或逻辑处理代码中，使用这个工具函数来决定是否调用navigateBack：

<template>
  <div>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script>
import { isUniApp } from '@/utils/env';

export default {
  methods: {
    goBack() {
      if (isUniApp()) {
        // 如果是uni-app环境，使用uni的navigateBack方法
        uni.navigateBack();
      } else {
        // 如果是H5环境，使用window.history的方法
        window.history.back();
      }
    }
  }
}
</script>

在这个例子中，goBack方法首先检查是否处于uni-app环境，如果是，则调用uni.navigateBack()；如果不是（比如在H5中），则使用window.history.back()来实现页面返回功能。

此外，如果你的应用需要在多个平台（如小程序、App、H5）上运行，建议使用条件编译或环境变量来更细致地控制不同平台的代码逻辑。uni-app提供了条件编译指令，如#ifdef APP-PLUS、#ifndef H5等，可以在代码层面更精确地控制特定平台的代码执行。

通过这种方式，你可以确保在不同平台上运行的应用都能正确地处理页面导航和其他平台特有的功能，同时避免跨平台API调用导致的错误。

回到顶部