【uniapp】H5和小程序动态导入模块的方法

做uniapp项目通常都是用

import Module from "./../module.js"

方式引用模块的，但是，这种方式是静态的，还是只能放在执行代码段的顶部（或者外部），若想放在代码中执行，那就会报错的，来看看如何解决吧。

各平台支持差异

方法名	H5	微信小程序
import()	√	×
require()	×	√

现在知道，H5项目可以用

import().then()

动态引入模块，而微信小程序就用

require()

动态导入。

在导入模块前，模块文件里的定义方式是这样的，代码如下

const template1 = {};
//...
export default {
	template1 
}
           

考虑到两个不同平台，就改成按条件编译，

例如，导入static文件夹里模块的方法实现，代码如下

importJsModuleFile(filename){
	return new Promise((resolve,reject)=>{
		// #ifdef H5
		import(`./../static/${filename}`).then(m=>resolve(m.default || m)).catch(reject);
		// #endif
		
		// #ifdef MP-WEIXIN
		try{
			const m = require(`./../static/${filename}`);
			resolve(m.default || m);
		}catch(err){
			reject(err)
		}
		// #endif
	});
}
           

如果

require()

引入模块报错

Cannot read property 'join' of null

，

疑是可能是文件相对路径填错了

编译微信小程序时，注意还要关闭依赖分析，

要关闭过滤无依赖，在uniapp项目里，找到配置文件

manifost.json

，以源码查看，

"mp-weixin"

这一项中

"settings"

选项添加两个属性

{
	//...
	ignoreDevUnusedFiles: false,
	ignoreUploadUnusedFiles: false，
}
           

参考 如何解决“Error: xxx.js 已被代码依赖分析忽略，无法被其他模块引用”报错

不知道如何使用吗? 代码如下

//动态加载模块static资源
importJsModuleFile(filename).then(resouce=>{
	console.log('template1', resouce)
	//...
}).catch(err=>console.error(err));