Skip to content

📱 Vant Weapp - 小程序开发的得力助手

让小程序开发变得简单而优雅!Vant Weapp 是有赞移动端组件库 Vant 的微信小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

无论你是小程序开发新手还是资深开发者,Vant Weapp 都能让你的开发效率翻倍!它不仅继承了 Vant 的优秀基因,更针对小程序环境进行了深度优化,让你在小程序的世界里也能享受到现代化组件库的便利。

✨ 核心特性

  • 🚀 组件丰富 - 70+ 个高质量组件,覆盖移动端主流场景,从基础到复杂,应有尽有
  • 🚀 类型安全 - 使用 TypeScript 编写,提供完整的类型定义,让代码更健壮
  • 🚀 零依赖 - 不依赖三方 npm 包,轻量纯净,告别依赖地狱
  • 💪 主题定制 - 支持主题定制,内置 700+ 个主题变量,打造专属视觉风格
  • 💪 暗黑模式 - 原生支持暗黑模式,跟上时代潮流
  • 💪 国际化 - 支持国际化,内置 30+ 种语言包,走向世界不是梦
  • 📖 文档完善 - 提供丰富的中英文文档和组件示例,学习无障碍
  • 🍭 构建灵活 - 支持 npm 构建模式和原生构建模式,适应不同开发习惯

🚀 快速安装

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

选择你喜欢的包管理器,一键安装即可:

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

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

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

方式二:下载代码

如果你更喜欢传统方式,也可以直接下载源码:

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

然后将 dist 目录拷贝到你的项目中即可。

🎯 使用组件

使用 Vant Weapp 就像搭积木一样简单!以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可。

json
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

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

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

就是这么简单!一个漂亮的按钮就出现在你的小程序里了。

📱 在线体验

想要快速体验 Vant Weapp 的魅力?扫描下方小程序码,立即感受组件库的强大功能:

[小程序码图片]

🔗 相关链接


📚 相关内容

基于Vant构建的企业级移动端解决方案