uniapp-x开发uvue和uts笔记技巧点

1. uvue文件默认使用了overflow: hidden;可以使用 overflow: visible;允许溢出

2. 封装的取值方法：
``` js
/**
 * 从对象中安全获取嵌套字段的值（支持多层级路径和类型推断）
 * @param data 源对象
 * @param path 路径，支持字符串（如 "user.profile.name"）或数组（如 ["user", "profile", "name"]）
 * @param defaultValue 默认值，当路径不存在时返回此值，类型由该值推断返回类型
 * @returns 获取到的值，类型由 defaultValue 推断
 * 
 * @example
 * // 数据源示例
 * const data = {
 *   code: 200,
 *   message: "success",
 *   data: {
 *     user: {
 *       id: 1001,
 *       user_name: "张三",
 *       user_photo: "https://example.com/photo.jpg",
 *       grade: 500,
 *       profile: {
 *         name: "张三",
 *         age: 25,
 *         email: "zhangsan@example.com",
 *         address: {
 *           province: "广东省",
 *           city: "深圳市",
 *           detail: "南山区科技园"
 *         }
 *       },
 *       userIntegral: {
 *         integral: 1000,
 *         freeze_integral: 200
 *       },
 *       settings: {
 *         notifications: true,
 *         theme: "dark"
 *       }
 *     },
 *     items: [
 *       { id: 1, name: "商品1", price: 99.9 },
 *       { id: 2, name: "商品2", price: 199.9 }
 *     ],
 *     total: 299.8
 *   }
 * } as UTSJSONObject
 * 
 * // 单层路径
 * const code = getValue(data, "code", 0) // 返回 200 (number 类型)
 * const message = getValue(data, "message", "") // 返回 "success" (string 类型)
 * 
 * // 多层路径（字符串）
 * const userName = getValue(data, "data.user.user_name", "") // 返回 "张三" (string 类型)
 * const age = getValue(data, "data.user.profile.age", 0) // 返回 25 (number 类型)
 * const city = getValue(data, "data.user.profile.address.city", "") // 返回 "深圳市" (string 类型)
 * 
 * // 多层路径（数组）
 * const userId = getValue(data, ["data", "user", "id"], 0) // 返回 1001 (number 类型)
 * const integral = getValue(data, ["data", "user", "userIntegral", "integral"], 0) // 返回 1000 (number 类型)
 * 
 * // 获取嵌套对象
 * const profile = getValue(data, "data.user.profile", null as UTSJSONObject | null) // 返回 profile 对象
 * const userIntegral = getValue(data, "data.user.userIntegral", null as UTSJSONObject | null) // 返回积分对象
 * 
 * // 获取数组
 * const items = getValue(data, "data.items", [] as any[]) // 返回商品数组
 * 
 * // 获取布尔值
 * const notifications = getValue(data, "data.user.settings.notifications", false) // 返回 true (boolean 类型)
 * 
 * // 路径不存在时返回默认值
 * const notExist = getValue(data, "data.user.phone", "") // 返回 "" (默认值)
 * const deepNotExist = getValue(data, "data.user.profile.phone", "") // 返回 "" (默认值)
 */
function getValue<T>(data: UTSJSONObject | null | undefined, path: string | string[], defaultValue: T): T {
	if (data == null) {
		return defaultValue
	}
	
	// 将路径字符串转换为数组
	let pathArray: string[] = []
	if (typeof path === 'string') {
		pathArray = path.split('.')
	} else {
		pathArray = path
	}
	
	// 如果路径为空，返回默认值
	if (pathArray.length === 0) {
		return defaultValue
	}
	
	// 逐级访问对象属性
	// 先将 data 转换为 JSON 字符串再解析，确保是纯对象结构
	let currentObj: UTSJSONObject
	try {
		const jsonStr = JSON.stringify(data)
		currentObj = JSON.parse(jsonStr) as UTSJSONObject
	} catch (e) {
		return defaultValue
	}
	
	let current: any = currentObj
	for (let i = 0; i < pathArray.length; i++) {
		const key = pathArray[i]
		if (current == null || typeof current !== 'object') {
			return defaultValue
		}
		
		// 将 current 转换为 UTSJSONObject 来访问属性
		const obj = current as UTSJSONObject
		const value = obj[key]
		
		if (value == null) {
			return defaultValue
		}
		
		// 如果是最后一级，返回该值
		if (i === pathArray.length - 1) {
			return value as T
		}
		
		// 否则继续深入下一级
		current = value
	}
	
	return defaultValue
}

```

2025-12-25 11:22:43 (16阅读) 作者:王乐园分类:技术标签:uni-app