引用第三方自定义组件——微信小程序学习笔记
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>