緣起
隨著微信小程序的上線，現(xiàn)在小程序的開發(fā)真是火的一踏糊涂啊 ～～
好在我們第一時(shí)間拿到了內(nèi)測賬號，然后立馬組織人員投入到小程序的開發(fā)浪潮中
在幾個(gè)月馬不停蹄的開后，我們于1月9號同時(shí)上線了有贊微商城小程序和有贊精選小程序
現(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 共計(jì) 17 類組件或元素。
使用
- 使用 [ZanUI-WeApp] 前請確保已經(jīng)學(xué)習(xí)過微信官方的 [小程序簡易教程] 和 [小程序框架介紹]。
- 然后用 [Bower] 將 [ZanUI-WeApp] 添加到你的項(xiàng)目中使用。
- 你也可以 fork 出一份你自己的 [ZanUI-WeApp]，這樣可以獲得更穩(wěn)定的代碼和更方便的進(jìn)行個(gè)性定制。
我們推薦在你的app.wxss直接引入zanui-weapp/dist/index.wxss。
根據(jù)功能的不同，可以將組件大致的分為4類：
1. 簡單組件
如按鈕組件，只要按照wxml結(jié)構(gòu)寫就好了
<!-- example/btn/index.html -->
<view class="zan-btn">按鈕</view>
2. 復(fù)雜組件
如加載更多組件，需要先引入定義好的模版，然后給模版?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) {
// 如果頁面有多個(gè)Quantity組件，則通過唯一componentId進(jìn)行索引
var compoenntId = e.componentId;
var quantity = e.quantity;
this.setData({
'quantity.quantity': quantity
});
}
}));
4. API類組件
如Toast組件，需要先引入模版，并在頁面上使用。
注意zanToast這個(gè)數(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)用相應(yīng)的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)容');
}
}));
更多示例可以在項(xiàng)目的example目錄中查看
示例可以把代碼clone下來使用微信開發(fā)者工具打開，在’本地小程序項(xiàng)目 - 添加項(xiàng)目’，把 zanui-weapp 添加進(jìn)去就可以查看組件源碼、預(yù)覽示例demo。
大家可以掃二維碼圍觀其中一個(gè)
貢獻(xiàn)
如果你有好的意見或建議，歡迎給我們提 issue 或 PR，為優(yōu)化 ZanUI-Weapp 貢獻(xiàn)力量
|
