uni-app怎么引入外部js和css？学会这个方法，三分钟搞定

大风写全栈

发布于 2024-11-18 20:45:03

1.9K00

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

是这样的

遇到这样一个需求，需要在uni-app某个页面中嵌入一个外部组件。

众所周知，uni-app是使用类nodejs方式开发。

但外部组件只有cdn静态js和css文件引入，这一种方式。

确认过多次，确实只有这一种方式。

没办法，就这一种方式也得完成需求。

整理了一下大概思路，js文件可以通过js动态生成script标签方式加载，css可以通过url方式引入。

来个🌰

思路出来，大概的代码也就有了。

如下，先通过js方式加载js文件：

const script = document.createElement('script');
// 换成你自己的地址.
script.src = 'https://example.com/q.js';
script.onload = () => {
  console.log('js文件加载成功');
};
script.onerror = () => {
  console.error('js文件加载失败!');
};
document.head.appendChild(script);

大概例子就长这样。

注意一下，里面的js文件地址需要换成你自己的。

css引入方式比较简单，一行代码搞定：

@import url('https://example.com/q.min.css');

代码片段有了，在uni-app试了一下，可用！

下面给个完整的🌰。

完整示例

注意: 里面有两处url需要替换一下，一个是js文件地址，另一个是css文件地址。

完整代码如下：

<template>
  <view>
  </view>
</template>

<script>
let vInstance = null;
export default {
  data() {
    return {
    };
  },
  unmounted() {
    // 假如需要销毁资源,在这里执行代码.
    vInstance.destory();
  },
  mounted() {
    this.loadTest();
  },
  methods: {
    loadTest() {
      const script = document.createElement('script');
      // 换成你自己的地址.
      script.src = 'https://example.com/q.js';
      script.onload = () => {
        console.log('js文件加载成功');
      };
      script.onerror = () => {
        console.error('js文件加载失败!');
      };
      document.head.appendChild(script);
      // 这个地方使用延时,是因为使用时可能js文件还没加载进来.
      setTimeout(function () {
        vInstance = TestR.create();
      }, 2000);
    },
  }
};
</script>
<style>

/* 换成你自己的地址 */
@import url('https://example.com/q.min.css');
</style>
<style lang="scss" scoped>

/*其它css...*/

page {
  overflow-y: hidden;
}
</style>

学会了吗？