在小程序開發(fā)的過程中，你或許會(huì)碰到一些內(nèi)置功能無法滿足需求的情況，這時(shí)候引入第三方 js 就像是找到了 “救星”。比如說，你想要在小程序里展示一些復(fù)雜的數(shù)據(jù)圖表，要是僅靠小程序原生的組件，那實(shí)現(xiàn)起來不僅費(fèi)勁，效果還可能不盡人意。但倘若引入如 Echarts、Chart.js 這類專業(yè)的第三方圖表庫(kù)，就能輕松創(chuàng)建出柱狀圖、折線圖、餅圖等各式各樣精美的圖表，讓數(shù)據(jù)展示更加直觀、清晰，極大地提升用戶體驗(yàn)。再比如，在處理日期和時(shí)間的格式化、計(jì)算時(shí)，引入 Moment.js 這個(gè)第三方工具，就能讓原本繁瑣的操作變得簡(jiǎn)潔高效，節(jié)省大量開發(fā)時(shí)間。引入第三方 js 就如同為小程序開發(fā)打開了一扇通往無限可能的大門，能夠讓你的小程序在功能、交互、視覺等諸多方面脫穎而出，滿足用戶日益多樣化的需求，在競(jìng)爭(zhēng)激烈的市場(chǎng)中嶄露頭角。

二、如何引入第三方 js？

（一）npm 下載引入主包

如果想要把第三方 js 引入主包，以安裝 Moment.js 為例，首先，在開發(fā)工具終端（前提是你的開發(fā)環(huán)境已經(jīng)安裝了 Node.js），輸入命令 “npm install moment --save”，這樣就能把 Moment.js 安裝到項(xiàng)目的依賴中。接著，在微信開發(fā)者工具的工具欄找到 “工具 - 構(gòu)建 npm”，點(diǎn)擊之后，會(huì)生成 “miniprogram_npm” 文件夾，在這個(gè)文件夾里就能找到 Moment.js 對(duì)應(yīng)的文件夾。要注意，構(gòu)建完成后，最好刪除 “node_modules” 文件夾，讓 “miniprogram_npm” 文件夾中只保留實(shí)際需要用到的依賴，避免上傳體積過大。完成這些操作后，在代碼里就可以像這樣引用：“const moment = require ('moment');”，然后就能在 Page 的生命周期函數(shù)或者其他方法中使用 Moment.js 提供的強(qiáng)大的日期處理功能，比如 “moment (new Date ()).format ('YYYYMMDD')” 就能輕松將當(dāng)前日期格式化為 “年 - 月 - 日” 的形式。

（二）引入分包的兩種方式

單獨(dú)作為分包：把第三方 js 單獨(dú)作為一個(gè)分包，能有效減少主包的代碼體積。假設(shè)我們有一個(gè)處理圖片壓縮的第三方庫(kù) “image-compressor.js”，要把它作為分包引入。首先，在 “app.json” 的 “subpackages” 字段中配置這個(gè)分包：這里 “root” 指定了分包的根目錄，“name” 是分包的名稱，方便在代碼中識(shí)別，因?yàn)檫@個(gè)分包主要是放工具類庫(kù)，所以 “pages” 數(shù)組為空。然后，在需要使用這個(gè)圖片壓縮庫(kù)的分包或主包代碼里，通過分包異步化的方式引入：這種方式雖然能減小主包體積，但由于是異步操作，使用起來相對(duì)復(fù)雜一些，沒辦法像在主包中那樣直接定義全局變量使用，每次使用都需要通過 “require” 的回調(diào)函數(shù)獲取依賴，比較適合那些體積較大、不是每個(gè)頁(yè)面都頻繁使用的第三方 js 庫(kù)。2. 直接放分包里：還是以引入 Moment.js 為例，如果選擇直接把它放到需要引用的分包里，操作會(huì)簡(jiǎn)單直接一些。假設(shè)我們有一個(gè) “news” 分包，里面的頁(yè)面需要處理新聞發(fā)布時(shí)間的格式化，先把 Moment.js 的相關(guān)文件拷貝到 “news” 分包的某個(gè)目錄下，比如 “l(fā)ibs” 文件夾，然后在新聞頁(yè)面的 js 文件中這樣引用：“const moment = require ('../libs/moment/index');”，接著就能正常使用 Moment.js 的功能了。但這種方式的缺點(diǎn)也很明顯，就是如果多個(gè)分包都需要使用 Moment.js，就會(huì)造成代碼重復(fù)，增加項(xiàng)目的維護(hù)成本，不過對(duì)于一些只在特定分包中使用，且體積較小的第三方 js，這種方式能快速實(shí)現(xiàn)功能，無需復(fù)雜的配置。

三、引入時(shí)的注意事項(xiàng)

（一）文件大小限制

要特別留意小程序?qū)ξ募笮〉南拗?，一般來說，整個(gè)小程序的代碼包體積上限是 2M，如果引入的第三方 js 及其依賴文件過大，很容易超出這個(gè)限制，導(dǎo)致小程序無法上傳。比如說，一些功能豐富但體積臃腫的圖表庫(kù)，要是一股腦兒全部引入，很可能就 “超標(biāo)” 了。所以在引入之前，最好先對(duì)文件大小進(jìn)行評(píng)估，可以借助一些工具或者開發(fā)工具自帶的功能來查看引入的第三方 js 及其相關(guān)依賴的總體積。要是發(fā)現(xiàn)體積接近或超過限制，就得想辦法優(yōu)化，比如只引入用到的模塊，避免引入整個(gè)龐大的庫(kù)。像 Lodash 這個(gè)工具庫(kù)，它提供了超多實(shí)用的工具函數(shù)，但如果項(xiàng)目里只需要用到其中的幾個(gè)函數(shù)，那就可以通過 “l(fā)odash-es” 的按需引入方式，像 “import cloneDeep from 'lodash-es/cloneDeep';”，精準(zhǔn)地引入所需函數(shù)，減小文件體積。 這種精準(zhǔn) “瘦身” 的操作，能讓小程序在滿足功能需求的同時(shí)，順利通過大小限制的 “關(guān)卡”。

（二）路徑問題

在引入第三方 js 時(shí)，路徑的設(shè)置至關(guān)重要。小程序中既可以使用相對(duì)路徑，也可以使用絕對(duì)路徑，不過各有講究。相對(duì)路徑是以當(dāng)前文件所在位置為基準(zhǔn)來定位要引入的 js 文件，比如在一個(gè)頁(yè)面的 js 文件中引入同目錄下 “l(fā)ibs” 文件夾中的 “util.js”，就可以寫成 “const utils = require ('./libs/util.js');”，這種方式簡(jiǎn)單直接，適用于引入本地項(xiàng)目?jī)?nèi)相對(duì)位置固定的 js 文件，在模塊層級(jí)結(jié)構(gòu)清晰的情況下，能快速找到依賴。但要是項(xiàng)目結(jié)構(gòu)比較復(fù)雜，層層嵌套，相對(duì)路徑就容易出錯(cuò)，一旦文件位置變動(dòng)，引用路徑就得跟著改，維護(hù)成本較高。這時(shí)候，絕對(duì)路徑就能派上用場(chǎng)，不過小程序中的絕對(duì)路徑并非傳統(tǒng)意義上的從根目錄開始的完整路徑，而是以 “/” 開頭，指向小程序根目錄的一種相對(duì)表示。例如，要引入根目錄下 “common” 文件夾中的 “config.js”，可以寫成 “const config = require ('/common/config.js');”。不過使用絕對(duì)路徑時(shí)要小心，因?yàn)樾〕绦蛟诓煌倪\(yùn)行環(huán)境（如開發(fā)工具、真機(jī)預(yù)覽、正式發(fā)布）下，對(duì)絕對(duì)路徑的解析可能存在細(xì)微差異，要是遇到引入失敗的情況，就得仔細(xì)檢查路徑是否正確，多在不同環(huán)境下測(cè)試，確保萬無一失。

四、實(shí)操案例展示

為了讓大家更清楚地了解小程序引入第三方 js 的全過程，我們來看一個(gè)電商小程序的實(shí)戰(zhàn)案例。假設(shè)我們正在開發(fā)一個(gè)電商小程序，需要實(shí)現(xiàn)商品分享、圖片懶加載以及支付驗(yàn)證等功能。

（一）分享功能引入

對(duì)于分享功能，我們選用 “uniapp 小程序全局配置分享到朋友和朋友圈功能的實(shí)現(xiàn)” 中提到的方法，創(chuàng)建 “/mixins/share.js” 插件。先在 “main.js” 中引入 “share.js” 文件，代碼如下：接著編寫 “share.js”，在里面實(shí)現(xiàn) “onShareAppMessage” 和 “onShareTimeline” 方法，用來處理分享給好友和分享到朋友圈的邏輯。比如：這樣，在小程序的各個(gè)頁(yè)面，只要觸發(fā)分享操作，就能按照我們?cè)O(shè)定的規(guī)則分享商品信息，吸引更多用戶。

（二）圖片懶加載引入

對(duì)于圖片懶加載，假設(shè)我們找到一個(gè)合適的第三方 js 庫(kù) “l(fā)azyload.js”。如果這個(gè)庫(kù)體積較小，且主要在商品列表頁(yè)等幾個(gè)分包中使用，我們可以選擇直接把它放到對(duì)應(yīng)的分包里。比如在 “goodsList” 分包中，先把 “l(fā)azyload.js” 拷貝到分包的 “l(fā)ibs” 文件夾，然后在商品列表頁(yè)的 js 文件中引入：之后，在頁(yè)面加載或者滾動(dòng)等相關(guān)方法中，使用 “Lazyload” 對(duì)象來處理圖片的懶加載，讓圖片在用戶滑動(dòng)到可視區(qū)域時(shí)才加載，提升頁(yè)面加載速度，優(yōu)化用戶體驗(yàn)。

（三）支付驗(yàn)證引入

在支付驗(yàn)證方面，以微信支付為例，參考 “微信小程序支付組件開發(fā)實(shí)戰(zhàn)” 中的流程。首先，在后端進(jìn)行一系列準(zhǔn)備工作，如申請(qǐng)微信支付、配置商戶信息、配置 Https 服務(wù)器、下載微信支付 sdk 并配置相關(guān)信息等。后端準(zhǔn)備就緒后，前端在支付頁(yè)面引入微信支付的 js 驗(yàn)證相關(guān)代碼。當(dāng)用戶點(diǎn)擊支付按鈕，前端先收集訂單信息，如商品金額、訂單號(hào)、商品描述等，通過接口傳給后端。后端向微信服務(wù)器發(fā)送請(qǐng)求創(chuàng)建預(yù)支付訂單，獲取預(yù)支付訂單號(hào)等關(guān)鍵信息后，封裝成前端需要的驗(yàn)證數(shù)據(jù)格式返回給前端。前端拿到數(shù)據(jù)后，像這樣調(diào)用支付接口：通過引入這些第三方 js 插件并合理運(yùn)用，我們的電商小程序就能具備豐富實(shí)用的功能，在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出，為用戶提供便捷、流暢的購(gòu)物體驗(yàn)。

五、總結(jié)

小程序引入第三方 js 為我們的開發(fā)帶來了諸多便利，讓小程序能夠展現(xiàn)出更強(qiáng)大的功能。我們既可以通過 npm 下載引入主包，利用主包的全局優(yōu)勢(shì)，方便在各個(gè)頁(yè)面使用；也能以單獨(dú)作為分包或者直接放分包里的方式引入分包，根據(jù)實(shí)際需求靈活抉擇，平衡功能與代碼體積。不過，引入過程中一定要留意文件大小限制，巧妙地按需引入，防止小程序 “超重”；還要小心路徑問題，多測(cè)試不同環(huán)境，確保引入路徑準(zhǔn)確無誤。希望大家多多動(dòng)手實(shí)踐，把這些方法運(yùn)用到實(shí)際項(xiàng)目中，讓自己的小程序大放異彩。后續(xù)我們還會(huì)分享更多小程序開發(fā)的干貨知識(shí)，敬請(qǐng)期待！