uni-app如何引入外部js

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app如何引入外部js

Harmonyos Next教程
2 回复

如果你开发的是网页，直接create element建个script标签插入


在uni-app项目中引入外部JavaScript文件，可以通过多种方式实现，具体取决于你希望在何处以及如何使用这些外部脚本。以下是几种常见的方法及其代码示例：

1. 在页面中直接引入外部JS文件

你可以在页面的<script>标签中通过src属性引入外部JS文件。这种方式适用于页面级别的脚本。

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script src="/static/js/external.js"></script>
<script>
export default {
  mounted() {
    // 调用外部JS文件中的函数
    externalFunction();
  }
}
</script>

注意：直接在页面<script>标签中使用src属性时，uni-app可能不支持直接在同一个<script>块中编写其他JavaScript代码。通常，你会将这部分代码放在另一个<script>标签中，或者使用模块化方式引入。

2. 使用模块化引入外部JS文件

将外部JS文件作为模块引入，这是推荐的方式，因为它符合现代JavaScript开发的标准。

首先，确保你的外部JS文件（例如external.js）导出需要的函数或变量：

// static/js/external.js
export function externalFunction() {
  console.log('This is an external function.');
}

然后，在你的页面或组件中通过import语句引入并使用它：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import { externalFunction } from '@/static/js/external.js';

export default {
  mounted() {
    externalFunction();
  }
}
</script>

注意路径中的@符号，它通常在uni-app项目中配置为指向src目录的别名。

3. 在全局范围内引入外部JS文件

如果你需要在整个应用中多次使用某个外部JS文件，可以考虑在main.js或App.vue中全局引入。

// main.js
import Vue from 'vue';
import App from './App';
import { externalFunction } from '@/static/js/external.js';

Vue.prototype.$externalFunction = externalFunction;

new Vue({
    ...App
}).$mount();

这样，你就可以在任何组件中通过this.$externalFunction()调用这个函数了。

以上方法涵盖了uni-app项目中引入外部JS文件的主要方式。根据你的具体需求选择合适的方法，并确保路径和导出/导入的语法正确无误。

回到顶部