开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!

WeUI WXSS

WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。

GitHub地址:https://github.com/Tencent/weui-wxss
npm下载:npm i weui-wxss

官网地址:https://weui.io/

iView WeApp

iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。

GitHub地址:https://github.com/TalkingData/iview-weapp
npm下载:npm i iview-weapp

ZanUI WeApp

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

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等组件或元素。

GitHub地址:https://github.com/youzan/zanui-weapp
npm下载:npm i zanui-weapp

另外,ZanUI也使用mpvue重写了zanui-weapp,实现了其中所有组件,为使用mpvue的开发者提供了方便。

GitHub地址:https://github.com/samwang1027/mpvue-zanui
npm下载:npm i mpvue-zanui

MinUI

MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。

GitHub地址:https://github.com/meili/minui

Wux WeApp

Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。

GitHub地址:https://github.com/wux-weapp/wux-weapp
npm下载:npm i wux-weapp

ColorUI

ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!

其组件在美观性方面比较突出。

GitHub地址:https://github.com/weilanwl/ColorUI

链接:https://www.jianshu.com/p/4182f4a18cb6

微信小程序常用UI组件库相关推荐

  1. 微信小程序调用Vant组件库

    微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库 链接: vant开发指南. ...

  2. 微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”

    注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...

  3. 微信小程序引入WeUI组件库(笔记)

    1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...

  4. 微信小程序入门ColorUI组件库使用方法

    自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...

  5. 微信小程序集成WeUI组件库

    1.引入nmp依赖(前提是已经安装了nmp) 在小程序根目录(app.js所在目录),打开cmd, 输入:npm init -y,回车初始nmp 然后再输入:npm i miniprogram-sm- ...

  6. 微信小程序引入Vant组件库

    前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

  7. 微信小程序引入WeUI组件库并使用组件

    1. git 下载:weui,解压,打开文件夹,dist文件夹,style-->weui.wxss,复制到项目里 2.useExtendedLib引入 根目录的app.json里引入 " ...

  8. 微信小程序引用Vant组件库message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...

    问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...

  9. 微信小程序常用视图容器组件

    微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...

  10. 微信小程序开发--ui库插件

    常用ui组件库: 1. WeUI 满足基础的界面需求 官方WeUI组件库 2. Vant 组件库 由有赞发布,想制作一款电商.餐饮.外卖平台.票务预订等购物类小程序,选用 Vant 是较为合适的 文档 ...

最新文章

  1. R语言使用table函数计算单分类变量的频率表(frequency table)、使用prop.table函数将table函数计算获得的频率表转化为比率表、返回单分类变量每一个类别的比率、或者百分比
  2. python3 用queue做历史记录
  3. 零基础入门学习python
  4. Scala元组:存放各种相同或不同类型的数据
  5. 知识管理在客户关系管理中的应用领域
  6. Python语音信号处理
  7. python时间函数详解_Python 日期的转换及计算的具体使用详解
  8. BZOJ2440 [中山市选2011]完全平方数
  9. shell获取git最近一次提交信息_我低估了PowerShell:一个提取Git提交记录并生成文件Diff列表的脚本案例...
  10. IDEA Spring环境搭建+简单入门(图文教程)
  11. eclipse配色方案
  12. 【数模之数据分析-2】
  13. matlab动态图阿基米德螺旋,魔兽世界M基尔加丹阿基米德螺旋线之Matlab动图!国服加油...
  14. 领英改版变成领英中国的解决办法,完整详细版教程,亲测可用。
  15. 绝地求生大逃杀地图分析
  16. 对客户信息收集,收集用户行为的方法总结
  17. 2018:MIXED PRECISION TRAINING OF CONVOLUTIONAL NEURAL NETWORKS USING INTEGER OPERATIONS利用整数运算对卷积神经网络
  18. [量子计算]量子计算的最佳应用(The Best Applications for Quantum Computing)
  19. 第1章第7节:如何通过大纲级别批量创建幻灯片 [PowerPoint精美幻灯片实战教程]
  20. 解决K8S集群kubelet故障:Failed to update stats for container nable to determine device info for dir

热门文章

  1. python ocr识别身份证_如何使用Tesseract训练基于Python的OCR以使用不同的国家身份证?...
  2. Ubuntu18.04下的模拟神器RetroArch
  3. 利用全加器实现7段数码管_数码管引脚共阴和共阳极,检测
  4. python如何循环sql语句_sql语句的for循环语句怎么写
  5. Python爬取百度翻译-可以选择语言
  6. 送书 | 图解机器学习—算法原理与Python语言实现
  7. centos卸载nvidia驱动_nvidia驱动的卸载和重新安装
  8. opencore 0.6.3 华硕_Apex英雄支持NVIDIA Reflex 华硕显卡低延迟利器_
  9. 字体识别在线工具-整理
  10. 彻底删除win10易升