小程序怎么引入外部的js库

小程序引入外部的JS库的方法包括：通过npm包管理工具、将外部JS库下载到本地、使用CDN服务。

在小程序开发中，引入外部的JS库可以极大地提升开发效率和代码复用性。最常见的方法是通过npm包管理工具引入外部库。这种方法不仅方便，而且可以自动管理库的版本和依赖关系。接下来，我们将详细探讨通过npm包管理工具引入外部JS库的具体步骤。

一、通过npm包管理工具引入外部JS库

1. 安装npm包

首先，需要确保开发环境中已经安装了npm（Node Package Manager）。如果没有安装，可以通过以下命令进行安装：

npm install npm -g

然后，进入小程序项目的根目录，使用npm命令安装所需的外部JS库。例如，如果你想要引入lodash库，可以使用以下命令：

npm install lodash --save

2. 配置小程序的npm支持

在安装完成后，需要在小程序的根目录下创建或修改project.config.json文件，确保其中包含以下配置项：

{ "setting": { "urlCheck": false, "es6": true, "enhance": true, "postcss": true, "minified": true, "npmInstallMode": "useBuildNpm" }, "compileType": "miniprogram" }

3. 使用npm库

在小程序的JavaScript文件中，通过require或import语句引入外部JS库。例如，要引入lodash库，可以这样做：

const _ = require('lodash');
// 或者使用ES6的import语法
import _ from 'lodash';
// 使用lodash库的函数
const array = [1, 2, 3, 4, 5];
const reversedArray = _.reverse(array);
console.log(reversedArray); // 输出: [5, 4, 3, 2, 1]

二、将外部JS库下载到本地

1. 下载并保存库文件

如果外部JS库没有提供npm包或者你不希望使用npm包管理工具，可以直接将外部JS库的文件下载到本地。在项目的utils目录下创建一个文件夹，例如libs，然后将下载的JS库文件保存到这个文件夹中。

2. 引入本地库文件

在需要使用外部JS库的页面或组件中，通过相对路径引入该库文件。例如，如果你下载了moment.js库，可以这样引入：

const moment = require('../../utils/libs/moment.min.js');
// 使用moment库的函数
const now = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(now); // 输出当前时间

三、使用CDN服务

虽然小程序不直接支持通过CDN引入JS库，但你可以在小程序的app.json文件中配置网络请求域名白名单，然后通过网络请求获取外部JS库并动态加载。

1. 配置域名白名单

在app.json文件中，添加允许的域名：

{
  "networkTimeout": {
    "request": 60000,
    "connectSocket": 60000,
    "uploadFile": 60000,
    "downloadFile": 60000
  },
  "requestDomain": [
    "https://cdn.jsdelivr.net"
  ]
}

2. 动态加载JS库

在小程序的页面或组件中，通过网络请求获取外部JS库的代码，然后动态加载。例如，使用wx.request获取外部JS库：

wx.request({
  url: 'https://cdn.jsdelivr.net/npm/lodash/lodash.min.js',
  success: function(res) {
    const lodashCode = res.data;
    eval(lodashCode); // 动态执行获取到的JS代码
    // 使用lodash库的函数
    const array = [1, 2, 3, 4, 5];
    const reversedArray = _.reverse(array);
    console.log(reversedArray); // 输出: [5, 4, 3, 2, 1]
  }
});

四、总结

在小程序开发中，引入外部JS库的方法主要有三种：通过npm包管理工具、将外部JS库下载到本地、使用CDN服务。每种方法都有其优缺点，开发者可以根据实际需求选择合适的方法。通过npm包管理工具引入外部JS库是最常见且推荐的方法，因为它不仅方便，而且可以自动管理库的版本和依赖关系。希望本文能帮助你更好地理解和掌握小程序引入外部JS库的方法。