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内部的各项内置配置，目前可配置的有config、props、zIndex、color属性，目前只建议修改config、props属性， 除非您清楚知道自己的修改所带来的影响。

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