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

微信小程序演示

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

关于文档

网址： 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许可证，您可以免费自由使用，文档和源码开源免费，不收任何费用！