php网站开发招招聘网页美工设计实训心得

在 Uniapp 开发中，uni.getSystemInfo 和 uni.getSystemInfoSync 都是用于获取设备系统信息的 API，但它们的调用方式和适用场景有所不同。

一、基本区别

特性	uni.getSystemInfo	uni.getSystemInfoSync
调用方式	异步获取	同步获取
返回值	通过回调函数返回	直接返回系统信息对象
执行时机	需要等待回调	立即执行
使用场景	一般场景	需要立即获取信息的场景

二、uni.getSystemInfo (异步获取)

基本用法

uni.getSystemInfo({success: (res) => {console.log(res);},fail: (err) => {console.error('获取系统信息失败', err);},complete: () => {console.log('获取系统信息完成');}
});

Promise 封装

function getSystemInfoAsync() {return new Promise((resolve, reject) => {uni.getSystemInfo({success: resolve,fail: reject});});
}// 使用
async function useSystemInfo() {try {const systemInfo = await getSystemInfoAsync();console.log(systemInfo);} catch (err) {console.error('获取系统信息失败', err);}
}

三、uni.getSystemInfoSync (同步获取)

基本用法

try {const systemInfo = uni.getSystemInfoSync();console.log(systemInfo);
} catch (err) {console.error('获取系统信息失败', err);
}

四、返回的系统信息对象

两种方法返回的对象结构相同，包含以下常用属性：

属性名	类型	说明
brand	String	设备品牌（如：Apple、HUAWEI等）
model	String	设备型号（如：iPhone 13、Redmi K40等）
pixelRatio	Number	设备像素比
screenWidth	Number	屏幕宽度（单位：px）
screenHeight	Number	屏幕高度（单位：px）
windowWidth	Number	可使用窗口宽度（单位：px）
windowHeight	Number	可使用窗口高度（单位：px）
statusBarHeight	Number	状态栏高度（单位：px）
platform	String	运行平台（如：ios、android等）
system	String	操作系统及版本（如：iOS 15.2、Android 11等）
language	String	系统语言（如：zh-CN、en-US等）
version	String	客户端基础库版本
fontSizeSetting	Number	用户设置的字体大小（单位：px）
SDKVersion	String	客户端基础库版本（小程序端）
benchmarkLevel	Number	设备性能等级（仅微信小程序）
albumAuthorized	Boolean	相册授权状态（仅微信小程序）
cameraAuthorized	Boolean	摄像头授权状态（仅微信小程序）
locationAuthorized	Boolean	定位授权状态（仅微信小程序）
microphoneAuthorized	Boolean	麦克风授权状态（仅微信小程序）
notificationAuthorized	Boolean	通知授权状态（仅微信小程序）

五、使用场景对比

1. 适合使用 uni.getSystemInfo 的场景

• 不需要立即获取系统信息
• 在异步函数或Promise链中使用
• 需要处理可能的错误情况

onLoad() {uni.getSystemInfo({success: (res) => {this.setData({isIPhoneX: res.model.includes('iPhone X')});}});
}

2. 适合使用 uni.getSystemInfoSync 的场景

• 需要立即获取系统信息
• 在同步代码流程中
• 简单的条件判断

onLoad() {const systemInfo = uni.getSystemInfoSync();this.isIPhoneX = systemInfo.model.includes('iPhone X');// 根据平台设置样式if (systemInfo.platform === 'ios') {this.setData({ paddingTop: '44px' });} else {this.setData({ paddingTop: '48px' });}
}

六、实际应用示例

1. 适配全面屏

// 在页面或组件中
data() {return {isFullScreen: false,statusBarHeight: 0,safeAreaInsets: { top: 0, bottom: 0 }};
},created() {const systemInfo = uni.getSystemInfoSync();// 判断是否是全面屏设备this.isFullScreen = systemInfo.screenHeight / systemInfo.screenWidth > 1.8;// 获取状态栏高度this.statusBarHeight = systemInfo.statusBarHeight || 0;// 获取安全区域（App端）if (systemInfo.safeArea) {this.safeAreaInsets = {top: systemInfo.safeArea.top,bottom: systemInfo.screenHeight - systemInfo.safeArea.bottom};}
}

2. 平台特定样式

<template><view :style="{ paddingTop: paddingTop + 'px' }"><!-- 页面内容 --></view>
</template><script>
export default {data() {return {paddingTop: 0};},mounted() {const systemInfo = uni.getSystemInfoSync();this.paddingTop = systemInfo.statusBarHeight + (systemInfo.platform === 'ios' ? 44 : 48);}
};
</script>

3. 设备判断

// 判断是否是iOS设备
function isIOS() {const systemInfo = uni.getSystemInfoSync();return systemInfo.platform === 'ios';
}// 判断是否是Android设备
function isAndroid() {const systemInfo = uni.getSystemInfoSync();return systemInfo.platform === 'android';
}// 判断是否是iPhone X及以上机型
function isIPhoneX() {const systemInfo = uni.getSystemInfoSync();return /iPhone X|iPhone 1[1-9]|iPhone [1-9][0-9]/.test(systemInfo.model);
}

七、注意事项

1. 平台差异：

   • 某些属性只在特定平台有效（如 safeArea 主要在App端有效）
   • 小程序端和H5端返回的信息可能比App端少

2. 性能考虑：

   • 频繁调用同步API可能会影响性能
   • 对于不常变化的信息，可以考虑缓存结果

3. 错误处理：

   • 同步方法需要用 try-catch 包裹
   • 异步方法需要处理 fail 回调

4. 时机问题：

   • 在应用启动时，某些信息可能还未准备好
   • 对于关键信息，建议在 onReady 或 mounted 生命周期中获取

5. 单位转换：

   • 返回的尺寸单位是 px，需要根据需要进行 rpx 转换

通过合理使用这两个API，可以更好地实现多端适配和设备特性检测，提升应用的用户体验。