Uniapp 引入 js 的方法

在 Uniapp 开发中，合理引入 js 能极大地扩展项目的功能。下面就为大家详细介绍几种常见的 Uniapp 引入 js 的方法。

全局引入

若希望在多个页面或组件中使用同一个 js 文件，可以采用全局引入的方式。在项目的根目录下创建一个 common 文件夹，用于存放公共的 js 文件。比如，创建一个名为 util.js 的文件，在其中编写一些通用的函数。

// util.js
export function formatDate(date) {
    // 日期格式化逻辑
    return new Date(date).toLocaleDateString();
}

然后，在 main.js 中进行全局引入：

import Vue from 'vue';
import App from './App.vue';
import util from './common/util.js';

Vue.prototype.$util = util;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount('#app');

之后在任何组件中都可以通过 this.$util 来调用其中的函数，如 this.$util.formatDate(new Date())。

局部引入

如果某个 js 只在特定的组件中使用，局部引入更为合适。例如，在一个名为 Home.vue 的组件中引入一个局部的 js 文件。 先创建一个与 Home.vue 同目录的 helper.js 文件：

// helper.js
export function sayHello() {
    return 'Hello, Uniapp!';
}

接着在 Home.vue 中引入：

<template>
    <view>{{ greeting }}</view>
</template>

<script>
import { sayHello } from './helper.js';

export default {
    data() {
        return {
            greeting: ''
        };
    },
    mounted() {
        this.greeting = sayHello();
    }
};
</script>

这样，就在 Home.vue 组件中成功引入并使用了 helper.js 中的函数。

引入第三方 js 库

对于一些流行的第三方 js 库，如 axios 用于网络请求。可以先通过 npm 安装：npm install axios --save。 然后在需要使用的地方引入：

import axios from 'axios';

export default {
    methods: {
        async getData() {
            try {
                const response = await axios.get('https://example.com/api/data');
                console.log(response.data);
            } catch (error) {
                console.error(error);
            }
        }
    }
};

通过这些方式，开发者可以灵活地在 Uniapp 项目中引入不同的 js 文件和库，实现功能的丰富与扩展。