youzan/vant-weapp

轻量、可靠的小程序 UI 组件库

轻量、可靠的小程序 UI 组件库

🔥 文档网站（国内）   🌈 文档网站（GitHub）   🚀 Vue 版

---

介绍

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

预览

扫描下方小程序二维码，体验组件库示例。注意：因微信审核机制限制，目前示例小程序不是最新版本，可以 clone 代码到本地开发工具预览

使用之前

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码，并将 dist 目录拷贝到自己的项目中。

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

使用组件

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

接着就可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

在开发者工具中预览

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

打开微信开发者工具，把vant-weapp/example目录添加进去就可以预览示例了。

PS：关于 van-area Area 省市区选择组件，地区数据初始化可以直接在云开发环境中导入vant-weapp/example/database_area.JSON 文件使用。

基础库版本

Vant Weapp 最低支持到小程序基础库 2.6.5 版本。

链接

• 意见反馈
• 设计资源
• 更新日志
• 官方示例

核心团队

以下是 Vant 和 Vant Weapp 的核心贡献者们：

chenjiahan	cookfront	wangnaiyi	pangxie	rex-zsd	nemo-shen

Lindysen	JakeLaoyu	landluck	wjw-gavin	inottn	zhousg

贡献者们

感谢以下小伙伴们为 Vant Weapp 发展做出的贡献：

开源协议

本项目基于 MIT协议，请自由地享受和参与开源。

vant-weapp's Issues

tab

这个tab选项卡，切换后页面内容如何渲染呢

复杂组件怎么用呢

普通页面在这种架构下面加东西
Page({

/**

• 页面的初始数据
  */
  data: {

},

/**

• 生命周期函数--监听页面加载
  */
  onLoad: function (options) {

},

复杂组件：
Page是这样的

Page(
Object.assign({}, Zan.Switch, {
}

他们之间怎么兼容处理呢，谢谢

你这个东西会持续更新么 我准备项目中用你的这个库

希望作者 持续更新啊 拜托了

找不到 _handelZanStepperPlus

按照例子里面的我添加了 Stepper 计数器，但是报 找不到 _handelZanStepperPlus 方法

Page(Object.assign({}, Zan.Stepper, {
data: {
showDialog:false,
stepper: {
stepper: 10,
min: 1,
max: 20
},
},

handleZanStepperChange(e) {
// 如果页面有多个Stepper组件，则通过唯一componentId进行索引
var compoenntId = e.componentId;
var stepper = e.stepper;
console.log(compoenntId)
console.log(stepper)
this.setData({
'stepper.stepper': stepper
});
},

[new feature] Calendar: 增加日历模块

目前没有日历模块，希望增加一个日历模块

select 缺少name造成form获取不到value

dist\select\index.wxml 第二行
radio-group 增加： name="{{ name || componentId || '' }}"

switch开关在ios真机上的bug

按照首页内容在真机上预览，switch开关会出现一次抖动
iphone7 ios11.0.3 微信6.5.21

能写一份使用方法吗，刚开始学习小程序，不太懂

能写一份使用方法吗，刚开始学习小程序，不太懂

使用"单元格"时，icon无法使用

VM6063:2 Failed to load font https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.woff2
net::ERR_CACHE_MISS
From server 183.222.230.253

报错如上，请问下应该怎么解决？

希望有一个api文档的官网或者是规范的文档

ActionSheet 增加 openType选项

场景是ActionSheet里需要触发转发，而页面内发起转发需要通过给 button 组件设置属性 open-type="share"，但现有action view是text而不是button。

不知各位意见如何？

大神，请问这个API注入是什么原理啊？新手求教

比如那个Toast的API注入，看不懂...

为什么样式不用rpx啊？大小屏兼容有点问题

字号大小

新增功能日期选择器

发现采用的时候少一个日期选择器望早日添加，保证ui统一

有赞ui的1PX线条在Android手机里粗，影响视觉效果。IOS正常

如题

在小程序微信开发工具中会报字体加载错误

VM2807:2 Failed to load font https://b.yzcdn.cn/zanui-weapp/zanui-weapp-icon-4381aded05.woff2
net::ERR_CACHE_MISS
From server 27.221.30.38

field组件外层使用zan-panel会造成input边框不显示

<view class="zan-panel"> <view class="zan-cell"> <template is="zan-field" data="{{ ...config.radius.notitle, componentId: 'test' }}"></template> </view> </view>

这个tast会不显示input元素的边框。

组件field怎么清空输入框呢？

请认真写 ISSUE 的标题，会用于生成 change log。

**请确认是需要 新增功能 还是 提交bug **

** 如果是 bug，请提供复现步骤，可能的话，可以在 https://jsfiddle.net 或者类似平台上提供一个 demo **

添加进去zanUI-webapp后控制台显示有错误

*新增功能* 能否在example的field中增加picker-view的示例？拜托了

如题！Thanks！

*新增功能*加一个九宫格的功能。

请认真写 ISSUE 的标题，会用于生成 change log。

**请确认是需要 新增功能 还是 提交bug **

** 如果是 bug，请提供复现步骤，可能的话，可以在 https://jsfiddle.net 或者类似平台上提供一个 demo **

Field 输入框

请问不能用吗？

*提交BUG*Setting data field "zanTopTips.timer" to undefined is invalid.

其实就是toptips组件的demo，控制台会报错

整体字号偏小，而且各页面字号大小不一

整体字号偏小，对眼花的老年人不太友好；
而且各页面字号大小不一，看起来有点儿乱。
希望能优化一下

CAPSULE 胶囊 样式有点别扭呀，文字有点歪。

文字都有点靠下了

请教个问题啊？怎么全局引入模块呢？

例如Toast，好多地方会用到，怎么全局引入呢？

这个不算是bug, 只是显示看上去有问题

胶囊的样式
开发工具及安卓端
胶囊内的文字看上去有些偏下,取消了.zan-capsule__left,.zan-capsule__right中的box-sizing:border-box显示正常

我想知道clone话。大概有多大的内容呢？

我们知道小程序限制2M的的大小。SO。。。。。如果UI太大的话，也没太大的意义了!

所以，我的问题是：
是需要用什么就丢什么进文件夹然后引什么呢？
还是必须要全部丢进去文件夹。需要的时候引呢？
谢谢，期待回答！~

[new feature]增加actionSheet

首先赞一个。
另外提议增加actionSheet组件

基于官方自定义组件封装

请问后续会用官方自定义组件的形式封装组件嘛~

自己写一个网络请求类, 怎么使用zanToast展示提示信息啊? 只有requestManager.js一个文件, 没有对应的html

如题

我对这个bower等包管理器的东西不太熟，如果我直接把dist文件夹下的文件全部拖到我的工程里，可以用吗? bower好像自己都已经放弃了，首页上推荐别的😂

如题

小程序filed输入框详细地址会跟着往下移动

请认真写 ISSUE 的标题，会用于生成 change log。

**请确认是需要 新增功能 还是 提交bug **

** 如果是 bug，请提供复现步骤，可能的话，可以在 https://jsfiddle.net 或者类似平台上提供一个 demo **

请问可以支持wepy吗？

一些写法wepy不支持。
还是有什么黑科技？

在wapy的微信小程序开发的框架里怎么使用这个组件

请认真写 ISSUE 的标题，会用于生成 change log。

**请确认是需要 新增功能 还是 提交bug **

** 如果是 bug，请提供复现步骤，可能的话，可以在 https://jsfiddle.net 或者类似平台上提供一个 demo **

Popup代码执行的结果和和 "赞组件库演示"小程序两个不一样

Popup代码执行的结果和和 "赞组件库演示"小程序两个不一样。

*提交bug **
这是将github上面的代码down下来执行的结果

这是"赞组件库演示"小程序执行的结果

代码没更新的样子？？

一像素边框

后续考虑加入一像素边框兼容嘛？我自己在项目里改写了panel样式用官方button组件的写法实现了一像素边框，目前没有什么问题。

tab 点击切换，当前选中的没有高亮

点击不会高亮

请问字体是使用什么工具生成的？ 我用了很多工具。兼容性都不理想

小程序

在 debug 模式关闭的情况下，Field 依然会打印表单信号

ISSUE 类型

提交 Bug

ISSUE 问题描述

在 Debug 状态为 False 时，依然会打印具体事件。

可行的解决方案

1. 默认情况下不输出相关事件
2. 在提供的参考 demo 中对事件进行打印
3. 通过 app.json/app.js 中的参数进行判断是否打印相关信息。

如何复现 Bug

调用 Field 组件，参考代码
query.js

const { Field, extend } = require('../../zan/index');
Page(extend({}, Field, {
  data: {
  }, 
  formSubmit:function(e){
    console.error(e.detail.value);
  },
  handleZanFieldChange({ componentId, detail }) {
    /*
     * componentId 即为在模板中传入的 componentId
     * 用于在一个页面上使用多个 tab 时，进行区分
     * detail 即输入框中的内容
     */
    /*
     * 处理函数可以直接 return 一个字符串，将替换输入框的内容。
     */
  },
  // 输入框聚焦时触发
  handleZanFieldFocus({ componentId, detail }) { },
  // 输入框失焦时触发
  handleZanFieldBlur({ componentId, detail }) { },
}));

query.xml

<view class="doc-title zan-hairline--bottom zan-hairline--bottom">论文查询</view>

<import src="../../zan/field/index.wxml" />
<form bindsubmit="formSubmit">

  <template is="zan-field" data="{{ title: '作者名',name : 'author', inputType:'text', type: 'input', placeholder: '请输入作者姓名' }}"></template>

  <template is="zan-field" data="{{ title: '电话号码',name : 'phone', inputType:'text', type: 'input', placeholder: '请输入您留下的电话号码' }}"></template>

  <view class="zan-btns">
    <button class="zan-btn zan-btn--primary" formType="submit">提交信息</button>
    <button class="zan-btn" formType="reset">重置数据</button>
  </view>
</form>

Bug 截图

多页面情况下，TopTips 无法自动清除

重现步骤：

1. 标签页 A 持有一个 TopTips，并在 onLoad 时调用 showZanTopTips
2. 标签页 B 持有一个 TopTips，并在 onLoad 时调用 showZanTopTips
3. 先点击标签页 A，可观察到 A 的 TopTips 正常显示
4. 再点击标签页 B，可观察到 B 的 TopTips 正常显示，并在三秒后自动隐藏
5. 再点击标签页 A，可观察到 A 的 TopTips 一直存在，不被自动清除

原因排查：

文件 /dist/toptips/index.js 中全局持有相同的 timer，而 data 数据由 Page 持有；导致第二次调用 showZanTopTips 时 timer 请重置，但前一个 Page 的 data 数据没有被重置。

解决方法：

参考 zantoast 的实现

tab标签

1.01.1712070没有显示tab标签！

如何同时使用noticebar与tab标签，js中应该如何写。这部分是不一样的

请认真写 ISSUE 的标题，会用于生成 change log。

**请确认是需要 新增功能 还是 提交bug **

** 如果是 bug，请提供复现步骤，可能的话，可以在 https://jsfiddle.net 或者类似平台上提供一个 demo **

Tab挡住拉刷新的加载图标

ISSUE 类型
提交 Bug

ISSUE 问题描述
使用Tab的固定在顶部后，下拉刷新时tab由于一直固定导致看不到后面的加载图标了。

徽章的数字不垂直居中

好像因为font-family:tahoma;的缘故偏上了

switch 在iOS(11.2.1)上面，开关效果会出现两次

zan-ellipsis样式

需要设置固定宽度，如果设置width:100%就无效了；通常需求是需要宽度100%，所以建议在父元素加上width:0，就不需要设置固定宽度了。另外，通常会在列表中用到文字缩略显示，建议可以在列表中单独加入。
另：zanui-weapp可以多扩充一点，比如列表（两行内容，带头像列表），弹窗，表单等等，可以参考腾讯的frozenui

将现有版本发布最新版小程序

问题描述

由于需要在移动端查看最新的组件样式(在开发者工具中切换较为麻烦)，能否发布代码库中的版本到小程序平台上？

举例：目前小程序中的 Panel 和源码中的 Panel 并不相同。

组件如何在 js 为模板添加 class名 ?

组件如何在 js 为模板添加 class名 ?

疑问

config.js:
module.exports = {
  // 圆角输入框
  radius: {
    totalPrice: {
      right: true,
      mode: 'wrapped',
      className: 'd-none',
      title: '消费总额',
      inputType: 'number',
      placeholder: '询问收银员后输入'
    }
};

wxml:
 <template
    is="zan-field"
    class="d-none" 
    data="{{ ...config.radius.totalPrice }}"></template>

• 在 wxml 中无法添加 class 名;
• 在 config.js 的属性添加关键词 className 也无法生效;

---

可否有一个快速检索相关功能的工具