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

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

• Javascript / CSS fundamentals
• Basics of WeChat Mini Programs: framework, syntax, functions… (watch my early 2018 crash course)
• Understand WeChat’s Custom Components feature, used by most libraries here. Find the documentation.

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.

• WeUI WXSS 👉 WXSS Library
• WeUI Design 👉Sketch / Photoshop package

Preview:

How to use it?

• Clone or download the WeUI WXSS repo and move the dist/style/ folder inside your Mini Program project

git clone https://github.com/Tencent/weui-wxss.git

• 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.

• Clone or download the Vant Weapp repo and move the dist/ folder inside your Mini Program project

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'
  }

… 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
	});
}

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?

• Clone or download the Wux Weapp repo and move the dist/ folder inside your Mini Program project
• Navigate all examples on Github or the official documentation and register/use components you need.

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';

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:

@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

That’s it?

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

• iViewUI by Talking Data
• TaroUI
• MinUI

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