山东大学项目实训——地图圈系统——微信小程序（12）

一、系统信息

上次开发进度为写了系统设置页面，但是没有完善系统信息功能。
微信小程序获取设备信息的方法为getSystemInfo方法。可获得手机品牌、手机型号、设备像素比、屏幕宽度等信息，将这些信息显示在界面中，即完成系统信息显示功能。

参数：

属性	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.getSystemInfo({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})
try {
  const res = wx.getSystemInfoSync()
  console.log(res.model)
  console.log(res.pixelRatio)
  console.log(res.windowWidth)
  console.log(res.windowHeight)
  console.log(res.language)
  console.log(res.version)
  console.log(res.platform)
} catch (e) {
  // Do something when catch error
}

二、项目代码

app.js代码：

  wx.getSystemInfo({
      success: (res) => {
        this.globalData.systeminfo = res
        this.globalData.isIPhoneX = /iphonex/gi.test(res.model.replace(/\s+/, ''))
      },
    })

system.wxml代码：

<navBar 
    title-text="系统信息" 
    back-icon="../../src/images/back@3x.png"

    background="#f2f2f2"
    bindback="back"/>
<view class='systeminfo'>
  <view class='brand'>
    <image src='/img/mobile.png'></image>
    <text>{{systeminfoObj.brand}}</text>
  </view>
  <view class='item' wx:for='{{systeminfoArr}}' wx:key='{{index}}'>
    <view class='key'>{{item.name}}</view>
    <view class='value'>{{systeminfoObj[item.key]}}</view>
  </view>
</view>

system.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;
}

system.js文件：

const app = getApp();
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 () {
    console.log(getApp().globalData.systeminfo)
    this.setData({
      systeminfoObj: getApp().globalData.systeminfo
    })
  },
})

三、效果展示