Skip to content
轻量、可靠的小程序 UI 组件库
JavaScript TypeScript CSS Shell
Branch: dev
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update PULL_REQUEST_TEMPLATE.md Sep 6, 2019
build build(compiler): show gulp stdout while develop & fix tscpaths not wo… Sep 10, 2019
dist breaking change: remove SwitchCell component (#1968) Sep 5, 2019
docs feat(Tag): remove computed (#1999) Sep 9, 2019
example feat(Grid): add Grid component (#2016) Sep 11, 2019
lib breaking change: remove SwitchCell component (#1968) Sep 5, 2019
packages fix(TreeSelect): setData (#2028) Sep 15, 2019
.editorconfig 调整目录结构 Dec 19, 2016
.eslintignore add eslintignore Aug 10, 2018
.eslintrc [improvement] update lint rules (#1801) Jul 26, 2019
.gitignore Update .gitignore Nov 23, 2018
.npmignore add npmignore Dec 11, 2018
.stylelintrc build: add stylelint (#1982) Sep 7, 2019
.travis.yml build: add travis.yml (#1985) Sep 8, 2019
LICENSE add MIT license Aug 2, 2018
README.md Update README.md Aug 15, 2019
babel.config.js [build]: compile typescript with gulp-typescript instead of babel Mar 8, 2019
browserslist [build] update browserslist (#660) Sep 28, 2018
package.json feat(Icon): add down、wap-home icon (#2014) Sep 10, 2019
postcss.config.js [build]: upgrade dependence & use cssnano instead of clean-css Mar 22, 2019
tsconfig.example.json build: update compiler Aug 12, 2019
tsconfig.json build: update compiler Aug 12, 2019
tsconfig.lib.json build: update compiler Aug 12, 2019
yarn.lock feat(Icon): add down、wap-home icon (#2014) Sep 10, 2019

README.md

logo

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

npm version downloads downloads

🔥 文档网站   🚀 Vue 版


介绍

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

预览

扫描下方小程序二维码,体验组件库示例:

使用之前

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

安装

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

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

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --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目录添加进去就可以预览示例了。

基础库版本

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

微信讨论群

欢迎大家在微信上联系我们,添加下方微信并注明『交流 vant-weapp』即可

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的,目前共有 100 多名前端工程师,分布在业务中台、电商、零售、美业、资产、赋能等业务线。

我们热爱分享和开源,崇尚用工程师的方式解决问题,因此造了很多工具来解决我们遇到的问题,目前我们维护的开源产品有:

我们正在寻找更多优秀的小伙伴,一起拓展前端技术的边界,期待你的加入!

链接

开源协议

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

You can’t perform that action at this time.