微信小程序前端UIzanUI的使用总结

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-weapp2.把dist文件直接复制到微信小程序的根目录下3.根据需求引入你需要的组件（具体用法详见example目录下）3.1简单组件xxx.wxml<view class=”zan-btn”>click it</view>  //直接引用按钮的组件3.2带事件回调的组件(摘自https://cnodejs.org/topic/589d625a5c8036f7019e7a4a)先引入模板，然后给模板传递数据xxx.wxml<import src=”…/to/zanui-weapp/dist/quantity/index.wxml” /><template is=”zan-quantity” data=”{{ …quantity, componentId: ‘customId’ }}” />xxx.jsvar 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    });  }}));3.3带事件回调的组件xxx.jsconst Toast = 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’    });  }});xxx.wxml<import src=”/dist/toast/index.wxml” /><view class=”container”>  <view class=”doc-title zan-hairline–bottom”>TOAST</view>  <zan-button-group style=”margin-top: 15vh;display: block;”>    <zan-button bind:btnclick=”showToast”>      显示toast    </zan-button>    <zan-button bind:btnclick=”showIconToast”>      显示 Icon 图标的toast    </zan-button>    <zan-button bind:btnclick=”showImageToast”>      自定义图片作为图标的toast    </zan-button>    <zan-button bind:btnclick=”showLoadingToast”>      显示 Loading toast    </zan-button>    <zan-button bind:btnclick=”showOnlyIcon”>      只显示图标的toast    </zan-button>    <zan-button bind:btnclick=”showEverToast”>      不消失的的toast    </zan-button>    <zan-button bind:btnclick=”showLoading”>      显示 Loading    </zan-button>  </zan-button-group></view><!– <template is=”zan-toast” data=”{{ zanToast }}”></template> –><zan-toast id=”zan-toast-test”></zan-toast>xxx.json{  “navigationBarTitleText”: “Toast 轻提示”,  “usingComponents”: {    “zan-button”: “../../dist/btn/index”,    “zan-button-group”: “../../dist/btn-group/index”,    “zan-toast”: “../../dist/toast/index”  }}