1. 使用 npm 安裝第三方包
1.1 下載安裝Node.js 工具
下載地址：Node.js — Download Node.js?
1.2 安裝 npm 包
在項目空白處右鍵彈出菜單，選擇“在外部終端窗口打開”，打開命令行工具，輸入以下指令：
- ? 1> 初始化:
npm init -y- ?2> 安裝目標 npm 包
npm -install [packageName] -save1.3 npm 構建
點擊【工具】，選擇【構建 npm】,當彈出構建完成對話框，表示構建成功，項目目錄中可發現多出了【miniprogram_npm】文件夾。
1.4 使用
1.4.1?自定義組件配置
?在app.json(全局) 或 [page].json 中配置 “usingComponents”，比如想使用vant weapp 中的 button，可進行如下配置：
"usingComponents": {"v-button":"/miniprogram_npm/@vant/weapp/button/index"}?1.4.2 在頁面 wxml 中使用
<view class="container"><v-button type="primary">操作按鈕</v-button></view>2. 第三方自定義組件
2.1 weui
?這是一套基于樣式庫weui-wxss開發的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統一。?
2.1.1 參考推薦?
網上教程：?使用npm 引入WeUi組件_npm weui-CSDN博客
官方文檔：WeUI組件庫簡介 | wechat-miniprogram / weui
網頁效果：WeUI?
?附：官方給的使用說明不清楚，屬性介紹不全，可通過打開網頁效果的‘開發者人員工具’，查看對應組件的屬性值。
2.1.2 示例
在 *.wxss 中引用樣式
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';在 *.json 引用自定義組件，如dialog
"usingComponents": {"mp-dialog":"/miniprogram_npm/weui-miniprogram/dialog/dialog"},?在 *.wxml 中使用
<mp-dialog title="標題" show="{{showDialog}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>內容~~~~</view></mp-dialog>*.js 中相關的代碼有：
Page({data:{buttons:[{text:'確定',extClass:'weui-dialog__btn weui-dialog__btn_default'},{text:'取消',extClass:'weui-dialog__btn weui-dialog__btn_warn'}]},tapDialogButton(e){//index: 0 text: 確定console.log("index:",e.detail.index,"text:",e.detail.item.text)this.setData({showDialog:false})}
})2.2 vant weapp??
vant weapp 的使用文件比weui 的詳細，組件也比weui多。
?2.2.1 參考推薦
網上教程：
微信小程序中使用vant組件庫（超詳細）微信小程序中使用vant組件庫（超詳細） 目錄 前言 Vant Weapp的安裝 - 掘金
官網教程：?vant-weapp: 輕量、可靠的小程序 UI 組件庫
官網使用文檔：介紹 - Vant Weapp
2.2.2 示例
以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應的路徑即可。
// 通過 npm 安裝
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}
// 通過下載源碼使用 es6版本
// app.json
"usingComponents": {"van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通過下載源碼使用 es5版本
// app.json
"usingComponents": {"van-button": "path/to/@vant/weapp/lib/button/index"
}
使用組件
引入組件后，可以在 wxml 中直接使用組件
<van-button type="primary">按鈕</van-button>
