uniapp开发的H5应用被加载到webview时,当访问/pages/xxx/xxx时,在index.html里的<script>下的js脚本没有加载的问题

步骤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脚本。

Comments

No comments yet. Why don’t you start the discussion?

发表回复