微信小程序之第三方UI框架 zanui 使用教程

ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。具体可以扫描下方小程序二维码,体验组件库示例 Demo

还是一样的套路,首先看一下zanui的地址

zanui -power by 有赞

1.从git上clone到本地

解压后的目录

微信小程序之第三方UI框架 zanui 使用教程

2.新建一个项目

将 dist目录下的index.wxss 放到新项目的根目录下,如下图所示

微信小程序之第三方UI框架 zanui 使用教程

3.在app.wxss中引入 index.wxss文件

微信小程序之第三方UI框架 zanui 使用教程

与官方的ui框架不同的是,这里要将整个dist目录拷贝到新项目的根目录下,否则会报错.


接下来看一下官方的实例代码的导入,跟weiui的导入方式一样,将example文件夹导入微信小程序开发工具

不过,可能会缺少dist文件夹,将dist文件夹,拷一份放在example下就可以了

微信小程序之第三方UI框架 zanui 使用教程

微信小程序之第三方UI框架 zanui 使用教程

如果那里不懂,可以评论,我会及时看的,

也可以加我微信   ljbjasperli