uni-app hello uts新建uts插件(API)在web端报UniError未定义错误

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

uni-app hello uts新建uts插件(API)在web端报UniError未定义错误

操作步骤

官方下载hello uts进行学习，新建uts插件(API)，直接生成app-android和app-ios示例，编译到App正常。后来想学习web，右键新建web目录，添加index.uts，编译到浏览器时，报UniError未定义错误。

预期结果

官方下载hello uts进行学习，新建uts插件(API)，直接生成app-android和app-ios示例，编译到App正常。后来想学习web，右键新建web目录，添加index.uts，可正常编译到浏览器。

实际结果

官方下载hello uts进行学习，新建uts插件(API)，直接生成app-android和app-ios示例，编译到App正常。后来想学习web，右键新建web目录，添加index.uts，编译到浏览器时，报UniError未定义错误。

bug描述

官方下载hello uts进行学习，新建uts插件(API)，直接生成app-android和app-ios示例，编译到App正常。后来想学习web，右键新建web目录，添加index.uts，编译到浏览器时，报UniError未定义错误。看官方文档https://uniapp.dcloud.net.cn/tutorial/err-spec.html#unierror中说在App端，UniError和SourceError都是从uts的Error继承。是不是未在web定义，不应该统一定义吗？

后来自己在interface.uts中加入文档中定义：

export class UniError extends Error{}

在unierror.uts中引入UniError才正常。

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 浏览器平台 浏览器版本
HBuilderX Windows windows10 正式 4.45 Edge 131.0.2903.112

Harmonyos Next教程
1 回复

针对您提到的在uni-app中新建uts插件（API）并在web端遇到UniError未定义错误的问题，这通常是因为UniError这个对象在uni-app的某些平台（如Web端）上可能未被定义或初始化。为了解决这个问题，我们可以通过以下几种方式进行处理：

1. 条件编译

由于UniError可能只在特定的平台（如App端）上有效，我们可以通过条件编译来确保在Web端不会引用到UniError。

// #ifdef APP-PLUS
const UniError = window.plus.UniError;
// #endif

// #ifndef APP-PLUS
const UniError = class UniErrorMock {
  constructor(message) {
    this.message = message;
    this.name = 'UniError';
  }
};
// #endif

function callUtsApi() {
  try {
    // 假设这是调用uts插件的代码
    // someUtsPluginFunction();
  } catch (error) {
    if (error instanceof UniError) {
      console.error('Caught a UniError:', error.message);
    } else {
      console.error('Caught an error:', error);
    }
  }
}

callUtsApi();

2. 全局错误处理

如果UniError的使用场景较多，可以在全局错误处理中统一处理，避免在每个调用点都进行条件判断。

window.addEventListener('error', (event) => {
  if (event.error && event.error.name === 'UniError') {
    console.error('Global UniError caught:', event.error.message);
  } else {
    console.error('Global error caught:', event.error);
  }
});

// 在调用uts API时，如果抛出异常，它会被上面的全局错误处理器捕获
function callUtsApi() {
  try {
    // someUtsPluginFunction();
  } catch (error) {
    throw error; // 重新抛出错误，让全局错误处理器捕获
  }
}

callUtsApi();

3. 使用Polyfill

如果希望在所有平台上都使用UniError，可以考虑创建一个polyfill来模拟UniError的行为。这种方法适用于UniError的功能在Web端可以通过其他方式实现的情况。

if (!window.UniError) {
  window.UniError = class UniErrorPolyfill extends Error {
    constructor(message) {
      super(message);
      this.name = 'UniError';
      // 可以添加其他UniError特有的属性或方法
    }
  };
}

// 现在可以安全地使用UniError，无论是在App端还是Web端
function callUtsApi() {
  try {
    // someUtsPluginFunction();
  } catch (error) {
    if (error instanceof UniError) {
      console.error('Caught a UniError:', error.message);
    } else {
      console.error('Caught an error:', error);
    }
  }
}

callUtsApi();

通过上述方法，您可以有效地解决在Web端遇到的UniError未定义错误问题，确保您的uni-app应用能够在不同平台上稳定运行。

回到顶部