微信小程序：vant weapp组件库在mpvue中实践

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
官方文档

前言

除了Vant WeappUI组件库之外，还有一些其他热门组件库可供选择。

• WeUI : WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

• iView Weapp : iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。

• MinUI : MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具。

• Wux Weapp : Wux WeApp是一个非常不错的微信小程序自定义 UI 组件库。

本文以Vant Weapp为例，学习如何在mpvue中使用。原生开发安装参考官方文档。

在使用到遇到问题：首先到Github Issues查找解决方案。

另外，在mpvue使用vant-weap存在一些兼容问题，可以通过修改源码解决。

安装

在mpvue中，不可以使用npm直接安装，由于node_modules目录下代码是不会被编译进dist目录中，所以只能通过手动获取导入到项目中。

获取源码：

git clone https://github.com/youzan/vant-weapp.git

将dist目录下的所有文件复制到static/vant目录下。

└── static
    └── vant
        ├── action-sheet   					上拉菜单
	    ├── area 									省市区选择
	    ├── badge 								徽章
	    ├── badge-group 						徽章组和徽章一起使用
	    ├── button 								按钮
	    ├── card 									商品卡片
	    ├── cell 										单元格
	    ├── cell-group							单元格组和单元格一起使用
	    ├── checkbox							复选框
	    ├── checkbox-group				复选框组
	    ├── collapse								折叠面板
	    ├── collapse-item						折叠面板项
	    ├── datetime-picker					时间选择
	    ├── dialog									弹出框
	    ├── field									输入框
	    ├── goods-action						商品导航：商品详情页底部样式
	    ├── goods-action-button
	    ├── goods-action-icon
	    ├── icon									图标
	    ├── loading								加载
	    ├── nav-bar								导航栏
	    ├── notice-bar							通告栏：跑马灯滚动字幕效果
	    ├── notify									消息通知
	    ├── panel									面板
	    ├── picker									选择器
	    ├── picker-column
	    ├── popup									弹出层
	    ├── progress								进度条
	    ├── radio									单选框
	    ├── radio-group
	    ├── rate										评分
	    ├── search								搜索
	    ├── slider									滑块
	    ├── stepper								步进器
	    ├── steps									步骤条：例如购物流程：下单->接单->发货->收货->完成
	    ├── submit-bar							提交订单栏
	    ├── swipe-cell							滑动单元格：可以左右滑动，出现操作按键
	    ├── switch									开关
	    ├── switch-cell							开关单元格
	    ├── tab										标签
	    ├── tabs
	    ├── tabbar									标签栏
	    ├── tabbar-item
	    ├── tag										标记
	    ├── toast									轻提示
	    ├── transition							动画
	    ├── tree-select							分类选择
	    ├── common								内置样式
	    ├── col   									布局列
	    ├── row										布局行
	    ├── overlay
       	├── info
        ├── mixins
	    └── wxs

如何使用？

在使用组件的页面的main.json文件中引入：

{
  "usingComponents": {
    "van-button": "/static/vant/button/index"
  }
}

使用方法：

<van-button>测试Buttonvan-button>

在来一个例子，Notify消息通知使用方式。

在main.json中引入组件：

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
    "van-notify": "/static/vant/notify/index"
  }
}

仅仅引入组件还不能使用Notify，还需要在.vue文件中通过import引入方法：

import Notify from '@/../static/vant/notify/notify' // <--- 注意这里引入格式`@/../static/xxx`, @是`src`的别名。

在templete中添加van-notify节点id="van-notify"。

Notify('通知内容') // 通过该方法调用。<---- 默认查找id="van-notify"节点。
// 也可以自定义配置
Notify({
    text: '自定义配置',
    duration: 1000,
    selector: '#custom-notify', // <---- 自定义id
    backgroundColor: '#1989fa'
  })

完整示例代码：

<template>
  <div class="contianer">
    <van-button @click="onNotify">测试按键van-button>
    <van-button @click="onNotify2">自定义配置van-button>
	<van-notify id="van-notify">van-notify>
    <van-notify id="custom-notify">van-notify>
  div>
template>

<script>
import Notify from '@/../static/vant/notify/notify'
export default {
  data () {
    return {
    }
  },
  methods: {
    onNotify () {
      Notify('通知内容')
    },
    onNotify2 () {
      Notify({
        text: '自定义配置',
        duration: 1000,
        selector: '#custom-notify',
        backgroundColor: '#1989fa'
      })
    }
  }
}
script>

小结

上面通过两个简单的示例学习了如何在mpvue中使用小程序原生UI组件库vant weapp。这里只是简单的入门，后面还有很多坑要踩。

如果有问题推荐的搜素方案：

• vant-weapp官方库和issues ：官方库和官方issues是最主要的问题解决方案集中地。
• Rychou/mpvue-vant : 其他团队在使用vant weapp整理的问题。
• 另外还有小程序官方文档、mpvue文档、vue文档可供参考。