ZanUI

instl 2019-03-22

展開全文

緣起

隨著微信小程序的上線，現(xiàn)在小程序的開發(fā)真是火的一踏糊涂啊～～好在我們第一時間拿到了內(nèi)測賬號，然后立馬組織人員投入到小程序的開發(fā)浪潮中

在幾個月馬不停蹄的開后，我們于1月9號同時上線了有贊微商城小程序和有贊精選小程序現(xiàn)在有幾千的商家使用有贊微商城系統(tǒng)自助搭建屬于自己的微信小程序

在開發(fā)期間，我們踩過不少的坑，克服了很少難題，也給微信小程序提了不少的bug和建議。但最重要的我們產(chǎn)出了自己的一套微信小程序UI庫ZanUI-WeApp并開源了，地址：https://github.com/youzan/zanui-weapp

ZanUI-WeApp

ZanUI-WeApp結(jié)合了微信的視覺規(guī)范，為用戶提供更加統(tǒng)一的使用感受。包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共計 17 類組件或元素。

使用

使用 [ZanUI-WeApp] 前請確保已經(jīng)學習過微信官方的 [小程序簡易教程] 和 [小程序框架介紹]。
然后用 [Bower] 將 [ZanUI-WeApp] 添加到你的項目中使用。
你也可以 fork 出一份你自己的 [ZanUI-WeApp]，這樣可以獲得更穩(wěn)定的代碼和更方便的進行個性定制。

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

根據(jù)功能的不同，可以將組件大致的分為4類：

1. 簡單組件

如按鈕組件，只要按照wxml結(jié)構(gòu)寫就好了

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

2. 復雜組件

如加載更多組件，需要先引入定義好的模版，然后給模版?zhèn)鬟f數(shù)據(jù)

<!-- example/loadmore/index.html -->
<!-- 引入組件模版 -->
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
<!-- 加載中 -->
<template is="zan-loadmore" data="{{loading: true}}" />
<!-- 一條數(shù)據(jù)都沒有 -->
<template is="zan-loadmore" data="{{nodata: true}}" />
<!-- 沒有更多數(shù)據(jù)了 -->
<template is="zan-loadmore" data="{{nomore: true}}" />

3. 帶事件回調(diào)的組件

如數(shù)量選擇組件，需要先引入模版，然后給模版?zhèn)鬟f數(shù)據(jù)

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

然后通過Zan.Quantity把相關(guān)回調(diào)注入到頁面中

// 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這個數(shù)據(jù)也是通過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來直接調(diào)用相應的API了

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

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

Page(Object.assign({}, Zan.Toast, {
  showToast() {
    this.showZanToast('toast的內(nèi)容');
  }
}));