五、工具函数与扩展能力
5.1 内置工具库
uView内置了大量实用的JS工具函数，挂载在uni.$u对象上。
时间处理
// 时间格式化
uni.$u.timeFormat(new Date(), 'yyyy-mm-dd HH:MM:ss');
// 时间戳格式化
uni.$u.timeFrom(1612959739, true);
// 相对时间
uni.$u.timeFrom(new Date() - 3600000); // 1小时前
数据验证
// 手机号验证
uni.$u.test.mobile('13812345678'); // true
// 邮箱验证
uni.$u.test.email('test@example.com'); // true
// 身份证验证
uni.$u.test.idCard('11010119900307663X'); // true
// URL验证
uni.$u.test.url('https://uviewui.com'); // true
防抖节流
// 防抖
const debounced = uni.$u.debounce(() => {
console.log('防抖执行');
}, 300);
// 节流
const throttled = uni.$u.throttle(() => {
console.log('节流执行');
}, 300);
对象操作
// 深度克隆
const clone = uni.$u.deepClone({ a: 1, b: { c: 2 } });
// 对象合并
const merged = uni.$u.deepMerge(obj1, obj2);
// 对象转URL参数
const params = uni.$u.queryParams({ name: 'test', id: 1 }); // "name=test&id=1"
5.2 HTTP请求封装
uView Pro提供了统一的HTTP请求插件，支持请求/响应拦截器、全局配置等。
// 基础请求
import { http } from 'uview-pro';
// GET请求
http.get('/api/user', { id: 1 }).then(res => {
console.log(res);
});
// POST请求
http.post('/api/login', { username: 'test', password: '123456' }).then(res => {
console.log(res);
});
// PUT请求
http.put('/api/user/1', { name: 'new name' });
// DELETE请求
http.delete('/api/user/1');
5.3 全局配置
uView支持通过setConfig方法进行全局配置。
uni.$u.setConfig({
// 修改$u.config对象的属性
config: {
// 修改默认单位为rpx
unit: 'rpx'
},
// 修改$u.props对象的属性（组件默认参数）
props: {
radio: {
size: 15
}
}
});
六、性能优化
6.1 按需加载原理
uView的按需加载是通过uni-app的easycom机制实现的，而非webpack的Tree Shaking。配置easycom规则后，只有实际使用的组件才会被打包。
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}
6.2 手动按需引入
如果easycom配置遇到问题，也可以采用手动引入的方式：
// 引入具体组件
import uButton from 'uview-ui/components/u-button/u-button.vue';
import 'uview-ui/components/u-button/index.scss';
export default {
components: {
uButton
}
};
6.3 性能注意事项
避免过度使用u-row和u-col：在列表数据遍历时，u-row和u-col组件的大量计算属性可能导致性能问题。对于复杂列表，建议使用原生Flex布局。
按需引入组件：通过easycom配置确保未使用的组件不会被打包。
图标按需使用：uView内置了丰富的图标，但建议按需使用，避免全量引入。
合理使用骨架屏：对于数据加载较慢的页面，使用u-skeleton组件提升用户体验。
七、uView Pro（Vue 3版本）新特性
uView Pro是全面支持Vue 3.0和TypeScript的uni-app生态框架，基于uView 1.8.8使用TypeScript完全重构。
7.1 核心改进
7.2 新增组件亮点
u-fab（悬浮按钮）：支持拖动吸边、多位置预设。
u-text：支持电话拨打、日期格式化、超链接、姓名脱敏、金额显示等多种模式。
u-loading-popup：可配置的加载弹窗，支持纵向/横向两种样式。
u-textarea：从u-input拆分独立，增强字数统计、自动高度等功能。
u-root-portal：根节点传送组件，实现Portal模式，适用于模态、全局浮层等场景。
来源：
http://oplhc.cn/
