和风OUC-Systeminfo获取客户端基本系统信息

最新推荐文章于 2024-09-13 07:28:13 发布

原创最新推荐文章于 2024-09-13 07:28:13 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍如何利用微信小程序API-Systeminfo获取设备系统信息，包括手机品牌、型号等，并展示了如何使用这些信息来优化UI界面，实现跨平台兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过微信小程序API-Systeminfo来得知使用者设备的系统信息，包括手机品牌，手机型号，设备像素比，屏幕宽度，屏幕高度，可使用窗口高度，可使用窗口宽度，状态栏高度，微信设置语言，微信版本号，操作系统版本，客户端平台，用户字体大小设置(px)，客户端基础库版本。当获取这些基本系统信息之后，便可以更合适的设置UI界面，以匹配不同机型，方便不同用户使用，以实现跨平台兼容使用。
systeminfo.js文件如下：

Page({
  data: {
    systeminfoObj: {},
    systeminfoArr: [
      {
        key: 'brand',
        name: '手机品牌',
      },
      {
        key: 'model',
        name: '手机型号',
      },
      {
        key: 'pixelRatio',
        name: '设备像素比',
      },
      {
        key: 'screenWidth',
        name: '屏幕宽度',
      },
      {
        key: 'screenHeight',
        name: '屏幕高度',
      },
      {
        key: 'windowWidth',
        name: '可使用窗口宽度',
      },
      {
        key: 'windowHeight',
        name: '可使用窗口高度',
      },
      {
        key: 'statusBarHeight',
        name: '状态栏高度',
      },
      {
        key: 'language',
        name: '微信设置的语言',
      },
      {
        key: 'version',
        name: '微信版本号',
      },
      {
        key: 'system',
        name: '操作系统版本',
      },
      {
        key: 'platform',
        name: '客户端平台',
      },
      {
        key: 'fontSizeSetting',
        name: '用户字体大小设置(px)',
      },
      {
        key: 'SDKVersion',
        name: '客户端基础库版本',
      },
    ],
  },
  onShow () {
    this.setData({
      systeminfoObj: getApp().globalData.systeminfo
    })
  },
})

systeminfo.wxss文件如下：

.systeminfo {
  padding: 0 30rpx 0 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
}
.brand {
  font-family: DINCondensed-Bold;
  height: 300rpx;
  font-size: 100rpx;
  color: #40a7e7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.brand image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}
.brand text {
  line-height: 1em;
}
.systeminfo .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 30rpx;
  color: #000;
  padding: 30rpx 15rpx;
  height: 62rpx;
  border-top: 1rpx solid #efefef;
}
.systeminfo .item:last-child {
  border-bottom: none;
}
.systeminfo .item .key {
  line-height: 1em;
}
.systeminfo .item .value {
  font-size: 24rpx;
  line-height: 1em;
  color: #777;
}