您好,登錄后才能下訂單哦!
這篇文章主要介紹了小程序中使用npm包的方法,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
微信小程序在 2.2.1 版本后增加了對 npm 包加載的支持,使得小程序支持使用 npm 安裝第三方包。
1. 在小程序中加載 npm 包
npm install miniprogram-datepicker --production
node_modules可以 在小程序根目錄下,也可以存在于小程序根目錄下的各個子目錄中。但是不可以 在小程序根目錄外。使用--production選項,可以減少安裝一些業務無關的 npm 包,從而減少整個小程序包的大小。
2. 構建 npm 包
在微信小程序開發工具的「工具」菜單下點擊「構建 npm」命令,進行 npm 包的構建,此構建可以將 npm 包構建成在小程序中可加載使用的包。
node_modules 目錄不會參與編譯、上傳和打包中,所以小程序想要使用 npm 包必須走一遍“構建 npm”的過程,在最外層的 node_modules 的同級目錄下會生成一個 miniprogram_npm 目錄,里面會存放構建打包后的 npm 包,也就是小程序真正使用的 npm 包。
構建打包分為兩種:小程序 npm 包會直接拷貝構建文件生成目錄下的所有文件到 miniprogram_npm 中;其他 npm 包則會從入口 js 文件開始走一遍依賴分析和打包過程(類似 webpack)。
尋找 npm 包的過程和 npm 的實現類似,從依賴 npm 包的文件所在目錄開始逐層往外找,直到找到可用的 npm 包或是小程序根目錄為止。
構建完成后還需要確認項目已勾選了「使用 npm 模塊」。
3.使用npm包
js 中引入 npm 包:
const package = require('packageName')
使用 npm 包中的自定義組件:
{ "usingComponents": { "datepicker": "miniprogram-datepicker" } }
miniprogram-datepicker組件運行效果
感謝你能夠認真閱讀完這篇文章,希望小編分享小程序中使用npm包的方法內容對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。