在小程序开发的过程中，你或许会碰到一些内置功能无法满足需求的情况，这时候引入第三方 js 就像是找到了 “救星”。比如说，你想要在小程序里展示一些复杂的数据图表，要是仅靠小程序原生的组件，那实现起来不仅费劲，效果还可能不尽人意。但倘若引入如 Echarts、Chart.js 这类专业的第三方图表库，就能轻松创建出柱状图、折线图、饼图等各式各样精美的图表，让数据展示更加直观、清晰，极大地提升用户体验。再比如，在处理日期和时间的格式化、计算时，引入 Moment.js 这个第三方工具，就能让原本繁琐的操作变得简洁高效，节省大量开发时间。引入第三方 js 就如同为小程序开发打开了一扇通往无限可能的大门，能够让你的小程序在功能、交互、视觉等诸多方面脱颖而出，满足用户日益多样化的需求，在竞争激烈的市场中崭露头角。

二、如何引入第三方 js？

（一）npm 下载引入主包

如果想要把第三方 js 引入主包，以安装 Moment.js 为例，首先，在开发工具终端（前提是你的开发环境已经安装了 Node.js），输入命令 “npm install moment --save”，这样就能把 Moment.js 安装到项目的依赖中。接着，在微信开发者工具的工具栏找到 “工具 - 构建 npm”，点击之后，会生成 “miniprogram_npm” 文件夹，在这个文件夹里就能找到 Moment.js 对应的文件夹。要注意，构建完成后，最好删除 “node_modules” 文件夹，让 “miniprogram_npm” 文件夹中只保留实际需要用到的依赖，避免上传体积过大。完成这些操作后，在代码里就可以像这样引用：“const moment = require ('moment');”，然后就能在 Page 的生命周期函数或者其他方法中使用 Moment.js 提供的强大的日期处理功能，比如 “moment (new Date ()).format ('YYYYMMDD')” 就能轻松将当前日期格式化为 “年 - 月 - 日” 的形式。

（二）引入分包的两种方式

单独作为分包：把第三方 js 单独作为一个分包，能有效减少主包的代码体积。假设我们有一个处理图片压缩的第三方库 “image-compressor.js”，要把它作为分包引入。首先，在 “app.json” 的 “subpackages” 字段中配置这个分包：这里 “root” 指定了分包的根目录，“name” 是分包的名称，方便在代码中识别，因为这个分包主要是放工具类库，所以 “pages” 数组为空。然后，在需要使用这个图片压缩库的分包或主包代码里，通过分包异步化的方式引入：这种方式虽然能减小主包体积，但由于是异步操作，使用起来相对复杂一些，没办法像在主包中那样直接定义全局变量使用，每次使用都需要通过 “require” 的回调函数获取依赖，比较适合那些体积较大、不是每个页面都频繁使用的第三方 js 库。2. 直接放分包里：还是以引入 Moment.js 为例，如果选择直接把它放到需要引用的分包里，操作会简单直接一些。假设我们有一个 “news” 分包，里面的页面需要处理新闻发布时间的格式化，先把 Moment.js 的相关文件拷贝到 “news” 分包的某个目录下，比如 “libs” 文件夹，然后在新闻页面的 js 文件中这样引用：“const moment = require ('../libs/moment/index');”，接着就能正常使用 Moment.js 的功能了。但这种方式的缺点也很明显，就是如果多个分包都需要使用 Moment.js，就会造成代码重复，增加项目的维护成本，不过对于一些只在特定分包中使用，且体积较小的第三方 js，这种方式能快速实现功能，无需复杂的配置。

三、引入时的注意事项

（一）文件大小限制

要特别留意小程序对文件大小的限制，一般来说，整个小程序的代码包体积上限是 2M，如果引入的第三方 js 及其依赖文件过大，很容易超出这个限制，导致小程序无法上传。比如说，一些功能丰富但体积臃肿的图表库，要是一股脑儿全部引入，很可能就 “超标” 了。所以在引入之前，最好先对文件大小进行评估，可以借助一些工具或者开发工具自带的功能来查看引入的第三方 js 及其相关依赖的总体积。要是发现体积接近或超过限制，就得想办法优化，比如只引入用到的模块，避免引入整个庞大的库。像 Lodash 这个工具库，它提供了超多实用的工具函数，但如果项目里只需要用到其中的几个函数，那就可以通过 “lodash-es” 的按需引入方式，像 “import cloneDeep from 'lodash-es/cloneDeep';”，精准地引入所需函数，减小文件体积。 这种精准 “瘦身” 的操作，能让小程序在满足功能需求的同时，顺利通过大小限制的 “关卡”。

（二）路径问题

在引入第三方 js 时，路径的设置至关重要。小程序中既可以使用相对路径，也可以使用绝对路径，不过各有讲究。相对路径是以当前文件所在位置为基准来定位要引入的 js 文件，比如在一个页面的 js 文件中引入同目录下 “libs” 文件夹中的 “util.js”，就可以写成 “const utils = require ('./libs/util.js');”，这种方式简单直接，适用于引入本地项目内相对位置固定的 js 文件，在模块层级结构清晰的情况下，能快速找到依赖。但要是项目结构比较复杂，层层嵌套，相对路径就容易出错，一旦文件位置变动，引用路径就得跟着改，维护成本较高。这时候，绝对路径就能派上用场，不过小程序中的绝对路径并非传统意义上的从根目录开始的完整路径，而是以 “/” 开头，指向小程序根目录的一种相对表示。例如，要引入根目录下 “common” 文件夹中的 “config.js”，可以写成 “const config = require ('/common/config.js');”。不过使用绝对路径时要小心，因为小程序在不同的运行环境（如开发工具、真机预览、正式发布）下，对绝对路径的解析可能存在细微差异，要是遇到引入失败的情况，就得仔细检查路径是否正确，多在不同环境下测试，确保万无一失。

四、实操案例展示

为了让大家更清楚地了解小程序引入第三方 js 的全过程，我们来看一个电商小程序的实战案例。假设我们正在开发一个电商小程序，需要实现商品分享、图片懒加载以及支付验证等功能。

（一）分享功能引入

对于分享功能，我们选用 “uniapp 小程序全局配置分享到朋友和朋友圈功能的实现” 中提到的方法，创建 “/mixins/share.js” 插件。先在 “main.js” 中引入 “share.js” 文件，代码如下：接着编写 “share.js”，在里面实现 “onShareAppMessage” 和 “onShareTimeline” 方法，用来处理分享给好友和分享到朋友圈的逻辑。比如：这样，在小程序的各个页面，只要触发分享操作，就能按照我们设定的规则分享商品信息，吸引更多用户。

（二）图片懒加载引入

对于图片懒加载，假设我们找到一个合适的第三方 js 库 “lazyload.js”。如果这个库体积较小，且主要在商品列表页等几个分包中使用，我们可以选择直接把它放到对应的分包里。比如在 “goodsList” 分包中，先把 “lazyload.js” 拷贝到分包的 “libs” 文件夹，然后在商品列表页的 js 文件中引入：之后，在页面加载或者滚动等相关方法中，使用 “Lazyload” 对象来处理图片的懒加载，让图片在用户滑动到可视区域时才加载，提升页面加载速度，优化用户体验。

（三）支付验证引入

在支付验证方面，以微信支付为例，参考 “微信小程序支付组件开发实战” 中的流程。首先，在后端进行一系列准备工作，如申请微信支付、配置商户信息、配置 Https 服务器、下载微信支付 sdk 并配置相关信息等。后端准备就绪后，前端在支付页面引入微信支付的 js 验证相关代码。当用户点击支付按钮，前端先收集订单信息，如商品金额、订单号、商品描述等，通过接口传给后端。后端向微信服务器发送请求创建预支付订单，获取预支付订单号等关键信息后，封装成前端需要的验证数据格式返回给前端。前端拿到数据后，像这样调用支付接口：通过引入这些第三方 js 插件并合理运用，我们的电商小程序就能具备丰富实用的功能，在激烈的市场竞争中脱颖而出，为用户提供便捷、流畅的购物体验。

五、总结

小程序引入第三方 js 为我们的开发带来了诸多便利，让小程序能够展现出更强大的功能。我们既可以通过 npm 下载引入主包，利用主包的全局优势，方便在各个页面使用；也能以单独作为分包或者直接放分包里的方式引入分包，根据实际需求灵活抉择，平衡功能与代码体积。不过，引入过程中一定要留意文件大小限制，巧妙地按需引入，防止小程序 “超重”；还要小心路径问题，多测试不同环境，确保引入路径准确无误。希望大家多多动手实践，把这些方法运用到实际项目中，让自己的小程序大放异彩。后续我们还会分享更多小程序开发的干货知识，敬请期待！