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

Thibault Genaitay
Jun 14, 2019 · 6 min read
Image for post
Image for post

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

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:

Image for post
Image for post

How to use it?

git clone https://github.com/Tencent/weui-wxss.git
  • Copy the initial App.wxss in your Mini Program project

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:

Image for post
Image for post

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.

git clone https://github.com/youzan/vant-weapp.git
  • 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:

{
"usingComponents": {
"van-card": "/dist/card/index"
}
}

page.WXML:

<van-card
num="2"
price="2.00"
desc="描述信息"
title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
thumb="{{ imageURL }}"
/>

page.JS:

data: {
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
}
Image for post
Image for post

… 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

[...]"usingComponents": {
"van-action-sheet": "/dist/action-sheet/index",
"van-area": "/dist/area/index",
"van-badge": "/dist/badge/index",
"van-badge-group": "/dist/badge-group/index",
"van-button": "/dist/button/index",
"van-card": "/dist/card/index",
"van-cell": "/dist/cell/index",
"van-cell-group": "/dist/cell-group/index",
"van-checkbox": "/dist/checkbox/index",
"van-checkbox-group": "/dist/checkbox-group/index",
"van-col": "/dist/col/index",
"van-dialog": "/dist/dialog/index",
"van-field": "/dist/field/index",
"van-goods-action": "/dist/goods-action/index",
"van-goods-action-icon": "/dist/goods-action-icon/index",
"van-goods-action-button": "/dist/goods-action-button/index",
"van-icon": "/dist/icon/index",
"van-loading": "/dist/loading/index",
"van-nav-bar": "/dist/nav-bar/index",
"van-notice-bar": "/dist/notice-bar/index",
"van-notify": "/dist/notify/index",
"van-panel": "/dist/panel/index",
"van-popup": "/dist/popup/index",
"van-progress": "/dist/progress/index",
"van-radio": "/dist/radio/index",
"van-radio-group": "/dist/radio-group/index",
"van-row": "/dist/row/index",
"van-search": "/dist/search/index",
"van-slider": "/dist/slider/index",
"van-stepper": "/dist/stepper/index",
"van-steps": "/dist/steps/index",
"van-submit-bar": "/dist/submit-bar/index",
"van-swipe-cell": "/dist/swipe-cell/index",
"van-switch": "/dist/switch/index",
"van-switch-cell": "/dist/switch-cell/index",
"van-tab": "/dist/tab/index",
"van-tabs": "/dist/tabs/index",
"van-tabbar": "/dist/tabbar/index",
"van-tabbar-item": "/dist/tabbar-item/index",
"van-tag": "/dist/tag/index",
"van-toast": "/dist/toast/index",
"van-transition": "/dist/transition/index",
"van-tree-select": "/dist/tree-select/index",
"van-datetime-picker": "/dist/datetime-picker/index",
"van-rate": "/dist/rate/index",
"van-collapse": "/dist/collapse/index",
"van-collapse-item": "/dist/collapse-item/index",
"van-picker": "/dist/picker/index"
}

page.WXML

<van-steps
steps="{{ steps }}"
active="{{ active }}"
/>
<van-steps
steps="{{ steps }}"
active="{{ active }}"
direction="vertical"
active-color="#f44"
/>
<van-button bind:click="nextStep">下一步</van-button>

page.JS

data:
{
active: 0,
steps: [
{
text: '步骤一',
desc: '描述信息'
},
{
text: '步骤二',
desc: '描述信息'
},
{
text: '步骤三',
desc: '描述信息'
},
{
text: '步骤四',
desc: '描述信息'
}
]
},
nextStep() {
this.setData({
active: ++this.data.active % 4
});
}
Image for post
Image for post

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

Image for post
Image for post

How to use it?

Example: wux-button

page.JSON

"usingComponents": {
"wux-button": "../../dist/button/index"
}

page.WXML

<wux-button size="small" block type="balanced"> OK </wux-button>
<wux-button size="default" block outline type="balanced"> OK </wux-button>
<wux-button size="large" block type="dark"> OK </wux-button>

page.WXSS

@import '../../dist/styles/index.wxss';
Image for post
Image for post

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

Image for post
Image for post

How to use it

  • Clone or download the Color UI repo and move the demo/colorui/ folder inside your Mini Program project
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
  • This library is using a custom navigation bar! Add this inside app.JSON:
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
  • Inside app.JS:
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
  • At the top of any page.WXML, always use:
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
  • Navigate examples of pages or components and copy paste all relevant WXML + JS code provided
Image for post
Image for post

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 🙌

Image for post
Image for post

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…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store