ZanUI-WeApp -- 一个颜值高、好用、易扩展的微信小程序 UI 库

缘起

随着微信小程序的上线，现在小程序的开发真是火的一踏糊涂啊～～好在我们第一时间拿到了内测账号，然后立马组织人员投入到小程序的开发浪潮中

在几个月马不停蹄的开后，我们于1月9号同时上线了有赞微商城小程序和有赞精选小程序现在有几千的商家使用有赞微商城系统自助搭建属于自己的微信小程序

在开发期间，我们踩过不少的坑，克服了很少难题，也给微信小程序提了不少的bug和建议。但最重要的我们产出了自己的一套微信小程序UI库ZanUI-WeApp并开源了，地址：https://github.com/youzan/zanui-weapp

ZanUI-WeApp

ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。

使用

使用 [ZanUI-WeApp] 前请确保已经学习过微信官方的 [小程序简易教程] 和 [小程序框架介绍]。
然后用 [Bower] 将 [ZanUI-WeApp] 添加到你的项目中使用。
你也可以 fork 出一份你自己的 [ZanUI-WeApp]，这样可以获得更稳定的代码和更方便的进行个性定制。

我们推荐在你的app.wxss直接引入zanui-weapp/dist/index.wxss。

根据功能的不同，可以将组件大致的分为4类：

1. 简单组件

如按钮组件，只要按照wxml结构写就好了

<!-- example/btn/index.html -->
<view class="zan-btn">按钮</view>

2. 复杂组件

如加载更多组件，需要先引入定义好的模版，然后给模版传递数据

<!-- example/loadmore/index.html -->
<!-- 引入组件模版 -->
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
<!-- 加载中 -->
<template is="zan-loadmore" data="{{loading: true}}" />
<!-- 一条数据都没有 -->
<template is="zan-loadmore" data="{{nodata: true}}" />
<!-- 没有更多数据了 -->
<template is="zan-loadmore" data="{{nomore: true}}" />

3. 带事件回调的组件

如数量选择组件，需要先引入模版，然后给模版传递数据

<!-- example/quantity/index.html -->
<import src="path/to/zanui-weapp/dist/quantity/index.wxml" />
<template is="zan-quantity" data="{{ ...quantity, componentId: 'customId' }}" />

然后通过Zan.Quantity把相关回调注入到页面中

// example/quantity/index.js
var Zan = require('path/to/zanui-weapp/dist/index');

Page(Object.assign({}, Zan.Quantity, {
  data: {
    quantity: {
      quantity: 10,
      min: 1,
      max: 20
    },
  },

  handleZanQuantityChange(e) {
    // 如果页面有多个Quantity组件，则通过唯一componentId进行索引
    var compoenntId = e.componentId;
    var quantity = e.quantity;
    this.setData({
      'quantity.quantity': quantity
    });
  }
}));

4. API类组件

如Toast组件，需要先引入模版，并在页面上使用。

注意zanToast这个数据也是通过Zan.Toast注入到页面的

<!-- example/toast/index.html -->

<import src="path/to/zanui-weapp/dist/toast/index.wxml" />

<view bindtap="showToast">显示toast</view>

<template is="zan-toast" data="{{ zanToast }}"></template>

将API注入到页面后，就可以通过this来直接调用相应的API了

<!-- example/toast/index.js -->

var Zan = require('path/to/zanui-weapp/dist/index');

Page(Object.assign({}, Zan.Toast, {
  showToast() {
    this.showZanToast('toast的内容');
  }
}));