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

1. 使用 npm 安装第三方包

1.1 下载安装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>

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