uniapp ui框架——uView

引子

小编很荣幸能在疫情期间认识uView的作者,并且成为uView的核心研发组成员之一。虽然我还是一名在读的大二学生,但我被作者的开源精神所感动,也因为uView想做uniapp生态标杆框架的精神所膜拜。在uView还未发布之前,我和作者就聊了很多关于uView的种种。uView作者为此框架付出了很多的心血,经常熬夜加班到凌晨四五点。他说这就是开源精神,我们所做的一切,都是有意义的。
虽然代码很重要,但在开源项目里,源码只是重要的因素之一。正如一位互联网人说过的一句话:没有社区的开源项目,其源码会一直停留在“孤芳自赏”阶段。也希望有更多的人能参与uView的维护与开发,为uView添砖加瓦,让uView成为标杆,而不是过客。


发布

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的各个组件中。
这些颜色值,挂载在ucolorColor使使primaryu对象下的color数组中,关于这些颜色值的具体描述,详见Color 色彩 使用方法:如使用primary颜色值,方法为:u.color[‘primary’]

  • 【queryParams 对象转URL参数】

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

  • 【test 规则校验】

uView内置了一些校验规则,如是否手机号,邮箱号,URL等
这些规则方法,挂载在u.testu.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许可证,您可以免费自由使用,文档和源码开源免费,不收任何费用!

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读