uni-app x 枚举类型BUG

uni-app x 枚举类型BUG

示例代码：

<template>
<view class="content"></view>
</template> 

<script lang="uts">
export enum MyEnum {
A = 10, B = 20, C = 30
}
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
console.log("---------------------");
let a : MyEnum = MyEnum.A
console.log(MyEnum.A);
},
methods: {}
} 
</script> 

<style>
.content {
display: flex;
align-items: center;
justify-content: center;
}

.logo {  
height: 200rpx;  
width: 200rpx;  
margin-top: 200rpx;  
margin-bottom: 50rpx;  
}

.title {  
font-size: 36rpx;  
color: #8f8f94;  
}
</style>

操作步骤：

console.log(MyEnum.A);

预期结果：

应该输出 枚举类型的 值 ，比如 10 20 30

实际结果：

输出的 乱码

bug描述：

uni app X 使用枚举类型，打印输出 无法获取到枚举值，

Image Image Image

信息项 描述
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 WIN 11
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 Android
手机系统版本 Android 10
手机厂商 模拟器
手机机型 HUA WEI MATE 30PRO
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app x 枚举类型BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app x 枚举类型BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你在使用 TypeScript 或者其他支持枚举类型的技术栈时遇到了枚举类型的 BUG，以下是一些可能的原因和解决方法：

1. 枚举类型未正确导出或导入

  • 问题描述: 如果你在一个模块中定义了枚举类型，但在另一个模块中使用时发现无法识别或报错，可能是因为枚举类型未正确导出或导入。
  • 解决方法:
    • 确保枚举类型被正确导出：
      export enum MyEnum {
  Value1 = 'Value1',
  Value2 = 'Value2'
}
    • 在使用的地方正确导入：
      import { MyEnum } from './my-enum';

2. 枚举类型名称冲突

  • 问题描述: 如果在多个模块中定义了相同名称的枚举类型，可能会导致冲突。
  • 解决方法:
    • 使用不同的名称来区分枚举类型。
    • 或者使用命名空间来避免冲突：
      namespace MyNamespace {
  export enum MyEnum {
    Value1 = 'Value1',
    Value2 = 'Value2'
  }
}

3. 枚举类型在模板中使用时的问题

  • 问题描述: 在 uni-app 的模板中直接使用枚举类型可能会导致编译错误或运行时错误。
  • 解决方法:
    • 在模板中使用枚举类型时，建议将枚举值绑定到组件的 data 或 computed 属性中：
      export default {
  data() {
    return {
      myEnumValue: MyEnum.Value1
    };
  }
};
    • 然后在模板中使用：
      <view>{{ myEnumValue }}</view>

4. 枚举类型在 uni-app 编译后的代码中丢失

  • 问题描述: 有时 uni-app 的编译过程可能会忽略或丢失枚举类型定义，导致运行时错误。
  • 解决方法:
    • 确保 TypeScript 配置正确，并且 tsconfig.json 中的 compilerOptions 配置了 "preserveConstEnums": true：
      {
  "compilerOptions": {
    "preserveConstEnums": true
  }
}

5. 枚举类型在 uni-app 的 H5 或小程序端表现不一致

  • 问题描述: 在 uni-app 中，H5 和小程序端的编译环境可能不同，导致枚举类型在某些端表现不一致。
  • 解决方法:
    • 确保在所有端的编译环境中都正确支持枚举类型。
    • 如果某个端不支持枚举类型，可以考虑使用普通对象来模拟枚举：
      const MyEnum = {
  Value1: 'Value1',
  Value2: 'Value2'
} as const;

6. 枚举类型在 uni-app 的 vue3 版本中的问题

  • 问题描述: 如果你在使用 uni-app 的 vue3 版本，可能会遇到枚举类型在 setup 函数中的使用问题。
  • 解决方法:
    • 在 setup 函数中，确保正确导入和使用枚举类型：
      import { MyEnum } from './my-enum';

export default {
  setup() {
    return {
      myEnumValue: MyEnum.Value1
    };
  }
};
回到顶部