【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));