uniapp如何引入js

1. uniapp简介

uniapp是一款基于Vue.js框架开发的跨平台开发工具，可以使用统一的前端代码，生成安卓、iOS、H5、小程序等多个平台的应用程序，大大简化了跨平台应用程序的开发难度。uniapp支持使用JavaScript语言进行开发，我们可以在代码中引入不同的js文件来扩展应用程序的功能。接下来我们将详细介绍在uniapp中如何引入js文件。

2. 引入本地js文件

我们可以将自己编写的js文件放在uniapp的项目文件夹中，然后在我们需要使用这个js文件的页面中引入它。接下来我们以一个计算阶乘的例子来说明如何引入本地的js文件。

2.1 创建阶乘计算js文件

我们创建一个名为factorial.js的文件，将以下代码复制到文件中：

function factorial(num){

  if(num<=1){
    return 1;
  }
  else{
    return num*factorial(num-1);
  }
}
export default factorial;

代码中定义了一个函数factorial，用来计算输入参数num的阶乘。export default factorial语句将这个函数导出，使得其他js文件可以引入它。保存文件后将它复制到项目文件夹中。

2.2 在页面中引入阶乘计算js文件

在我们需要使用阶乘计算函数的页面中，我们可以使用以下代码来引入它：

import factorial from '@/common/factorial.js';

export default{
  data(){
    return{
      result:0
    }
  },
  methods:{
    calculate(){
      this.result=factorial(5);
    }
  }
}

上面的代码中，import factorial from '@/common/factorial.js'语句将阶乘计算函数导入到当前页面中，接下来我们可以在methods中定义一个calculate函数，在这个函数中使用factorial函数计算5的阶乘，并将结果存储到result中。当这个函数被调用时，result的值将被更新为120。

3. 引入第三方js文件

在uniapp中引入第三方的js文件也非常方便，我们只需要在项目文件夹中将这个js文件复制到相应的文件夹下，并在需要使用它的页面中引入即可。下面我们以引入lodash.js文件来说明如何引入第三方js文件。

3.1 下载lodash.js文件

我们可以从lodash的官网上下载它的js文件，或者直接使用npm安装。为了方便起见，我们可以直接使用以下链接下载lodash.js文件，并将它保存到项目文件夹中。

https://cdn.jsdelivr.net/npm/lodash/lodash.min.js

3.2 在页面中引入lodash.js文件

在我们需要使用lodash函数的页面中，我们可以使用以下代码来引入它：

import _ from '@/common/lodash.min.js';

export default{
  data(){
    return{
      array:[1,3,2],
      result:[]
    }
  },
  methods:{
    sort(){
      this.result=_.sort(this.array);
    }
  }
}

上面的代码中，import _ from '@/common/lodash.min.js'语句将lodash函数导入到当前页面中。接下来我们在methods中定义一个sort函数，在这个函数中使用lodash的sort函数对数组进行排序，并将结果存储到result中。当这个函数被调用时，result的值将被更新为[1,2,3]。

4. 总结

在uniapp中引入本地或第三方js文件非常方便。我们只需要将这些文件复制到项目文件夹中，并在需要使用它的页面中引入即可。在应用程序的开发过程中，我们可以按照自己的需求引入不同的js文件来扩展应用程序的功能。