Vant Weapp 1.0 来了

2018 年 8 月 11 日，我们发布了 Vant Weapp 的首个版本。16 个月以来，我们收到了 27 位开发者贡献的 1000 多次提交，也处理了 1200 多个 issue，发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k，长期是 Github 上 star 数最多的第三方小程序 UI 组件库。

现在，我们很高兴向大家介绍 Vant Weapp 1.0 版本。

经过 2 个月的开发与 beta 测试，我们为大家带来了 11 个全新的组件，重构了多个现有组件，增加了覆盖所有组件的主题定制特性。并且，为了配合 Vant 家族的发展，正式将包名变更为 @vant/weapp。

大家可以扫描下方小程序码体验 Vant Weapp 1.0 示例

一、新版本介绍

1.1 新的组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

Grid 宫格，用于展示内容或进行页面导航
Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示
Circle 环形进度条，告知用户当前的状态和进度
Overaly 遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
Divider 分割线，区隔内容的分割线
Sticky 粘性布局，与 CSS 中 position:sticky属性实现的效果类似
Skeleton 骨架屏，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果
IndexBar 索引栏，通讯录中的字母索引栏，用于长列表快速索引
Uploader 文件上传，上传一个或多个文件
CountDown 倒计时，用于显示活动倒计时、短信验证码等
DropdownMenu 下拉菜单，用于列表的分类选择、筛选及排序

1.2 样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS自定义属性的特性。最终，我们基于CSS自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS组定义属性进行样式定制，具体使用姿势可查看更新日志。

1.3 不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照更新日志依次检查，大部分项目可以无痛升级。

三、未来

Vant Weapp 会积极探索与腾讯云开发结合的可能性，为大家带来更好的使用体验。不久，我们将再次与大家见面。

写在最后的话

感谢社区长期以来为 Vant Weapp 提供的贡献与反馈，让我们始终与开发者站在一起。如果您在使用 Vant Weapp 的过程中遇到任何问题，欢迎在 Github 向我们反馈。

Vant Weapp 1.0 的主要贡献者为(按首字母排序)：@Andyliwr @aphasic @chenjiahan @creeperdance @Eamonnzhang @Fyerl @JakeLaoyu @jerryni @kongyeah @Lindysen @linrz @rex-zsd @thoamsy @ylethe 。

创作场景

Vant Weapp 1.0 正式版发布