小程序使用npm下載第三方包（UI組件、插件......）

 

小程序開發中不可避免會使用到第三方UI組件庫，和H5開發一樣使用npm下載第三方包（這只是其中一種方式，另外一種是通過gitHub獲取code）。

吐槽一句，從接觸微信開發文檔開始，到現在我始終覺得微信開發文檔寫的是真的爛。這個爛不是東西爛，首先找某個細節點時，費勁。其次，文檔上比如使用npm包

時，文檔的操作順序明顯會遇到坑。。。（Component is not found in path.......）

 

微信開發文檔對npm的說明：　https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

 

傻瓜式步驟：

　　1、在創建的小程序根目錄下打開cmd，初始化npm，生成package.json文件。（可以一路回車，使用默認設置）

　　　　npm install      or     npm install -f (全部使用默認配置項)

　　　　

 

 

 

 

　　2、構建npm項目的配置文件，按需加載 ，生成了一個package.lock.json文件，並且創建node_modules文件夾（存放下載的包）。

　　　　npm install --production docxtemplater

　　

 

　　3、確保項目詳情中本地設置使用npm模塊。（勾選）

 

　　

 

 

 

　　4、按照UI組件庫中對應的命令下載對於UI組件包即可。

　　　　以 Vant Weapp 為例：

　　　　npm i @vant/weapp -S --production

　　

　　5、在微信開發者工具中在導航欄中找到工具，選擇構建npm（完成構建后會在目錄中生成一個miniprogram_npm的目錄。）

 

 

　　6、使用對應得UI組件

　　　　注意：　　

　　　　將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以去除，不關閉將造成部分組件樣式混亂。

　　　　以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應的路徑即可。如果你是通過下載源代碼的方式使用 @vant/weapp，

　　　　請將路徑修改為項目中 @vant/weapp 所在的目錄。

// 通過 npm 安裝
// app.json
"usingComponents": {
      "van-button": "@vant/weapp/button/index"
}

　　

// 引入組件后，可以在 wxml 中直接使用組件

<van-button type="primary">按鈕</van-button>