写在前面
上节中我们讲到小程序的request请求以及上传文件操作，掌握了小程序基本的控件使用，这节我们要来探讨小程序获取系统信息，识别当前环境
系统信息的概念
uni-app提供了异步(uni.getSystemInfo)和同步((uni.getSystemInfoSync)的2个API获取系统信息。
系统信息返回的内容非常多，各操作系统、各家小程序、各浏览器对它们的定义也不相同。uni-app里重新梳理了这些概念，同时为了向下兼容也保留了这些平台原来的概念，但不推荐使用。
按照运行环境层级排序，从底层向上，uni-app有6个概念：
device：运行应用的设备，如iphone、huawei
os：设备的操作系统，如 ios、andriod、windows、mac、linux
rom：基于操作系统的定制，Android系统特有概念，如miui、鸿蒙
host：运行应用的宿主程序，即OS和应用之间的运行环境，如浏览器、微信等小程序宿主、集成uniMPSDK的App。uni-app直接开发的app没有host概念
uni：uni-app框架相关的信息，如uni-app框架的编译器版本、运行时版本
app：开发者的应用相关的信息，如应用名称、版本
uni.getSystemInfo
调用代码示例
uni.getSystemInfo({ success: function (res) { console.log(res.appName) } });
官方给的文档一大堆，我们直接进行演示
第一步，在新建的uniapp项目中的index.vue文件里面增加一个按钮（通过点击事件触发getSystemInfo接口）
代码：
<view style="height: 10rpx;"></view> <button type="primary" style="width: 500rpx;" @click="get_system">获取系统信息</button>
第二步，在methods中写入js代码
get_system:function(){ console.log("获取系统信息"); uni.getSystemInfo({ success(res) { console.log(res); } }) },
第三步，编译后点击查看控制栏输出的信息
看一下全部的信息
{ "SDKVersion": "", "appId": "__UNI__3FCF801", "appLanguage": "zh-Hans", "appName": "demo", "appVersion": "1.0.0", "appVersionCode": "100", "browserName": "safari", "browserVersion": "11.0", "deviceId": "16612229772388048514", "deviceModel": "iPhone", "deviceOrientation": "portrait", "devicePixelRatio": 2, "deviceType": "phone", "errMsg": "getSystemInfo:ok", "hostLanguage": "zh-CN", "hostName": "safari", "hostVersion": "11.0", "language": "zh-CN", "model": "iPhone", "osName": "ios", "osVersion": "11.0", "pixelRatio": 2, "platform": "ios", "safeArea": { "bottom": 667, "height": 667, "left": 0, "right": 375, "top": 0, "width": 375 }, "safeAreaInsets": { "bottom": 0, "left": 0, "right": 0, "top": 0 }, "screenHeight": 667, "screenWidth": 375, "statusBarHeight": 0, "system": "iOS 11.0", "ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 HBuilderX", "uniCompileVersion": "3.5.3", "uniPlatform": "web", "uniRuntimeVersion": "3.5.3", "version": "", "windowBottom": 0, "windowHeight": 623, "windowTop": 44, "windowWidth": 375 }
看到这里很多小伙伴会问这些参数有啥用？
可以用来识别安卓、苹果、pc端用户，如果在api接口能力不同的情况下，可以做分类处理
可以识别当前屏幕宽度、高度用来渲染页面窗口
等等
uni.getSystemInfoSync
与getSystemInfo不同的是
getSystemInfoSync直接使用即可
console.log("获取系统信息"); var data=uni.getSystemInfoSync() console.log(data);
返回的数据一样，需要开发者自己处理
{ "SDKVersion": "", "appId": "__UNI__3FCF801", "appLanguage": "zh-Hans", "appName": "demo", "appVersion": "1.0.0", "appVersionCode": "100", "browserName": "safari", "browserVersion": "11.0", "deviceId": "16612229772388048514", "deviceModel": "iPhone", "deviceOrientation": "portrait", "devicePixelRatio": 2, "deviceType": "phone", "hostLanguage": "zh-CN", "hostName": "safari", "hostVersion": "11.0", "language": "zh-CN", "model": "iPhone", "osName": "ios", "osVersion": "11.0", "pixelRatio": 2, "platform": "ios", "safeArea": { "bottom": 667, "height": 667, "left": 0, "right": 375, "top": 0, "width": 375 }, "safeAreaInsets": { "bottom": 0, "left": 0, "right": 0, "top": 0 }, "screenHeight": 667, "screenWidth": 375, "statusBarHeight": 0, "system": "iOS 11.0", "ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 HBuilderX", "uniCompileVersion": "3.5.3", "uniPlatform": "web", "uniRuntimeVersion": "3.5.3", "version": "", "windowBottom": 0, "windowHeight": 623, "windowTop": 44, "windowWidth": 375 }
