找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序综合交流

关注:82

所属分类: 微信开发 微信小程序综合交流

微信小程序用户交流版块,小程序吐槽、作品展示、功能需求等都可以在这里发表,更多微信小程序和微信小游戏作品可以到社区的小程序导航浏览。

微信小程序导航:http://daohang.henkuai.com

[经验分享] 小程序使用有赞ZanUI

[复制链接]
查看: 352|回复: 1
最佳答案
0 

1

主题

2

帖子

51

积分

新人求带

积分
51
 楼主| 发表于 2017-11-14 11:15:43 | 显示全部楼层 |阅读模式
概述
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目录中查看,照着例子学习使用即可。

参考:
更多实战干货,可查看:

更多常见错误,可查看:

转载自公众号:晓程序干货店


回复

使用道具 举报

最佳答案
0 

1

主题

5

帖子

59

积分

新人求带

积分
59
发表于 2017-11-22 15:24:26 | 显示全部楼层
图看不了   能看到图就好了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com