微信小程序 好用的UI组件库推荐

1.WeUI

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库,
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

WeUI 在线预览
WeUI gitee地址
WeUI github地址

<1>.本地预览,快速获得样式

1.下载WeUI
微信小程序 好用的UI组件库推荐_第1张图片

2.用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)
微信小程序 好用的UI组件库推荐_第2张图片
微信小程序 好用的UI组件库推荐_第3张图片

  1. 需要什么组件,就copy什么组件,再根据需要修改
    微信小程序 好用的UI组件库推荐_第4张图片
    微信小程序 好用的UI组件库推荐_第5张图片

<2>.导入项目中使用

1.下载WeUI
微信小程序 好用的UI组件库推荐_第6张图片
2.导 weui.css 或 weui.min.css 入项目
微信小程序 好用的UI组件库推荐_第7张图片
微信小程序 好用的UI组件库推荐_第8张图片
接下来在需要使用WeUI组件的页面中导入wxss文件即可

@import '/weui.wxss';

更推荐在 app.wxss 全局导入
微信小程序 好用的UI组件库推荐_第9张图片

2.Vant Weapp

微信小程序 好用的UI组件库推荐_第10张图片
Vant Weapp 官网

Vant Weapp 官网有详细的文档资料

3.iView Weapp

微信小程序 好用的UI组件库推荐_第11张图片

一套高质量的
微信小程序 UI 组件库

iView Weapp 官网
iView Weapp 官网有详细的文档资料

4.Lin UI

在这里插入图片描述

Lin UI 致力于给小程序开发者提供愉悦的开发体验。
Lin UI 官网
Lin UI 官网有详细的文档资料

你可能感兴趣的:(web开发,微信,小程序)