找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序综合交流

关注:55

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

微信小程序用户交流版块,希望同学们积极发言,不过大家不要恶意发布广告哦!

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

[复制链接]
查看: 93|回复: 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
发表于 前天 15:24 | 显示全部楼层
图看不了   能看到图就好了
回复 支持 反对

使用道具 举报

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

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

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

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com