随着微信小程序的上线,现在小程序的开发真是火的一踏糊涂啊 ~~好在我们第一时间拿到了内测账号,然后立马组织人员投入到小程序的开发浪潮中
在几个月马不停蹄的开后,我们于1月9号同时上线了有赞微商城小程序和有赞精选小程序现在有几千的商家使用有赞微商城系统自助搭建属于自己的微信小程序
在开发期间,我们踩过不少的坑,克服了很少难题,也给微信小程序提了不少的bug和建议。但最重要的我们产出了自己的一套微信小程序UI库ZanUI-WeApp并开源了,地址:https://github.com/youzan/zanui-weapp
ZanUI-WeApp结合了微信的视觉规范,为用户提供更加统一的使用感受。包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。
我们推荐在你的app.wxss
直接引入zanui-weapp/dist/index.wxss
。
根据功能的不同,可以将组件大致的分为4类:
如按钮组件,只要按照wxml结构写就好了
<!-- example/btn/index.html --><view class="zan-btn">按钮</view>
如加载更多组件,需要先引入定义好的模版,然后给模版传递数据
<!-- 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}}" />
如数量选择组件,需要先引入模版,然后给模版传递数据
<!-- 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.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 }); }}));
如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的内容'); }}));
更多示例可以在项目的example
目录中查看
示例可以把代码clone下来使用微信开发者工具打开,在’本地小程序项目 - 添加项目’,把 zanui-weapp 添加进去就可以查看组件源码、预览示例demo。大家可以扫二维码围观其中一个
如果你有好的意见或建议,欢迎给我们提 issue 或 PR,为优化 ZanUI-Weapp 贡献力量
联系客服