Uniapp引入JS的全面介绍

一、使用js扩展uniapp

Uniapp是一个跨平台的开发框架，可以使用Vue语法开发原生应用，也可以将应用打包到不同的平台上运行，例如H5、小程序、App等。可是随着应用的开发，对Uniapp框架本身的扩展需求也变得越来越明显，尤其是需要引入JS插件。在Uniapp中引入JS插件可以起到对uniapp框架进行扩展、增加应用功能等作用。

要引入JS插件，uniapp提供了一种方法，通过引入JS文件的方式进行扩展。通常，开发者将JS文件放在项目中的static文件夹下，然后在需要使用该插件的地方引入该文件即可。

例如，我们需要引入一个JS插件，该插件提供了一个日期格式化方法。我们将该JS文件放在项目static文件夹下，并取名为dateUtils.js。接下来，在需要使用这个日期格式化插件的地方，我们这样引入：


import dateUtils from '@/static/dateUtils.js'

export default {
  data() {
    return {
      currentDate: ''
    }
  },
  created() {
    this.currentDate = dateUtils.formatDate(new Date())
  }
}

通过这种方式，我们就可以将JS插件引入到uniapp中，使得我们的应用拥有更加全面的功能。

二、引入外部JS库

除了引入项目中开发的JS插件外，可以将第三方库也引入到uniapp中，从而扩展uniapp的应用范围和能力。通常我们在使用外部JS库的时候，都有一些固定的方法，比如手动下载、使用CDN等方式来引入。在uniapp中也很简单，只需要将库的JS文件放到项目static文件夹之下，然后以普通的script方式引入即可。

以jweixin.js作为实例，我们将jweixin.js文件放在项目static目录下，代码如下：


<template>
  <view>
    <button @click="testJweixin()">TEST
  </view>
</template>

<script>
export default {
  methods: {
    testJweixin() {
      var wx = require('../../../../static/jweixin.js');
      console.log(wx);
    }
  }
}
</script>

通过这种方式，我们便可以在uniapp应用中拥有jweixin库的全部能力。

三、编写JS插件并且引入uniapp中

开发者可以根据自己的实际需求编写自己的JS插件，并将其引入uniapp中，以进行更全面的功能拓展。编写JS插件的过程中，我们通常需要满足一些必要的条件：

JS插件需要导出一个方法或者一个对象，以便在需要使用的时候能够引入JS插件。
在导出方法或对象的时候，需要保证是「纯函数」或者「具有良好的封装性」，从而避免应用中出现一些难以调试的Bug。

下面我们以一个简单的时间转换插件为例介绍如何开发和引入插件。我们编写一个utils.js文件，并将其放在项目的static文件夹下。该文件包含一个格式化时间的方法：


export function formatDate(date, fmt) {
  if (!fmt) {
    fmt = 'yyyy-MM-dd hh:mm:ss';
  }

  const o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds() // 秒
  };

  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }

  for (const k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
    }
  }

  return fmt;
}

编写完这个文件后，我们就可以在项目中引入这个JS插件了。引入的方式和前面所说的一样，只需要使用import即可：


import {formatDate} from '@/static/utils.js';

export default {
  methods: {
    getData: function() {
      const now = new Date();
      const dateStr = formatDate(now, 'yyyy-MM-dd');
      return dateStr;
    }
  }
};

当我们需要在uniapp中引入自己编写的JS插件时，只需要做如上述两个步骤即可。