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

按照功能的不同，主要的组件类型大概分为三类的组件简易的组件、带事件回调的组件、API类组件。

1.先从git上下载下来组件源码包https://github.com/youzan/zanui-weapp

2.把dist文件直接复制到微信小程序的根目录下

3.根据需求引入你需要的组件（具体用法详见example目录下）

3.1简单组件

xxx.wxml

viewclass="zan-btn"clickit/view//直接引用按钮的组件

1.3.2带事件回调的组件(摘自https://cnodejs.org/topic/589d625a5c8036f7019e7a4a)

2.先引入模板，然后给模板传递数据

3.xxx.wxml

importsrc=".../to/zanui-weapp/dist/quantity/index.wxml"/templateis="zan-quantity"data="{{...quantity,componentId:'customId'}}"/

4.xxx.js

varZan=require('path/to/zanui-weapp/dist/index');Page(Object.assign({},Zan.Quantity,{data:{quantity:{quantity:10,min:1,max:20},},handleZanQuantityChange(e){//如果页面有多个Quantity组件，则通过唯一componentId进行索引varcompoenntId=e.componentId;varquantity=e.quantity;this.setData({'quantity.quantity':quantity});}}));

5.

6.3.3带事件回调的组件

7.xxx.js

constToast=require('../../dist/toast/toast');Page({data:{},showToast(){Toast.setDefaultOptions({selector:'#zan-toast-test'});Toast('toast的内容');},showIconToast(){Toast({type:'fail',message:'toast的内容',selector:'#zan-toast-test'});},showImageToast(){Toast({message:'toast的内容',selector:'#zan-toast-test',image:'https://b.yzcdn.cn/v2/image/dashboard/secured_transaction/suc_green@2x.png'});},showLoadingToast(){Toast({type:'loading',message:'toast的内容',selector:'#zan-toast-test'});},showOnlyIcon(){Toast({type:'fail',selector:'#zan-toast-test'});},showEverToast(){Toast({message:'toast的内容',selector:'#zan-toast-test',timeout:-1});},showLoading(){Toast.loading({message:'加载中',selector:'#zan-toast-test'});}});

8.xxx.wxml

importsrc="/dist/toast/index.wxml"/viewclass="container"viewclass="doc-titlezan-hairline--bottom"TOAST/viewzan-button-groupstyle="margin-top:15vh;display:block;"zan-buttonbind:btnclick="showToast"显示toast/zan-buttonzan-buttonbind:btnclick="showIconToast"显示Icon图标的toast/zan-buttonzan-buttonbind:btnclick="showImageToast"自定义图片作为图标的toast/zan-buttonzan-buttonbind:btnclick="showLoadingToast"显示Loadingtoast/zan-buttonzan-buttonbind:btnclick="showOnlyIcon"只显示图标的toast/zan-buttonzan-buttonbind:btnclick="showEverToast"不消失的的toast/zan-buttonzan-buttonbind:btnclick="showLoading"显示Loading/zan-button/zan-button-group/view!--templateis="zan-toast"data="{{zanToast}}"/template--zan-toastid="zan-toast-test"/zan-toast

9.xxx.json

{"navigationBarTitleText":"Toast轻提示","usingComponents":{"zan-button":"../../dist/btn/index","zan-button-group":"../../dist/btn-group/index","zan-toast":"../../dist/toast/index"}}