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

news2024/7/6 18:54:16

引言

随着移动互联网的快速发展,跨平台应用开发成为了开发者们关注的焦点。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 = 30
		radio: {
			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.coloradmin.cn/o/1871580.html

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

相关文章

2024上海CDIE 参展预告 | 一站式云原生数字化平台已成趋势

为什么企业需要进行数字化转型?大家都在讨论的数字化转型面临哪些困境?2024.6.25-26 CDIE数字化创新博览会现场,展位【A18】,期待与您相遇,共同探讨企业如何利用数字化技术驱动业务增长。 一、展会介绍——CDIE数字化…

C语言 | Leetcode C语言题解之第201题数字范围按位与

题目&#xff1a; 题解&#xff1a; int rangeBitwiseAnd(int m, int n) {while (m < n) {// 抹去最右边的 1n & (n - 1);}return n; }

【Linux操作系统】进程地址空间与动态库加载

当系统执行一个依赖动态库的可执行程序时&#xff0c;系统不仅要将该可执行程序加载到内存中还要由加载器将动态库加载到内存中&#xff08;静态库没有&#xff09;&#xff0c;因此必须要让加载器知道该动态库的名称&#xff0c;系统会默认在/lib64路径下查找&#xff0c;解决…

Java将list数组中重复的对象进行去重

/*** 数组去重*/ public class ArrayDistinct {public static void main(String[] args) {ArrayList<Object> list new ArrayList<>();JSONObject jsonObject1 new JSONObject();jsonObject1.put("name","张三");jsonObject1.put("age&…

Vite: 关于Rollup打包

概述 Rollup 是一款基于 ES Module 模块规范实现的 JavaScript 打包工具&#xff0c;在前端社区中赫赫有名&#xff0c;同时也在 Vite 的架构体系中发挥着重要作用不仅是 Vite 生产环境下的打包工具&#xff0c;其插件机制也被 Vite 所兼容&#xff0c;可以说是 Vite 的构建基…

kubekey 安装高可用 kubernetes 集群

1. 准备环境 1.1 机器准备 4 台机器&#xff0c;操作系统&#xff1a;Ubuntu 24.04/RHEL8/CentOS9 10.111.3.53 master1 10.111.3.54 master2 10.111.3.55 master3 10.111.3.57 node41.2 安装依赖和配置 所有节点都需要执行&#xff1a; Ubuntu: apt-get install -y soca…

JeeSite中的数据库表动态建模与管理模块(DBM)

一、引言 在现代软件开发中&#xff0c;数据库作为系统数据存储和管理的核心&#xff0c;其设计和维护的灵活性、可扩展性对于系统的长期稳定运行至关重要。JeeSite作为一款流行的企业级快速开发平台&#xff0c;其数据库表动态管理模块&#xff08;DBM&#xff09;提供了强大…

UWB:DS-TWR( Double-sided two-way ranging)双边测距公式推导:为啥是乘法?

UWB DS-TWR&#xff08; Double-sided two-way ranging&#xff09;双边测距为啥是乘法&#xff1f;&#xff1f; 公式&#xff1a; 我们先看单边 Single-Sided Two-Way Ranging (SS-TWR) 单边很好理解。 symmetric double-sided TWR (SDS-TWR)对称的双边测距 再看双边 Trou…

相机系列——从相机畸变到托勒密地图

by 木一 标签&#xff1a;#相机畸变 #畸变纠正 #鱼眼相机 #折射定律 #托勒密地图 引言 前文[1][2]我们介绍了针孔相机模型&#xff0c;以及针孔相机模型的相机标定过程&#xff0c;但针孔相机模型是对相机成像最简单的描述&#xff0c;实际的相机成像过程要远复杂很多。 首先…

C++ | Leetcode C++题解之第201题数字范围按位与

题目&#xff1a; 题解&#xff1a; class Solution { public:int rangeBitwiseAnd(int m, int n) {while (m < n) {// 抹去最右边的 1n n & (n - 1);}return n;} };

Flutter循序渐进==>Dart之类型、控制流和循环

导言 磨刀不误砍柴工&#xff0c;想搞好Flutter&#xff0c;先学好Flutter&#xff0c;还是本着我学Python的方法&#xff0c;先从数据类型、控制流和循环开始&#xff0c;这是每一种编程语言必用的。编程语言是相通的&#xff0c;基本精通一种后&#xff0c;学其它的就变得很…

macos Automator自动操作 app, 创建自定义 应用程序 app 的方法

mac内置的这个 自动操作 automator 应用程序&#xff0c;可以帮助我们做很多的重复的工作&#xff0c;可以创建工作流&#xff0c; 可以录制并回放操作&#xff0c; 还可以帮助我们创建自定的应用程序&#xff0c;下面我们就以创建一个自定义启动参数的chrome.app为例&#xff…

Unity解决报错:Execution failed for task ‘:unityLibrary:BuildIl2CppTask‘

目录 编辑器版本2020.3.33f1 及 2021.3.15f1 直接导出apk或aar报错(虽然会自动生成temp的AS工程&#xff0c;经过打开验证 也是无解的)&#xff1b; 唯一解决办法&#xff1a;Unity导出As工程没问题&#xff1b; 编辑器版本2020.3.33f1 及 2021.3.15f1 直接导出apk或aar报…

黑马点评项目总结1-使用Session发送验证码和登录login和 使用Redis存储验证码和Redis的token登录

黑马先是总结了从session实现登录&#xff0c;然后是因为如果使用了集群方式的服务器的话&#xff0c;存在集群共享session互相拷贝效率低下的问题&#xff0c;接着引出了速度更快的内存型的kv数据库Redis&#xff0c; 使用Session发送验证码和登录login 举个例子&#xff1a…

深度神经网络——决策树的实现与剪枝

概述 决策树 是一种有用的机器学习算法&#xff0c;用于回归和分类任务。 “决策树”这个名字来源于这样一个事实&#xff1a;算法不断地将数据集划分为越来越小的部分&#xff0c;直到数据被划分为单个实例&#xff0c;然后对实例进行分类。如果您要可视化算法的结果&#xf…

SQL注入和防御方法

SQL注入是一种攻击手段&#xff0c;通过在SQL查询中插入恶意SQL代码片段&#xff0c;欺骗数据库服务器执行非授权的数据库操作。这种攻击可能导致数据泄露、篡改或丢失。为了防范SQL注入&#xff0c;可以采取以下几种策略&#xff1a; 1.使用预编译语句&#xff08;Prepared St…

OBD诊断(ISO15031) 01服务

文章目录 功能简介PID 的功能请求和响应1、read-supported PIDs1.1、请求1.2、肯定响应 2、read PID value1.1、请求1.2、肯定响应 3、同时请求多个PID3、同时读取多个PID数据 Parameter definition报文示例1、单个PID请求和读取2、多个PID请求和读取 功能简介 01服务&#xf…

Linux双网卡默认路由的metric设置不正确,导致SSH连接失败问题定位

测试环境 VMware虚拟机 RockyLinux 9 x86_64 双网卡&#xff1a;eth0(访问外网): 10.206.216.92/24; eth1(访问内网) 192.168.1.4/24 问题描述 虚拟机重启后&#xff0c;SSH连接失败&#xff0c;提示"Connection time out"&#xff0c;重启之前SSH连接还是正常的…

2.Android逆向协议-了解常用的逆向工具

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;微尘网校 上一个内容&#xff1a;1.Android逆向协议-环境搭建 常用的工具&#xff1a;AndroidKiller、jadx、JEB、IDA AndroidKiller…

华为云安全防护,九河云综合分解优劣势分析

随着全球化的发展&#xff0c;越来越多的企业开始寻求在国际市场上扩展业务&#xff0c;这一趋势被称为企业出海。然而&#xff0c;企业在海外扩张面临诸多隐患与安全挑战&#xff0c;其中因为地域的不同&#xff0c;在安全性方面与国内相比会变得薄弱&#xff0c;从而导致被黑…