【小程序入门集锦】4，使用zanui开发小程序微商城（模板组件的
zanui是一套视觉UI包，与weui类似但又不等于weui，约等于weui+weui.js。没有weui成熟、全面。但在微商城这一细分领域，比weui更全面。两者使用了不同的css前缀，可以并用于项目中。
ZanUI-WeApp是有赞推出的，结合了微信的视觉规范，为用户提供更加统一的使用感受。
包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。
使用
下载：git clone https://github.com/youzan/zanui-weapp.git
打开微信web开发者工具，'本地小程序项目 - 添加项目'，把 zanui-weapp 添加进去就可以预览demo了。
使用
组件大致的分为4类：
1. 简单组件
如按钮组件，只要按照wxml结构写就好了按钮
这是最简单的一类，直接使用的是zan-开头的css样式，与weui-样式类似。
2. 复杂组件
如加载更多组件，需要先引入定义好的模版，然后给模版传递数据
这一类组件是次简单，使用了模板。
这一句是使用模板组件的语句，is=""指明模板名称，该名称定义于../loadmore/index.wxml文件中：
{{ nodata_str || '暂无数据' }}
加载中...
这是最简单的模板组件，有三个逻辑判断分支，分别是nomore、nodata、loading。每个if分支对应一种UI。
第二种nodata中，{{ nodata_str || '暂无数据' }}，这一句用于定义显示的默认文本。
自定义的情况示例：
运行效果：
3. 带事件回调的组件
如数量选择组件，需要先引入模版，然后给模版传递数据
然后通过Zan.Quantity把相关回调注入到页面中varZan=require('path/to/zanui-weapp/dist/index');Page(Object.assign({},Zan.Quantity, {
data:{
quantity:{
quantity:10,
min:1,
max:20},
},handleZanQuantityChange(e) {// 如果页面有多个Quantity组件，则通过唯一componentId进行索引varcompoenntId=e.componentId;varquantity=e.quantity;this.setData({'quantity.quantity':quantity
});
}
}));
上面代码中这个Object.assign语法，是es6的：
Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
它是将Zan.Quantity这个对象，还有它后面的定义的“Page”对象，拷贝到前面的{}空对象中，从而组成一个新的Page对象。
这样做的结果是，Zan.Quantity中定义的组件方法，例如_handleZanQuantityBlur、_handleZanQuantityMinus、_handleZanQuantityPlus都跑到了当前页面中，就像在当前页面中定义一样，只是少了编写的麻烦。
与此同时，在Zan.Quantity中，使用的this对象，当指当前重组后的页面对象。
在Zan.Quantity有一段这样的代码：
function callback(componentId, quantity) {
quantity = +quantity;
var e = { componentId, quantity };
console.info('[zan:quantity:change]', e);
if (this.handleZanQuantityChange) {
this.handleZanQuantityChange(e);
} else {
console.warn('页面缺少 handleZanQuantityChange 回调函数');
}
}
handleZanQuantityChange是客户代码定义的。在示例中是这样的：
handleZanQuantityChange(e) {
var componentId = e.componentId;
var quantity = e.quantity;
this.setData({
[`${componentId}.quantity`]: quantity
});
}
关于Object.assign的说明，在小程序API文档、组件文档中都没有，在工具文档页中，描述ES6 API 支持情况时，有列举该es6语法api。
4. API类组件
如Toast组件，需要先引入模版，并在页面上使用。
注意zanToast这个数据也是通过Zan.Toast注入到页面的
显示toast
将API注入到页面后，就可以通过this来直接调用相应的API了
varZan=require('path/to/zanui-weapp/dist/index');Page(Object.assign({},Zan.Toast, {showToast() {this.showZanToast('toast的内容');
}
}));
toast与quantity组件的实现类似，只是需要显式调用，与程序原生的api 组件类似。
有赞商城团队的这种定义模板组件的方法，很值得学习推广。每一个模板组件，单独一个目录。在dist/index主js文件中，export各组件。
在使用时，统一引用/dist/index，并实例化统一的Zan变量，使用Object.assign混合Page页面对象，保持了代码的简洁优雅。
大家已经造了不少轮子了，我们要不要也开发一个小程序微商城？
如果产品特色，索性就不做。但如果只是做为一个示例，供开发者方便学习，可以考虑。
在微信公众号哲学李论，回复“小程序入门集锦”可以看到这个系列的所有文章。
本文同时在多个平台、社群转发，回复“社群”可与其它艺友热情连接。
如果觉得本文还行，请转发到朋友圈让更多朋友看到。
如果您看到有料的文章，欢迎与10W艺友分享，荐文热线：liyi@rixingyike.com。
