步骤1:创建动态加载脚本:
// loader.js (加载/static目录下的指定脚本)
// 动态加载脚本的工具函数
export async function loadScript(src) {
return new Promise((resolve, reject) => {
// 检查是否已存在相同 src 的脚本
const existingScript = document.querySelector(`script[src="${src}"]`);
if (existingScript) {
resolve();
return;
}
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.async = false;
script.onload = () => {
console.log(`${src} loaded`);
resolve();
};
script.onerror = (error) => {
console.error(`${src} load failed:`, error);
reject(error);
};
document.head.appendChild(script);
});
}
// 加载所有桥接脚本
export async function loadBridgeScripts() {
try {
await Promise.all([
loadScript('/static/bridge/uni.webview.1.5.4.js'),
loadScript('/static/bridge/jweixin-1.4.0.js')
]);
console.log('All bridge scripts loaded');
} catch (error) {
console.error('Failed to load bridge scripts:', error);
throw error;
}
}
步骤2:在main.js动态加载,需要在app创建之前
// 动态导入脚本加载器
async function initializeBridge() {
try {
const { loadBridgeScripts } = await import('./common/bridge/scriptLoader.js');
await loadBridgeScripts();
// 如果需要添加window对象的全局方法,在这里可以继续添加
// 比如:window.handleMessage = function(){// 等等}
console.log('Bridge initialized via dynamic import');
} catch (error) {
console.error('Failed to initialize bridge:', error);
}
}
// 在应用启动前初始化桥接
initializeBridge();
setTimeout(() => {
// 检查桥接状态
console.log('Bridge status check in main.js:');
console.log('- window.uni exists:', typeof window.uni2 !== 'undefined');
console.log('- window.uni.postMessage exists:', typeof window.uni2?.postMessage !== 'undefined');
console.log('- window.wx exists:', typeof window.wx !== 'undefined');
console.log('- window.wx.miniProgram exists:', !!window.wx?.miniProgram);
}, 1000);
const app = new Vue({
...App
})
app.$mount()
以上可以在main.js动态注入需要的普通js脚本。