4 UI libraries to use in your WeChat Mini Programs 微信小程序

Thibault Genaitay
Jun 14, 2019 · 6 min read

We’re all seeking for additional #velocity and #productivity to release our next apps. Following up on the Best Frameworks to develop a Mini Program, this time I curated the most popular UI libraries to help you speed up your projects.

Need a calendar, slider, or accordion? Stop reinventing the wheel 😉 Start with a UI library!

Pre-requisites

Table of Contents

  • WeUI by WeChat
  • Vant by Youzan
  • Wux
  • Color UI

WeUI by WeChat

The UI library by WeChat official design team, including useful widgets/modules. A little plain, but super classic. Your visitors will feel at home.

Preview:

How to use it?

  • Copy the initial App.wxss in your Mini Program project
  • Navigate examples of components and use all relevant wxml + js code provided

Vant by Youzan

Vant Weapp is provided by the popular SaaS e-commerce platform Youzan.

If you want to make a Mini Program for e-commerce, catering, take-out platform, ticket booking, Vant is a great choice.

Preview:

How to use it?

This library is based on WeChat’s Custom Components feature. We can create and reuse them in our apps. Read the WeChat official documentation here.

  • Navigate all examples and register/use components you need.

📌 Most components require a set of data and some custom functions, don’t forget to take the JS code!

One by one

You can add ONE custom component at the time and use it in your page. Example: <van-card/>

page.JSON:

page.WXML:

page.JS:

… or ALL at once

You can also register ALL components at once in your app.json and use them later in your pages.

app.JSON

page.WXML

page.JS

Wux

Wux is an open source library with the highest diversity: over 60 reusable and extensible WeChat Mini Program Custom Components.

You will want to check its progress loops, skeleton screens, filter bars, numeric keypads, and result pages.

Preview

How to use it?

Example: wux-button

page.JSON

page.WXML

page.WXSS

Color UI

ColorUI is a component library that focuses on visual interaction. Compared to WeUI’s plain style, ColorUI has bright colors and diverse shapes. You will like its timelines, step bars, chat pages, modal windows.

Preview

How to use it

  • Clone or download the Color UI repo and move the demo/colorui/ folder inside your Mini Program project
  • Inside app.WXSS, import two stylesheets:
  • This library is using a custom navigation bar! Add this inside app.JSON:
  • Inside app.JS:
  • At the top of any page.WXML, always use:
  • Navigate examples of pages or components and copy paste all relevant WXML + JS code provided

That’s it?

The 4 UI libraries above are my short-list for beginners. Also worth noting:

Have you bookmarked any other?

Feel free to reach out 🙌


Le Wagon is a coding school bringing technical skills to creative individuals in China. Rated 1st Coding Bootcamp worldwide, its Full Stack curriculum empowers participants to learn JavaScript and design WeChat Mini Programs from scratch.

Related links
👉 Entrepreneurs: learn how to make your own WeChat mini program
👉 Recruiters: WeChat developers for hire

Connect with our teams:
🚩 Le Wagon in Chengdu
🚩 Le Wagon in Shanghai
🚩 Le Wagon in Shenzhen

Le Wagon

Stories from our community on coding, product and entrepreneurship.

Thibault Genaitay

Written by

Bringing tech skills to creative people, one bootcamp at a time.

Le Wagon

Le Wagon

Stories from our community on coding, product and entrepreneurship.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade