uView 2.0:uni-app生态的利剑出鞘,引领UI框架新纪元

引言

随着移动互联网的快速发展,跨平台应用开发成为了开发者们关注的焦点。uni-app,一个基于Vue.js的跨平台应用开发框架,因其高效、易用的特性而广受欢迎。在uni-app的生态系统中,UI框架的选择对于开发者而言至关重要。今天,我们将深入探讨uView 2.0——一款专为uni-app打造的UI框架,如何以其强大的功能和便捷的工具体验,成为开发者们的得力助手。

图片

一、uView 2.0的发布背景

在移动互联网应用开发中,界面设计和用户体验至关重要。然而,对于跨平台应用开发而言,如何确保UI在不同平台上的统一性和一致性,是开发者们面临的一大挑战。uView UI框架的出现,为uni-app开发者们提供了一个解决方案。uView 2.0作为uView UI框架的最新版本,不仅继承了前版本的优秀特性,还进行了大量的优化和升级,以满足开发者们日益增长的需求。

图片

二、uView 2.0的新特性与改进

uView 2.0在继承了uView 1.0版本优秀特性的基础上,进行了大量的优化和升级。以下是uView 2.0的主要新特性与改进:

  1. 全面兼容nvue:uView 2.0已完美兼容nvue,使得开发者们可以更加灵活地选择使用vue或nvue进行开发。

  2. 表单校验trigger触发器参数修复:解决了表单校验trigger触发器参数无效的问题,提高了表单校验的准确性和可靠性。

  3. u-input组件password属性修复:修复了u-input组件的password属性在动态切换为false时失效的问题,提升了用户体验。

  4. 微信小程序用户同意隐私协议事件回调:新增了微信小程序用户同意隐私协议事件回调功能,帮助开发者更好地处理用户隐私协议问题。

  5. 支付宝小程序picker样式问题修复:解决了支付宝小程序picker样式问题,提高了组件在不同平台上的兼容性。

  6. u-modal添加duration字段:u-modal组件新增了duration字段,用于控制动画过度时间,为开发者提供了更多的定制选项。

  7. tabs增加长按事件支持:tabs组件增加了长按事件支持,为开发者提供了更多的交互方式。

  8. u-avatar square属性修复:修复了u-avatar组件square属性在小程序open-data下无效的问题,确保了组件在不同场景下的正常表现。

除了以上主要的新特性与改进外,uView 2.0还进行了一些其他的修复和优化工作,以进一步提升框架的稳定性和易用性。

图片

三、uView 2.0在uni-app生态系统中的作用

作为uni-app生态系统中的一款优秀UI框架,uView 2.0在提升开发者开发效率、优化用户体验等方面发挥了重要作用。通过提供全面的组件和便捷的工具,uView 2.0使得开发者们能够更加轻松、高效地开发出高质量的跨平台应用。

安装

Hbuilder X方式

下载方式配置文档

如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续在uni_modules对uView进行一键升级。

  • 在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可。

注意: 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。

下载地址:https://ext.dcloud.net.cn/plugin?id=1593

#

NPM方式

npm方式配置文档

在项目根目录执行如下命令即可:

 

// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y

npm install uview-ui@2.0.36

// 更新
// npm update uview-ui

copy

注意: 此安装方式必须要按照npm方式安装的配置中的说明配置了才可用,且项目名称不能有中文字符。

#

版本查询

有两种方式可以查询到正在使用的uView的版本:

 

// 通过`console.log`打印的形式
console.log(uni.$u.config.v);

// 可以查阅uView的配置文件得知当前版本号,具体位置为:
/uview-ui/libs/config/config.js

四、uView 2.0的未来展望

展望未来,uView UI框架将继续保持与uni-app生态系统的紧密联系,不断优化和升级自身功能。同时,uView团队也将积极听取开发者的反馈和建议,持续改进和完善框架的易用性和稳定性。相信在不久的将来,uView UI框架将成为更多uni-app开发者的首选UI框架。

图片

安装配置

由于uView支持npm下载的方式安装,二者配置几乎一致,因为某些平台的兼容性,在配置easycom稍有不同,为了不造成混淆,这里将两种 方式分开说明:

  • NPM方式安装的配置

  • 下载方式安装的配置

#默认单位配置2.0.12

温馨提示: 2.0.25版本后,建议通过下方的setCofig方法进行设置。

在uView1.x中,组件参数如果为数值的话,默认为rpx单位,但是rpx在平板上会导致尺寸超大,为了更高的可用性,所以uView2.x将单位默认改为px,如果您出于 某些需求,需要将单位改为rpx,可以在main.js中进行如下配置即可:

 

// main.js,注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'

copy

#修改uView内置配置方案 2.0.25

我们可以通过setCofig方法配置uView内部的各项内置配置,目前可配置的有configpropszIndexcolor属性,目前只建议修改configprops属性, 除非您清楚知道自己的修改所带来的影响。

// main.js
import uView from 'uview-ui'
Vue.use(uView)// 调用setConfig方法,方法内部会进行对象属性深度合并,可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({// 修改$u.config对象的属性config: {// 修改默认单位为rpx,相当于执行 uni.$u.config.unit = 'rpx'unit: 'rpx'},// 修改$u.props对象的属性props: {// 修改radio组件的size参数的默认值,相当于执行 uni.$u.props.radio.size = 30radio: {size: 15}// 其他组件属性配置// ......}
})

五、结语

uView 2.0的发布标志着uView UI框架在uni-app生态系统中的又一重要里程碑。通过全面兼容nvue、修复和改进现有组件功能等一系列措施,uView 2.0为开发者们提供了更加高效、便捷的UI开发体验。相信在未来的发展中,uView UI框架将继续引领uni-app生态系统的UI框架新纪元。

项目文档:

https://uviewui.com/components/intro.html

项目下载地址:

https://ext.dcloud.net.cn/plugin?id=1593

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/36696.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云安全是全球组织最优先考虑的问题

关注公众号网络研究观,阅读内容全文。 随着越来越多的数据泄露和应用程序蔓延使防御变得更加复杂,云安全已成为全球组织关注的重点。 这是泰雷兹对全球 3,000 名 IT 安全专业人士进行的一项调查的结果,调查发现三分之一的受访者将云安全列为…

【YOLOv5/v7改进系列】引入RT-DETR的RepC3

一、导言 RT-DETR(Real-Time Detection Transformer)是一种针对实时目标检测任务的创新方法,它旨在克服YOLO系列和其他基于Transformer的检测器存在的局限性。RT-DETR的主要优点包括: 无NMS(非极大值抑制)…

擎耀解码汽车大灯照明系统电动调节步进电机位置反馈的解决方案

在现代汽车设计中,智能照明系统扮演着至关重要的角色。其中,汽车大灯的电动调节功能不仅提高了夜间行车的安全性,还增强了车辆的科技感和便利性。然而,要实现精准的大灯角度调节,步进电机的位置反馈机制尤为关键。擎耀…

第24篇 滑动开关控制LED<二>

Q&#xff1a;如何使用Intel FPGA Monitor Program创建滑动开关控制LED工程并运行呢&#xff1f; A&#xff1a;创建工程的基本过程与前面的Intel FPGA Monitor Program的使用<三>一样&#xff0c;不同的地方是&#xff0c;本实验工程用到了开发板的外设硬件LED和SW&…

Android 13 为应用创建快捷方式

参考 developer.android.google.cn 创建快捷方式 来自官网的说明&#xff1a; 静态快捷方式 &#xff1a;最适合在用户与应用互动的整个生命周期内使用一致结构链接到内容的应用。由于大多数启动器一次仅显示四个快捷方式&#xff0c;因此静态快捷方式有助于以一致的方式执行…

【b站-湖科大教书匠】1 计算机网络概述-计算机网络微课堂

课程地址&#xff1a;【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】 https://www.bilibili.com/video/BV1c4411d7jb/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 1 概述 1.1 计算机网络在信息时代的作用 1.2 因特网概述…

技术突破:llamafile一键部署大模型,释放AI潜力

目录 一、引言二、什么是llamafile&#xff1f;1、设计目标2、技术构成3、与传统部署方式的对比4、一键部署的优势 三、核心特性1、一键部署的便捷性2、跨平台支持3、独立可执行文件4、简化的分发流程5、技术细节6、用户体验7、安全性和隐私 四、部署流程详解1、下载模型2、操作…

移动UI:我的界面,竟然有这么设计方式,而且个个都简洁美观。

移动应用中的个人中心页面通常包含以下内容&#xff1a; 1. 用户头像和昵称&#xff1a;展示用户的头像和昵称&#xff0c;用于个人身份的展示和识别。 2. 个人资料&#xff1a;展示用户的个人信息&#xff0c;如姓名、性别、生日、联系方式等。用户可以在这里查看和编辑自己…

不要小看3D元素,融入大屏后,立马带来5个提升。

将3D元素引入可视化大屏可以带来多方面的好处&#xff0c;包括但不限于以下几点&#xff1a; 1. 更生动的展示效果&#xff1a; 通过引入3D元素&#xff0c;可视化大屏可以呈现更加生动、立体的展示效果&#xff0c;使得数据和信息更加直观、形象化&#xff0c;吸引观众的注意…

Python 全栈体系【三阶】(一)

三阶&#xff1a;Django - Redis - Ajax 第一章 Django 一、Django 基础 1. 基础 Django是一个开源的、重量级的WEB开发框架。 Django的官网&#xff1a; https://www.djangoproject.com 2. 安装与卸载 Django Django目前最新的版本为4.2,教学环境使用3.2 2.1 在线安装 …

[分布式网络通讯框架]----MprpcChannel以及ZkClient实现

在调用远程发布的rpc方法的Login时&#xff0c;我们使用了UserServiceRpc_Stub类&#xff0c;即fixbug::UserServiceRpc_Stub stub(new MprpcChannel());&#xff0c;来看看这个类的底层 实际上&#xff0c;是一个RpcChannel类&#xff0c;进入RpcChannel类 底层又是一个抽象类…

Amazon OpenSearch Service 现在支持 JSON Web Token(JWT)身份验证和授权

最近&#xff0c;Amazon OpenSearch 推出了一个新功能&#xff0c;支持 JWT 认证和授权。虽然这个功能在开源的 OpenSearch 中早已存在&#xff0c;但在托管的 Amazon OpenSearch 中的实现一直不够理想。 此前的授权方式 控制台登录 内部数据库&#xff1a;使用基本的用户名…

Android开发系列(十一)Jetpack Compose之Dialog

Dialogs是在应用程序中显示一些额外信息或进行用户交互的常见功能。Jetpack Compose中的Dialog可以通过使用AlertDialog组件来创建。 基本用法 下面通过示例来了解Dialog的使用。 OptIn(ExperimentalMaterial3Api::class) Composable fun AlertDialogExample(onDismissReques…

Redis 7.x 系列【9】数据类型之自动排重集合(Set)

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 前言2. 常用命令2.1 SADD2.2 SCARD2.3 SISMEMBER2.4 SREM2.5 SSCAN2.6 SDIFF2.7 SU…

DiAtom 共生菌固氮作用产生的碳输出(ANACONDAS)

Amazon iNfluence on the Atlantic: CarbOn export from Nitrogen fixation by DiAtom Symbioses (ANACONDAS) 亚马逊对大西洋的影响&#xff1a;DiAtom 共生菌固氮作用产生的碳输出&#xff08;ANACONDAS&#xff09; 简介 该研究项目探讨了亚马逊河羽流对热带北大西洋西部…

ECharts 源码代码规范

代码规范 - Apache EChartsApache ECharts&#xff0c;一款基于JavaScript的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。https://echarts.apache.org/zh/coding-standard.html 源文件 [强制] JavaScr…

STM32-hal库学习(4)--usart/uart通信 (同时显示在oled)

前言&#xff1a; 关于usart详解&#xff1a; stm32-USART通信-CSDN博客 因为在oled上显示&#xff0c;我们直接在上一个工程进行修改&#xff1a; STM32_hal库学习&#xff08;3&#xff09;-OLED显示-CSDN博客 其他配置与oled显示工程保持不变&#xff0c;打开oled文件的…

并发编程工具集——Lock和Condition(上)(十二)

简述&#xff1a;Java SDK 并发包通过 Lock 和 Condition 两个接口来实现管程&#xff0c;其中 Lock 用于解决互斥问题&#xff0c;Condition 用于解决同步问题。 再造管程的理由和期望 理由&#xff1a;synchronized 没有办法解决“破坏不可抢占条件方案”。 原因是synchroniz…

Linux kernel 与 设备树

Linux kernel 与 设备树 1 介绍1.1 概述1.2 发展历程1.3 各版本发布时间及特色1.4 Linux 单内核1.5 Linux 内核网址1.6 NXP 官方镜像与 野火 鲁班猫镜像的区别 2 Linux 内核组成2.1 进程管理2.2 内存管理2.3 文件系统2.4 设备管理2.5 网络功能 3 Linux 内核编译3.1 编译 Kernel…