在小程序開發的過程中，你或許會碰到一些內置功能無法滿足需求的情況，這時候引入第三方 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 下載引入主包，利用主包的全局優勢，方便在各個頁面使用；也能以單獨作為分包或者直接放分包里的方式引入分包，根據實際需求靈活抉擇，平衡功能與代碼體積。不過，引入過程中一定要留意文件大小限制，巧妙地按需引入，防止小程序 “超重”；還要小心路徑問題，多測試不同環境，確保引入路徑準確無誤。希望大家多多動手實踐，把這些方法運用到實際項目中，讓自己的小程序大放異彩。后續我們還會分享更多小程序開發的干貨知識，敬請期待！