干货001小程序使用有赞ZanUI
【干货#001】小程序使用有赞ZanUI
概述
ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本，这套UI还有PC桌面版(React)和移动端版，都经过了有赞的业务实践，特别适合开发商城类程序。
现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。具体可以扫描下方小程序二维码，体验组件库示例 Demo。
体验
为以后方便学习和使用，我们先在微信开发工具中运行上述的体验组件库小程序。
1.下载代码包https://github.com/youzan/zanui-weapp/archive/master.zip，并解压到本地文件夹。
2.把根文件夹zanui-weapp-master下的 dist 文件夹复制或剪切到 example 文件夹下，example文件夹内容如下图所示：
3.打开微信开发者工具，添加小程序项目，把 zanui-weapp-master/example 文件夹添加进去，然后编译运行就可以预览示例demo。
使用
下载代码包里的 dist 文件夹就是UI库，文件夹里的 index.wxss 包含了所有组件的wxss，如果只使用简单组件只要包含这个文件即可，如果还要使用复杂组件或API类组件，还需要包含相应的组件文件夹。其实整个UI库也不是很大，为简单起见，包含整个dist文件夹就行。
建议把dist文件夹重新命名，如zanui，然后复制到自己小程序项目文件夹下，最后在app.wxss中引入zanui/index.wxss。
@import “./zanui/index.wxss”;
1.简单组件
只需按照wxml结构使用对应的wxss的class就行。
- 复杂组件
如加载更多组件，需要先引入定义好的模版，然后给模版传递数据。
带事件回调或调用API的组件
需要先引入模版，然后给模版传递数据。
然后通过Zan.Quantity把相关回调注入到页面中。
上述代码中的 Object.assign 是ES6的函数，用于将所有源对象（source）的所有可枚举属性，复制到目标对象（target），第一个参数是目标对象，后面的参数都是源对象，例中将Zan.Quantity这个对象，还有它后面定义的原“Page”对象，拷贝到前面的{}空对象中，从而组成一个新的Page对象。这样就可以在当前页面中调用Zan.Quantity中定义的组件方法。
其他组件的使用可以在上述示例项目的example目录中查看，照着例子学习使用即可。
参考：
- ZanUI的Github主页：https://github.com/youzan/zanui-weapp
- 使用zanui开发小程序微商城：http://www.jianshu.com/p/67f2fbc4de2
更多实战干货，可查看：
更多常见错误，可查看：
