更新记录

1.5.1(2020-07-13)

欢迎加群交流反馈:249718512

  1. 【优化】重构steps组件,支持竖向模式,同时兼容了支付宝小程序
  2. 【优化】优化checkbox组件,兼容支付宝小程序
  3. 【优化】优化swipeAction组件可能会闪烁的情况
  4. 【优化】调整cell组件的高度
  5. 【修复】修复cell组件在1.5.0版本导致变成了password模式的情况
  6. 【修复】修复form-item的label-align无效的问题
  7. 【修复】修复alert-tips的border-color和bg-color作用对象颠倒的问题

1.5.0(2020-07-10)

欢迎加群交流反馈:249718512

  1. 【优化】配置popup组件的外层元素z-index可动态调整
  2. 【优化】select和picker组件在微信小程序上第二次打开,直接点确定返回可能不对的问题
  3. 【优化】添加u-col的click事件
  4. 【修复】修复image组件无需淡入效果时png图片能看到底色的问题
  5. 【修复】修复checkbox的lable-disabled参数无效的问题
查看更多

发布

uView于4月12号发布,文档和源码全部开源免费。uView为uniapp生态最优秀的UI框架。uView文档详尽,经得起推敲,受得住考验。 美好,近在咫尺,触手可及。

概览

历时数月开发,uView终于迎来了要和大家第一次见面的重要时刻。 uView文档和源码完全开源免费,为uniapp生态优秀、成熟的UI框架,拥有大量的组件和JS工具库,每一个组件都经过精心打磨和推敲,外观惊艳,性能优异。
uView文档异常详细,为您想好每一处细节,提供大量示例和说明,让您轻松上手,无坑可踩。

来由

uni-app2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归。

因此,uView应运而生,uView的目标是成为uni-app生态最优秀的UI框架。

关于uView的取名来由,首字母u来自于uni-app首字母uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-appVue之意,同时在此也对它们表示感谢。

适用领域

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。

说明,由于uni-app前暂未支持编译到PC端,所以uView目前也不适用于PC端,如uni-app兼容了PC端,uView也会第一时间跟进适配。

版权信息

uView遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。

注意:这并不意味着您可以将uView应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷等法律问题,uView不承担任何责任。

鸣谢Gitee

uView是一个开源项目,理念是"挣脱束缚,向往自由",uni-app生态越来越繁荣,它需要标杆,uView愿意站出来为之而努力,振臂高呼,矢志不渝。 虽然我们想推动生态和互联网的发展,但是偏偏有人逆行倒施,认为我们触碰到了它的利益,从而对我们的服务器多次进行DDos攻击,我们买不起高防包, 所以将官网托管在了码云(Gitee),在此对码云表示衷心感谢。 我们会向着风,拥抱彩虹,勇敢的向前走,透过黎明的那道光,越过黑暗,打破一切恐惧,我能找到答案,哪怕要逆着光,也要驱散黑暗。

官网

网址: https://www.uviewui.com

uView UI

微信小程序演示

请用微信扫码,即可体验最新版演示

uView UI

关于文档

网址: https://www.uviewui.com
uView的每一个组件和JS工具,模板等,都有详细的文档说明,并且文档完美适配移动端,让您随时随地,无忧无虑的查询文档。 uView的文档有众多的示例和说明,每一处可能会踩坑的地方,都有特别说明,让您上手简单,使用无忧。

关于组件

uView为您考虑到了开发的整个生命周期,众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用:

基础组件

  • 【Color 色彩】

    uView经过大量调试和研究,得出一套专有的调色板,在各个组件内部,使用统一的配色,为您的产品带来统一又鲜明的视觉效果。

  • 【Icon 图标】

    基于字体的图标集,包含了大多数常见场景的图标。

  • 【Button 按钮】

    该组件内部实现以uni-appbutton组件为基础,进行二次封装,主要区别在于: 1.按钮type值有更多的主题颜色 2.有可选的按钮点击水波纹效果 3.按钮size值有更多的尺寸可选

  • 【Layout 布局】

    通过基础的 12 分栏,迅速简便地创建布局

  • 【Cell 单元格】

    cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。

  • 【Badge 徽标数】

    该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。

  • 【Tag 标签】

    该组件一般用于标记和选择,有如下特点: mode参数可以设置3种模式,dark(深色背景)、light(浅色背景)、plain(白色背景) shape参数可以设置多种形状,circle(两边半圆形), square(方形,带圆角),circleLeft(左边半圆),circleRight(右边半圆) type参数可以设置5种主题,primary,success,warning,error,info

表单组件

  • 【Keyboard 键盘】

    此为uViw自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3中模式,都有可以打乱按键顺序的选项。

  • 【Picker 选择器】

    此选择器有两种弹出模式: 一是时间模式,可以配置年,日,月,时,分,秒参数 二是地区模式,可以配置省,市,区参数

  • 【Rate 评分】

    该组件一般用于满意度调查,星型评分的场景。

  • 【Search 搜索】

    搜索组件,集成了常见搜索框所需功能,用户可以一键引入,开箱即用。

  • 【NumberBox 步进器】

    该组件一般用于商城购物选择物品数量的场景

  • 【Upload 上传】

    该组件用于上传图片场景

  • 【VerificationCode 验证码倒计时】

    考虑到用户实际发送验证码的场景,可能是一个按钮,也可能是一段文字,提示语各有不同,所以本组件 不提供界面显示,只提供提示语,由用户将提示语嵌入到具体的场景

  • 【Field 输入框】

    借助此组件,可以实现表单的输入, 有"text"和"textarea"类型的,此外,借助uView的picker和actionSheet组件可以快速实现上拉菜单,时间,地区选择等, 为表单解决方案的利器。

  • 【Checkbox 复选框】

    复选框组件一般用于需要多个选择的场景,该组件功能完整,使用方便

  • 【Radio 单选框】

    单选框用于有一个选择,用户只能选择其中一个的场景。

  • 【Switch 开关选择器】

    选择开关一般用于只有两个选择,且只能选其一的场景。

  • 【Slider 滑动选择器】

    该组件一般用于表单中,手动选择一个区间范围的场景。

数据组件

  • 【CircleProgress 圆形进度条】

    展示操作或任务的当前进度,比如上传文件,是一个圆形的进度条。

  • 【LineProgress 线形进度条】

    展示操作或任务的当前进度,比如上传文件,是一个线形的进度条。

  • 【Table 表格】

    表格组件一般用于展示大量结构化数据的场景

  • 【CountDown 倒计时】

    该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。

  • 【CountTo 数字滚动】

    该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。

反馈组件

  • 【ActionSheet 操作菜单】

    本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。 本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。

  • 【AlertTips 警告提示】

    警告提示,展现需要关注的信息。

  • 【Toast 消息提示】

    此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方,具体表现在: uView的toast有5中主题可选 可以配置toast结束后,跳转相应URL 目前没有加载中的状态,请用uni的uni.showLoading,这个需求uni已经做得很好

  • 【NoticeBar 滚动通知】

    该组件用于滚动通告场景,有多种模式可供选择

  • 【TopTips 顶部提示】

    该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景。

  • 【Collapse 折叠面板】

    通过折叠面板收纳内容区域

  • 【Popup 弹出层】

    弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义

  • 【SwipeAction 滑动操作】

    该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。

  • 【Modal 模态框】

    弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

  • 【fullScreen 压窗屏】

    所谓压窗屏,是指遮罩能盖住原生导航栏和底部tabbar栏的弹窗,一般用于在APP端弹出升级应用弹框,或者其他需要增强型弹窗的场景。

布局组件

  • 【Mask 遮罩层】

    创建一个遮罩层,用于强调特定的页面元素,并阻止用户对遮罩下层的内容进行操作,一般用于弹窗场景

  • 【NoNetwork 无网络提示】

    该组件无需任何配置,引入即可,内部自动处理所有功能和事件,有如下特点: 如果没有网络,改组件会以fixed定位,并且以很大的z-index值覆盖原来的内容。一旦有网络了,会自动隐藏该组件,实现自动化 在APP上,嵌入了5+接口,可以直接打开手机的设置页面,方便用户进行网络相关的设置

  • 【Grid 宫格布局】

    宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。

  • 【Swiper 轮播图】

    该组件一般用于导航轮播,广告展示等场景,可开箱即用,具有如下特点: 内置多种指示器模式,可配置指示器位置 3D轮播图效果 可配置是否显示标题

  • 【TimeLine 时间轴】

    时间轴组件一般用于物流信息展示,各种跟时间相关的记录等场景。

  • 【Skeleton 骨架屏】

    骨架屏一般用于页面在请求远程数据尚未完成时,页面用灰色块预显示本来的页面结构,给用户更好的体验。

  • 【Sticky 吸顶】

    该组件与CSS中position: sticky属性实现的效果一致,当组件达到预设的到顶部距离时, 就会固定在指定位置,组件位置大于预设的顶部距离时,会重新按照正常的布局排列。

  • 【Waterfall 瀑布流】

    这是一个瀑布流形式的组件,内容分为左右两列,结合uView的懒加载组件效果更佳。 相较于某些只是奇偶数左右分别,或者没有利用vue作用域插槽的做法,uView的瀑布流实现了真正的 组件化,搭配LazyLoad 懒加载和loadMore 加载更多组件,让您开箱即用,眼前一亮。

  • 【Divider 分割线】

    区隔内容的分割线,一般用于页面底部"没有更多"的提示。

导航组件

  • 【Navbar 自定义导航栏】

    此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uni-app带的导航栏。

  • 【tabs 标签】

    该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。

  • 【tabsSwiper 全屏选项卡】

    该组件内部实现主要依托于uni-appscroll-view和swiper组件,主要特色是切换过程中,tabsSwiper文字的颜色可以渐变,底部滑块可以 跟随式滑动,活动tab滚动居中等。应用场景可以用于需要左右切换页面,比如商城的订单中心(待收货-待付款-待评价-已退货)等应用场景。

  • 【Subsection 分段器】

    该分段器一般用于用户从几个选项中选择某一个的场景

  • 【IndexList 索引列表域】

    通过折叠面板收纳内容区域

  • 【Steps 步骤条】

    该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。

  • 【Empty 内容为空】

    该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景, 我们精心挑选了十几个场景的图标,方便您使用。

  • 【Link 超链接】

    该组件为超链接组件,在不同平台有不同表现形式: 在APP平台会通过plus环境打开内置浏览器 在小程序中把链接复制到粘贴板,同时提示信息 在H5中通过window.open打开链接

  • 【Section 查看更多】

    该组件一般用于分类信息有很多,但是限于篇幅只能列出一部分,让用户通过"查看更多"获得更多信息的场景,实际效果见演示。

其他组件

  • 【MessageInput 验证码输入】

    该组件一般用于验证用户短信验证码的场景,也可以结合uView的键盘组件使用

  • 【AvatarCropper 头像裁剪】

    该组件一般的图片裁剪需求场景,尤其适合于头像裁剪方面。

  • 【loadMore 加载更多】

    此组件一般用于标识页面底部加载数据时的状态,共有三种状态: 加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的onReachBottom生命周期 加载中,显示"正在加载...",2种动画可选 加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"

  • 【ReadMore 展开阅读更多】

    该组件一般用于内容较长,预先收起一部分,点击展开全部内容的场景。

  • 【LazyLoad 懒加载】

    懒加载使用的场景为:页面有很多图片时,APP会同时加载所有的图片,导致页面卡顿,各个位置的图片出现前后不一致等 本组件高度封装和集成,创新性地使用uni.createIntersectionObserver 接口,保证高性能的同时,还有其他友好的可配置参数,比如预加载占位图,加载错误占位图,加载位置参数(threshold),各种事件等。

  • 【Gap 间隔槽】

    该组件一般用于内容块之间的用一个灰色块隔开的场景,方便用户风格统一,减少工作量

  • 【Avatar 头像】

    本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。

  • 【Loading 加载动画】

    此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。

关于JS工具

uView有众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨:

  • 【Http请求】

    该插件适用于一般的请求场景,只支持post、get、put和delete请求,目前不适用于其他的请求形式,比如上传,下载等。插件定位为 小而美,而不是大而全,目标是切合实际,开箱即用。

  • 【API集中管理】

    这里说的集中管理,是指把各个请求,统一放到一个文件中进行管理,这样的好处是不用每次调用this.$u.get时都需要传入url参数,一些固定的 请求参数也可以不用显式的传入.

  • 【time 时间格式】

    timeFormat | date(timestamp, format = "yyyy-mm-dd")

  • 【route 路由跳转】

    此为一个路由跳转方法,内部是对uni多个路由跳转api的封装,更方便使用

  • 【randomArray 数组乱序】

    打乱数组

  • 【guid 全局唯一标识符】

    产生唯一标识符

  • 【colorSwitch 颜色转换】

    该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值

  • 【color 颜色值】

    此功能为uView内部通过js提供的一些颜色值,可以用于通过js修改元素字体,背景颜色等一些场景,常用于uView的各个组件中。 这些颜色值,挂载在$u对象下的color数组中,关于这些颜色值的具体描述,详见Color 色彩 使用方法:如使用primary颜色值,方法为:$u.color['primary']

  • 【queryParams 对象转URL参数】

    该方法,可以将一个对象形式参数转换成get传参所需参数形式,如把{name: 'lisa', age: 20}转换成?name=lisa&age=20 用途:可以用于uni.navigateTo接口传参等场景,无需自己手动拼接URL参数

  • 【test 规则校验】

    uView内置了一些校验规则,如是否手机号,邮箱号,URL等 这些规则方法,挂载在$u.test下面,如验证是否手机号:$u.test.mobile('13888889999'),如果验证通过,返回true,否则返回false

  • 【md5 加密】

    该md5加密方法,需要手动import库函数,调用md5方法即可使用,可以对字符串加密为32位的字符串结果,如需进一步了解, 详见MD5百度百科

  • 【random 随机数值】

    该方法可以返回在"min"和"max"之间的数值,要求"min"和"max"都为数值,且"max"大于或等于"min",否则返回0.

  • 【trim 去除空格】

    该方法可以去除空格,分别可以去除所有空格,两端空格,左边空格,右边空格,默认为去除两端空

  • 【getRect 节点布局信息】

    此方法封装自uni的nodesRef.boundingClientRect,它极大简化了 使用复杂度,内部使用Promise,可以让用户同步获取节点信息。

  • 【mpShare 小程序分享】

    此功能,是对uni的onShareAppMessage 生命周期的封装。

关于模板

uView目前已有数量众多的优秀模板,众多的模板正在陆续加入中……

开源免费

uView采用MIT许可证,您可以免费自由使用,文档和源码开源免费,不收任何费用!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问