【干货#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就行。

2. 复杂组件 

如加载更多组件，需要先引入定义好的模版，然后给模版传递数据。

3.带事件回调或调用API的组件

需要先引入模版，然后给模版传递数据。

然后通过Zan.Quantity把相关回调注入到页面中。

上述代码中的Object.assign是ES6的函数，用于将所有源对象（source）的所有可枚举属性，复制到目标对象（target），第一个参数是目标对象，后面的参数都是源对象，例中将Zan.Quantity这个对象，还有它后面定义的原“Page”对象，拷贝到前面的{}空对象中，从而组成一个新的Page对象。这样就可以在当前页面中调用Zan.Quantity中定义的组件方法。

其他组件的使用可以在上述示例项目的example目录中查看，照着例子学习使用即可。

参考：

1. ZanUI的Github主页：https://github.com/youzan/zanui-weapp

2. 使用zanui开发小程序微商城：http://www.jianshu.com/p/67f2fbc4de2

更多实战干货，可查看：

实战知晓云发送模板消息

30分钟实战知晓云内容发布小程序

实战知晓云分页显示

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

更多常见错误，可查看：

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误