document.createElement('script')是最可靠方式，因第三方SDK（如微信jweixin、腾讯TCPlayer）强制要求CDN加载、依赖全局变量、需DOM就绪后执行，而import/require会被uni-app打包进vendor.js，违反其路径与运行时约束。
直接在 H5 端用 document.createElement('script') 动态加载，是最可靠、最可控的方式；其他方式（如 npm import、require、改 index.html 模板）要么失效、要么仅限特定场景，还容易引发重复加载或执行时机错误。
为什么不能直接 import 或 require 第三方 JS？
uni-app 的 H5 构建流程会把 import 的模块静态分析并打包进 vendor.js，但很多第三方 SDK（比如腾讯云 tcplayer.v4.1.min.js、微信 jweixin-1.6.0.js）有以下硬性要求：
- 必须从指定 CDN 加载（含版本号、路径、域名强约束）
- 依赖全局变量（如
window.TCPlayer、window.wx），且需在 DOM 就绪后挂载 - 部分 SDK 内部检测
document.currentScript或依赖 script 标签的src属性做资源定位 -
require('./xxx.js')或拼接路径的require()会被构建工具忽略，运行时报Cannot find module
动态加载 script 的正确写法（带防重 + 错误兜底）
不要在 onLoad 或 created 钩子中直接 append，要确保 DOM 可用、避免多次插入、监听加载状态。推荐封装成可复用方法：
function loadScript(src) {
return new Promise((resolve, reject) => {
// 已加载过，直接 resolve
if (document.querySelector(`script[src="${src}"]`)) {
resolve();
return;
}
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
document.head.appendChild(script);
});
}
// 使用示例（在 mounted 或按钮点击时调用）
mounted() {
loadScript('https://res.wx.qq.com/open/js/jweixin-1.6.0.js')
.then(() => {
console.log('wx SDK loaded');
// 此时 window.wx 已可用，可安全调用 wx.config
})
.catch(err => console.error(err));
}
-
script.async = true是必须的，否则阻塞渲染 - 务必检查
script[src="..."]是否已存在，否则 H5 页面路由跳转时反复加载会报config: duplicate invocation（微信 SDK 典型错误） - 不要用
setTimeout等待，要用onload回调——这是唯一可靠的就绪信号
哪些情况必须改 index.html 模板？
仅当该 JS 是全站级基础依赖，且满足两个条件时才考虑：
- 你确定它在所有页面都需第一时间执行（比如埋点 SDK、字体加载器）
- 它不依赖 Vue 实例、不和
uni-app生命周期耦合（即不是“某个组件里才用”）
操作路径：manifest.json → h5 → template 指向自定义 index.html，然后在 里用 <script src="..."></script> 插入。注意：
- 这个 HTML 文件不会被 HBuilderX 自动更新，每次升级 uni-app 版本后需手动同步基础结构
- App 和小程序端完全不走这个文件，所以它只对 H5 有效
- 如果 JS 本身做了 UA 判断或环境嗅探，可能在桌面 Chrome 里正常，但在微信内置浏览器里失败——得靠
/(MicroMessenger|WeChat)/.test(navigator.userAgent)手动补逻辑
真正容易被忽略的是加载顺序和作用域污染：比如同时加载高德地图 JS 和腾讯地图 JS，它们都往 window 上挂 AMap 或 TMap，但某些 SDK 内部会覆盖已有属性；遇到这种冲突，只能靠加载前清空命名空间，或用 iframe 隔离——这不是常规方案，但线上真出过。
