- 🔥 完全重写 .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提供准确的移动端开发上下文,确保生成代码完全符合实际项目架构。
205 lines
5.0 KiB
JavaScript
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
|
|
},
|
|
}
|