uni-ui是基于uni-app的、全端兼容的、高性能UI框架
注意:导入uni_modules规范插件需要使用3.1.0以上版本的HBuilderX
注意:导入此插件需要使用2.9+以上版本的HBuilderX
本站所有收费插件均支持免费试用,切勿私下交易或购买不可正常试用的插件,而造成不必要的纠纷。
当前插件不包含示例页面,如需示例请在HBuiderX中新建hellouni-app>扩展组件中查看
目前为止,在小程序和混合app领域,暂时还没有比uni-ui更高性能的框架。
虽然uni-app支持小程序自定义组件,所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据,在大数据量时、或高频更新数据时,很容易产生性能问题。
而uni-ui属于vue组件,uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。
非H5,不管是小程序还是App,不管是app的webview渲染还是原生渲染,全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。比如在视图层拖动一个可跟手的组件,由于通讯的损耗,用js监听很难做到实时跟手。
这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂,所以uni-ui里做了封装,在需要跟手式操作的ui组件,比如swiperaction列表项左滑菜单,就在底层使用了这些技术,实现了高性能的交互体验
很多ui组件是会一直动的,比如轮播图、跑马灯。即便这个窗体被新窗体挡住,它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上,背景操作ui会引发很严重的性能问题,造成前台界面明显卡顿。
而uni-ui的组件,会自动判断自己的显示状态,在组件不再可见时,不会再消耗硬件资源。
uni-ui的组件都是多端自适应的,底层会抹平很多小程序平台的差异或bug。
未来uni-ui还会支持pc等大屏设备。
除了一张报表看全端,它的另一个重要特点是免打点。比如使用uni-ui的navbar标题栏、收藏、购物车等组件,均可实现自动打点,统计页面标题等各种行为数据。当然你也可以关闭uni统计,这不是强制的。
ui是一种需求非常发散的产品,DCloud官方也无意用uni-ui压制第三方ui插件的空间,但官方有义务在性能和多端方面提供一个开源的标杆给大家。
我们欢迎更多优秀的ui组件出现,也欢迎更多人贡献uni-ui的主题风格,满足更多用户的需求。
uni-ui支持HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
在代码区键入u,拉出各种内置或uni-ui的组件列表,选择其中一个,即可使用该组件。
光标放在组件名称上,按F1,可以查阅组件的文档。
如果你没有创建uni-ui项目模板,也可以在你的工程里,通过uni_modules单独安装需要的某个组件。下表为uni-ui的扩展组件清单,点击每个组件在详情页面可以导入组件到项目下,导入后直接使用即可,无需import和注册。
注意:下载最新的组件目前仅支持uni_modules,非uni_modules版本最高支持到组件的1.2.10版本
如不能升级到uni_modules版本,可以使用uni_modules安装好对应组件,将组件拷贝到对应目录。
例如需更新uni-list和uni-badge,将uni_modules>uni-list>components和uni_modules>uni-badege>components下所有目录拷贝到如下目录即可:
目录示例
如果没有自动导入其他组件,可以在uni-ui组件目录上右键选择安装三方插件依赖即可。
在vue-cli项目中可以使用npm安装uni-ui库,或者直接在HBuilderX项目中使用npm。
注意cli项目默认是不编译node_modules下的组件的,导致条件编译等功能失效,导致组件异常需要在根目录创建vue.config.js文件,增加@dcloudio/uni-ui包的编译即可正常
//vue.config.jsmodule.exports={transpileDependencies:['@dcloudio/uni-ui']}准备sass
vue-cli项目请先安装sass及sass-loader,如在HBuliderX中使用,可跳过此步。
安装uni-ui
npmi@dcloudio/uni-ui或yarnadd@dcloudio/uni-ui配置easycom
使用npm安装好uni-ui之后,需要配置easycom规则,让npm安装的组件支持easycom
打开项目根目录下的pages.json并添加easycom节点:
//pages.json{"easycom":{"autoscan":true,"custom":{//uni-ui规则如下配置"^uni-(.*)":"@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}},//其他内容pages:[//...]}在template中使用组件:
无
2022年10月
本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。
您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。
a)授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。
b)您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app,或服务端脱离uniCloud(如涉及uniCloud)。
d)本协议不构成代理关系。
DCloud的责任限制“软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。
您的责任限制
b)您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。
d)如您违反本许可协议,需承担因此给DCloud造成的损失。
本协议签订地点为中华人民共和国北京市海淀区。
条款结束
uni-app框架示例,一套代码,同时发行到iOS、Android、H5、小程序等多个平台,请使用手机扫码快速体验uni-app的强大功能
Popup组件,提供常用的弹层
图标组件,用于展示移动端常见的图标,可自定义颜色、大小。
基于uni-app&uniCloud的后台管理项目模板(管理后台开发必备神器)
发布插件:149
下载9137617
赞赏1364
发布插件:2
下载1235444
赞赏347
下载108412
赞赏1091
发布插件:86
下载180681
赞赏1038
发布插件:1
下载340068
赞赏869
发布插件:34
下载304413
赞赏843
发布插件:110
下载138270
赞赏824
发布插件:18
下载213799
赞赏498
发布插件:134
下载86738
赞赏544
发布插件:62
下载49471
赞赏420
发布插件:5
下载73062
赞赏400
发布插件:11
下载186990
赞赏266
发布插件:13
下载82167
赞赏290
发布插件:17
下载127545
赞赏245
下载229782
赞赏159
Onefinebody…
DCloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位