Files
hzdyjs/mobile/src/utils/device.js
T
zlwu 28232d5d46 feat: 移动端开发规范重大更新
- 🔥 完全重写 .cursor/cursorrules-mobile.md (940行)
  * 基于实际mobile工程Vue 3.4.21+uniapp+uview-plus架构
  * 移除所有JeeSite相关内容,精准匹配实际项目
  * 新增11个完整章节:技术栈、项目结构、页面开发、组件规范等

- 📚 创建完整规范文档 docs/开发文档/移动端开发规范总结.md (800+行)
  * 涵盖从项目架构到部署的全流程指导
  * 提供可直接使用的页面和组件模板
  * 包含现代CSS变量设计系统和用户体验优化

- 🔄 同步更新主配置文件 .cursorrules
  * 更新移动端技术栈描述
  * 调整为Vue 3.4.21+uniapp+uview-plus 3.4.45架构

- 📝 完善变更记录
  * 详细记录规范更新背景和技术价值
  * 为后续维护提供完整历史记录

核心价值:解决规范与实际项目不匹配问题,为Cursor AI提供准确的移动端开发上下文,确保生成代码完全符合实际项目架构。
2025-07-04 15:51:33 +08:00

205 lines
5.0 KiB
JavaScript

// 设备信息和兼容性工具
export const deviceUtils = {
// 获取系统信息
getSystemInfo() {
try {
return uni.getSystemInfoSync()
} catch (e) {
console.error('获取系统信息失败:', e)
return {}
}
},
// 判断是否为低端设备
isLowEndDevice() {
const systemInfo = this.getSystemInfo()
// 判断条件:内存小于4GB 或 CPU性能较差
if (systemInfo.memSize && systemInfo.memSize < 4) {
return true
}
// Android 设备版本较低
if (systemInfo.platform === 'android' && systemInfo.system) {
const version = parseFloat(systemInfo.system.replace('Android ', ''))
if (version < 7.0) {
return true
}
}
// iOS 设备版本较低
if (systemInfo.platform === 'ios' && systemInfo.system) {
const version = parseFloat(systemInfo.system.replace('iOS ', ''))
if (version < 12.0) {
return true
}
}
return false
},
// 获取屏幕适配信息
getScreenInfo() {
const systemInfo = this.getSystemInfo()
return {
screenWidth: systemInfo.screenWidth,
screenHeight: systemInfo.screenHeight,
statusBarHeight: systemInfo.statusBarHeight,
safeAreaInsets: systemInfo.safeAreaInsets,
// 判断是否为刘海屏
hasNotch:
systemInfo.safeAreaInsets &&
systemInfo.safeAreaInsets.top > systemInfo.statusBarHeight,
// 判断是否为横屏
isLandscape: systemInfo.screenWidth > systemInfo.screenHeight,
}
},
// 获取设备类型
getDeviceType() {
const systemInfo = this.getSystemInfo()
if (systemInfo.uniPlatform === 'mp-weixin') {
return 'wechat-miniprogram'
} else if (systemInfo.uniPlatform === 'h5') {
return 'h5'
} else if (systemInfo.uniPlatform === 'app-plus') {
return systemInfo.platform === 'ios' ? 'ios-app' : 'android-app'
}
return 'unknown'
},
}
// 网络状态管理
export const networkUtils = {
// 获取网络状态
getNetworkType() {
return new Promise((resolve) => {
uni.getNetworkType({
success: (res) => {
resolve(res.networkType)
},
fail: () => {
resolve('unknown')
},
})
})
},
// 监听网络状态变化
onNetworkStatusChange(callback) {
uni.onNetworkStatusChange(callback)
},
// 判断是否为弱网环境
async isWeakNetwork() {
const networkType = await this.getNetworkType()
return ['2g', '3g', 'slow'].includes(networkType)
},
// 根据网络状况调整请求策略
async getRequestConfig() {
const isWeak = await this.isWeakNetwork()
if (isWeak) {
return {
timeout: 30000, // 增加超时时间
retryTimes: 3, // 增加重试次数
useCache: true, // 优先使用缓存
}
}
return {
timeout: 10000,
retryTimes: 1,
useCache: false,
}
},
}
// 性能优化工具
export const performanceUtils = {
// 图片懒加载配置
getImageLoadConfig() {
const isLowEnd = deviceUtils.isLowEndDevice()
return {
// 低端设备减少同时加载的图片数量
concurrent: isLowEnd ? 2 : 5,
// 低端设备使用较小的图片
quality: isLowEnd ? 'low' : 'high',
// 预加载距离
threshold: isLowEnd ? 100 : 300,
}
},
// 动画性能配置
getAnimationConfig() {
const isLowEnd = deviceUtils.isLowEndDevice()
return {
// 低端设备禁用复杂动画
enableComplexAnimation: !isLowEnd,
// 动画持续时间
duration: isLowEnd ? 200 : 300,
// 动画缓动函数
easing: isLowEnd ? 'linear' : 'ease-out',
}
},
// 列表滚动优化
getScrollConfig() {
const isLowEnd = deviceUtils.isLowEndDevice()
return {
// 虚拟滚动阈值
virtualScrollThreshold: isLowEnd ? 50 : 100,
// 缓冲区大小
bufferSize: isLowEnd ? 5 : 10,
// 是否开启上拉加载节流
enableThrottle: isLowEnd,
}
},
}
// 适配工具
export const adaptUtils = {
// 获取安全区域样式
getSafeAreaStyle() {
const screenInfo = deviceUtils.getScreenInfo()
return {
paddingTop: `${screenInfo.safeAreaInsets?.top || screenInfo.statusBarHeight || 0}px`,
paddingBottom: `${screenInfo.safeAreaInsets?.bottom || 0}px`,
paddingLeft: `${screenInfo.safeAreaInsets?.left || 0}px`,
paddingRight: `${screenInfo.safeAreaInsets?.right || 0}px`,
}
},
// 获取底部安全区域高度
getBottomSafeHeight() {
const screenInfo = deviceUtils.getScreenInfo()
return screenInfo.safeAreaInsets?.bottom || 0
},
// 获取顶部安全区域高度
getTopSafeHeight() {
const screenInfo = deviceUtils.getScreenInfo()
return screenInfo.safeAreaInsets?.top || screenInfo.statusBarHeight || 0
},
// rpx转px
rpxToPx(rpx) {
const systemInfo = deviceUtils.getSystemInfo()
return (rpx * systemInfo.screenWidth) / 750
},
// px转rpx
pxToRpx(px) {
const systemInfo = deviceUtils.getSystemInfo()
return (px * 750) / systemInfo.screenWidth
},
}