起源

随着微信小程序的推出，现在小程序的开发确实很火爆，还好我们第一时间拿到了内测账号，然后马上组织人手投入小程序的开发。

经过几个月的马不停蹄的开发，我们于1月9日上线了有赞微商城小程序和有赞精选小程序，目前已经有上千家商家在使用有赞微商城系统搭建自己的微信小程序。

在开发过程中，我们遇到过很多坑，克服过很多问题，也给微信小程序提过很多bug修复和建议，但最重要的是，我们制作了一套属于自己的微信小程序UI库，并开源于：

-

- 结合微信视觉规范，为用户提供更统一的体验。包含btn、card、cell、form、icon、tab等17种组件或元素。

在使用[-]之前，请确保你已经学习了微信官方的[小程序简易教程]和[小程序框架介绍]。然后使用[]将[-]添加到你的项目中。你也可以fork一份自己的[-]，这样可以获得更稳定的代码和更方便的自定义。

我们建议在您的 app.wxss 中直接导入 -/dist/.wxss。

根据不同的功能，组件大致可以分为4类：

1. 简单组件

比如一个按钮组件，按照wxml结构去写就可以了。

按钮

2. 复杂组件

如果要加载更多组件，需要先导入定义好的模板，然后向模板传递数据

3. 具有事件回调的组件

例如数量选择组件，需要先导入模板，然后向模板传递数据

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

// 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) { // 如果页面有多个Quantity组件，则通过唯一componentId进行索引 var compoenntId = e.componentId; var quantity = e.quantity; this.setData({ 'quantity.quantity': quantity }); } }));

4. API 类组件

比如需要先将组件导入到模板中，然后在页面上使用。

注意，这些数据也是通过Zan注入到页面中的。

显示toast

在页面中注入API后，可以直接通过此方法调用相应API

var Zan = require('path/to/zanui-weapp/dist/index'); Page(Object.assign({}, Zan.Toast, { showToast() { this.showZanToast('toast的内容'); } }));

可以在项目目录中找到更多示例

你可以下载代码，使用微信开发者工具打开，在本地小程序项目-添加项目中添加-查看组件源码，预览示例demo，可以扫描二维码观看。

贡献

如果你有什么好的意见或者建议，欢迎给我们PR，为优化做贡献