Vand weapp 1.0 official release


1 is coming.

On August 11, 2018, we released the first version of vant weapp. In the past 16 months, we have received more than 1000 submissions from 27 developers, processed more than 1200 issues and released more than 50 versions. GitHub’s star number has increased from 5K to 11K. It has long been the third-party applet UI component library with the largest number of stars on GitHub.

<img style=”zoom:25%;” />

Now, we are very pleased to introduceVand weapp version 1.0

After 2 months of development and beta testing, we have brought you 11 new components, reconstructed many existing components, and added theme customization features covering all components. In addition, in line with the development of the vant family, the package name was officially changed to@vant/weapp

You can scan the app code below to experience the example of Vant Weapp 1

Vand weapp 1.0 official release

Introduction to the new version

New components

In vant weapp version 1.0, we added 11 practical basic components:

  • Grid grid for displaying content or navigating pages
  • Image image, enhanced image label, supports image lazy loading and loading failure prompt
  • Circle progress bar, which tells the user the current status and progress
  • Overaly mask layer, used to emphasize specific page elements and prevent users from other operations
  • Dividers, dividing lines that separate content
  • Sticky layout, and CSSposition: stickyThe effect of attribute implementation is similar
  • Skeleton screen, the space occupying block displayed in the area to be loaded, provides the transition effect during the interface loading process
  • Index bar, the alphabetic index bar in the address book, used for long list quick index
  • Uploader file upload, upload one or more files
  • Countdown, used to display activity countdown, SMS verification code, etc
  • Dropdownmenu drop-down menu, used for sorting, selection, filtering and sorting of lists

Vand weapp 1.0 official release

Custom style

At the beginning of the 1.0 iteration plan, we kept thinking about how to provide users with the ability to dynamically switch theme styles?

The environment of wechat applets is very special. There is no dynamic code loading mechanism, and wechat limits the size of the main package and the total size of the code. The traditional customization based on the preset style is too bloated, which is no longer suitable for the environment of wechat applet.

The component model of wechat applet custom component is equivalent to a simplified version of shadow dom. Fortunately, the applet also supports the features of CSS custom attributes. Finally, we design a style customization scheme based on CSS custom attributes, which is flexible and convenient for developers to use and easier for component maintenance.

Since version 1.0, all components in vant weapp support style customization through CSS group definition properties. For specific usage of posture, you can view relevant documents

Vand weapp 1.0 official release

Incompatible updates

Version 1.0 contains a small number of incompatible updates, mainly name adjustment and removal of individual properties. For projects that are using version 0. X, please check according to the update log. Most projects canPainless upgrading


Vant weapp will actively explore the possibility of combining with Tencent cloud development to bring you a better experience. Soon, we will meet again.


Thanks to the community’s long-term contribution and feedback to vant weapp, let’s always stand with the developers. If you have any problems using the van weapp, please feel free to give us feedback at GitHub.

Vant weapp 1.0’s main contributors are (in alphabetical order): @ andyliwr @ apasic @ chenjiahan @ creperdance @ eamonzhang @ fyerl @ jakelaoyu @ jerryni @ kongyeah @ lindysen @ linrz @ Rex ZSD @ thomsy @ ylethe.

Welcome to the “coder” official account.