axure 小程序 lib_基于Vant的小程序 UI 组件库Vant Weapp

框架简介

Vant Weapp 是有赞移动端组件库 Vant (一款基于Vue 轻量的移动UI框架) 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。Vant Weapp基于有赞 Zanui 组件库进行的品牌升级,对于仍在使用 Zanui 的用户,建议逐渐使用 Vant Weapp 替换原有的组件。Vant Weapp有很多电商相关组件比如省市区选择、商品卡片、提交订单、商品导航等等开箱即用,对于小程序电商非常友好,当然其他组件也非常丰富,满足大多小程序的前端开发需求,目前版本号是0.5.14虽然还没到1.0.0,但是github star 数量已经超过9.4K,非常值得小程序开发者关注学习。

Logo

1b968ef8ac917f2c843ce2ad25b6e841.png

小程序体验二维码及在线示例截图

a948bcd6732d26aebf6a6c9d99ded1be.png
8548beca4facd8986e91e6a261f1f8e6.png

组件列表

  • 基础组件

Button 按钮

Cell 单元格

Icon 图标

Layout 布局

Popup 弹出层

Transition 动画

  • 表单组件

Checkbox 复选框

DatetimePicker 时间选择

Field 输入框

Picker 选择器

Radio 单选框

Rate 评分

Search 搜索

Slider 滑块

Stepper 步进器

Switch 开关

SwitchCell 开关单元格

  • 反馈组件

ActionSheet 上拉菜单

Dialog 弹出框

Loading 加载

Notify 消息通知

SwipeCell 滑动单元格

Toast 轻提示

  • 展示组件

Collapse 折叠面板

NoticeBar 通告栏

Panel 面板

Progress 进度条

Steps 步骤条

Tag 标记

TreeSelect 分类选择

  • 导航组件

Badge 徽章

NavBar 导航栏

Tab 标签页

Tabbar 标签栏

  • 业务组件

Area 省市区选择

Card 商品卡片

SubmitBar 提交订单栏

GoodsAction 商品导航

本地开发

  • 安装

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

# npmnpm i vant-weapp -S --production# yarnyarn add vant-weapp --production

方式二. 下载代码

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

git clone https://github.com/youzan/vant-weapp.git
  • 使用组件

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

某些小程序框架会要求关闭ES6转ES5选项,可以引入lib目录内es5版本的组件

es6

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

es5

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

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

按钮

打开微信开发者工具,导入example目录的项目就可以预览示例了。

vant webapp官网请点击了解更多。

相关资源:vant-weapp.zip
已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页