uniapp项目如何引入外部js

我正在参加「掘金·启航计划」

前言

最近做了一个uniapp项目，因为要实现h5页面的一个功能，需要用到外部的一些js资源。因此要在该uniapp项目实现引入外部js资源，期间遇到了好些坑，今天来总结记录下具体的实现以及一些问题。

具体实现

在 index.html 文件中引入

根据查找网上的一些方法，直接在项目的index.html文件中使用script标签引入要用的资源，可是打开页面发现并没有加载上这些资源，因此排除了该种方式。

动态创建script标签

因为只需要在一个特定的页面加载这些js资源，在该页面的事件中定义动态创建script标签、并加入页面中的方法，再使用该方法写入js文件的URL链接或者文件路径。

addScript(url) {
    let head = document.getElementsByTagName('head')[0];
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
},
onloadJs() {
    this.addScript("/static/js/crypto-js.min.js")
    return Promise.resolve()
},

在页面的onLoad() 函数调用加载js的方法

onLoad() {
    Promise.resolve()
        .then(() => this.onloadVoice())
        .then(() => this.onloadJs())
        .then(() => {
                setTimeout(() => {
                        this.initRecord()
                }, 1000)
        })
},

注：该项目中使用引入js文件里面的函数API，必须要等这些js资源加载完成之后才能使用，不然会报错（什么方法未定义之类的），并且加载js的方法都是同步操作，因此使用 Promise.resolve()（回调函数） 方法来实现让其它方法都执行了，再执行另一个方法的操作

遇到的问题

报错：Uncaught SyntaxError: Unexpected token '<' (at transcode.worker.js:1:1)

这个错误通常意味着 JavaScript 加载失败，可能是因为尝试加载的脚本返回了 HTML 页面或者其他非 JavaScript 内容。

造成这种情况的原因(例如 JavaScript 脚本文件路径错误、跨域问题等)

一般检查 JavaScript 文件路径是否正确，确保文件存在于指定的位置。

页面中没有使用该transcode.worker.js文件,在浏览器中点击报错，就跳到index.html文件，感觉毫无头绪，在网上找解决方法（好多说是引入js的路径错误），也没有定位到问题所在，没办法实在没有思路后来就先放弃了，隔了一天又去仔细查看引入的js文件，发现其中一个js文件引入了其它的js文件，而该文件没有在项目中引入。