uni-app 微信小程序无法动态引入ts

uni-app 微信小程序无法动态引入ts

示例代码：

const locale='en'
const langModule = ((await import(`./lang/${locale}.ts`)) as any) .default as LangModule;
结果：console.log("langModule----", langModule)--->underfined;

操作步骤：

const locale='en'
const langModule = ((await import(`./lang/${locale}.ts`)) as any) .default as LangModule;

预期结果：

是一个 对象数据

实际结果：

underfined

bug描述：

uni-cli搭建vue3+ts 项目-微信小程序无法动态引入ts

const langModule = ((await import(`./lang/${locale}.ts`)) as any) .default as LangModule;

返回的结果是underfine

在web端正常运行，这里的代码是参考vben-admin框架的语言包处理，动态引入对应的语言包文件


| 信息类别       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows          |
| PC开发环境操作系统版本号 | win10            |
| 第三方开发者工具版本号 | 3.4.6.20220420   |
| 基础库版本号     | 2.24.0           |
| 项目创建方式     | CLI              |
| CLI版本号       | 最新             |

更多关于uni-app 微信小程序无法动态引入ts的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序无法动态引入ts的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-App 中开发微信小程序时，由于微信小程序的运行环境限制，无法直接动态引入 TypeScript 文件（.ts 文件）。微信小程序的模块系统是静态的，不支持在运行时动态加载模块。

解决方案

  1. 静态引入： 确保所有需要使用的 TypeScript 文件在编译时已经静态引入。例如：

    import { someFunction } from './someModule';

  2. 条件编译： 如果你需要根据不同的条件引入不同的模块，可以使用 Uni-App 的条件编译功能。例如：

    #ifdef MP-WEIXIN
import { weixinFunction } from './weixinModule';
#endif

#ifdef H5
import { h5Function } from './h5Module';
#endif

  3. 动态加载逻辑： 如果你确实需要动态加载某些逻辑，可以考虑将逻辑封装在函数或类中，然后在运行时根据条件调用不同的函数或实例化不同的类。例如：

    let module;
if (someCondition) {
    module = require('./moduleA');
} else {
    module = require('./moduleB');
}

module.someFunction();

    注意：require 在微信小程序中也是静态的，无法动态加载模块。

  4. 使用全局变量或状态管理： 将需要动态加载的逻辑提前加载并存储在全局变量或状态管理工具（如 Vuex）中，然后在运行时根据需要调用。

    import { someFunction } from './someModule';

// 存储在全局变量中
global.someFunction = someFunction;

// 在需要的地方调用
global.someFunction();
回到顶部