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 = 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

相关推荐
y先森1 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
天涯倦客的美丽人生1 小时前
2024年11月最新版Adobe PhotoShop(26.0)中文版下载
ui·adobe·photoshop
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js