引用第三方自定义组件——微信小程序学习笔记

1. 使用 npm 安装第三方包

1.1 下载安装Node.js 工具

下载地址：Node.js — Download Node.js®

1.2 安装 npm 包

在项目空白处右键弹出菜单，选择“在外部终端窗口打开”，打开命令行工具，输入以下指令：

•   1> 初始化:

npm init -y

•  2> 安装目标 npm 包

npm -install [packageName] -save

1.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>