微信小程序开发之——获取系统信息

一 概述

• 获取系统信息又两种方式：wx.getSystemInfo和wx.getSystemInfoAsync
• wx.getSystemInfo ：是异步的调用格式，但是是同步返回
• wx.getSystemInfoAsync：异步获取系统信息

二 wx.getSystemInfo返回结果

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

success回调结果

属性	类型	说明
brand	string	设备品牌
screenWidth	number	屏幕宽度，单位px
screenHeight	number	屏幕高度，单位px

三 界面展示

3.1 布局文件(systemInfo.wxml)

<!--pages/systemInfo/systemInfo.wxml-->
<view class="table">
  <!--表头-->
  <view class="tr bg-w">
    <view class="th">属性</view>
    <view class="th">取值</view>
  </view>
  <!--表内容-->
  <!--设备品牌-->
  <view class="tr">
    <view class="td">设备品牌</view>
    <view class="td">{{result.brand}}</view>
  </view>
  <!--设备型号-->
  <view class="tr">
    <view class="td">设备型号</view>
    <view class="td">{{result.model}}</view>
  </view>
  <!--设备像素比-->
  <view class="tr">
    <view class="td">设备像素比</view>
    <view class="td">{{result.pixelRatio}}</view>
  </view>
  <!--屏幕宽度，单位px-->
  <view class="tr">
    <view class="td">屏幕宽度</view>
    <view class="td">{{result.screenWidth}}</view>
  </view>
  <!--屏幕高度，单位px-->
  <view class="tr">
    <view class="td">屏幕高度</view>
    <view class="td">{{result.screenHeight}}</view>
  </view>
  <!--可使用窗口宽度，单位px-->
  <view class="tr">
    <view class="td">可使用窗口宽度</view>
    <view class="td">{{result.windowWidth}}</view>
  </view>
  <!--状态栏的高度，单位px-->
  <view class="tr">
    <view class="td">状态栏的高度</view>
    <view class="td">{{result.statusBarHeight}}</view>
  </view>
  <!--微信设置的语言-->
  <view class="tr">
    <view class="td">微信设置的语言</view>
    <view class="td">{{result.language}}</view>
  </view>
  <!--微信版本号-->
  <view class="tr">
    <view class="td">微信版本号</view>
    <view class="td">{{result.version}}</view>
  </view>
  <!--操作系统及版本-->
  <view class="tr">
    <view class="td">操作系统及版本</view>
    <view class="td">{{result.system}}</view>
  </view>
  <!--客户端平台-->
  <view class="tr">
    <view class="td">客户端平台</view>
    <view class="td">{{result.platform}}</view>
  </view>
  <!--用户字体大小（单位px）-->
  <view class="tr">
    <view class="td">用户字体大小</view>
    <view class="td">{{result.fontSizeSetting}}</view>
  </view>
  <!--客户端基础库版本-->
  <view class="tr">
    <view class="td">客户端基础库版本</view>
    <view class="td">{{result.SDKVersion}}</view>
  </view>
  <!--设备性能等级（仅 Android）-->
  <view class="tr">
    <view class="td">设备性能等级</view>
    <view class="td">{{result.benchmarkLevel}}</view>
  </view>
  <!--设备方向-->
  <view class="tr">
    <view class="td">设备方向</view>
    <view class="td">{{result.deviceOrientation}}</view>
  </view>
  <!--允许微信使用相册的开关（仅 iOS 有效）-->
  <view class="tr">
    <view class="td">允许微信使用相册</view>
    <view class="td">{{result.albumAuthorized}}</view>
  </view>
  <!--允许微信使用摄像头的开关-->
  <view class="tr">
    <view class="td">允许微信使用摄像头</view>
    <view class="td">{{result.cameraAuthorized}}</view>
  </view>
  <!--允许微信使用定位的开关-->
  <view class="tr">
    <view class="td">允许微信使用定位</view>
    <view class="td">{{result.locationAuthorized}}</view>
  </view>
  <!--允许微信使用麦克风的开关-->
  <view class="tr">
    <view class="td">允许微信使用麦克风</view>
    <view class="td">{{result.microphoneAuthorized}}</view>
  </view>
  <!--允许微信通知的开关-->
  <view class="tr">
    <view class="td">允许微信通知</view>
    <view class="td">{{result.notificationAuthorized}}</view>
  </view>
  <!--允许微信通知带有提醒的开关（仅 iOS 有效）-->
  <view class="tr">
    <view class="td">微信通知带有提醒</view>
    <view class="td">{{result.notificationAlertAuthorized}}</view>
  </view>
  <!--允许微信通知带有标记的开关（仅 iOS 有效）-->
  <view class="tr">
    <view class="td">微信通知带有标记</view>
    <view class="td">{{result.notificationBadgeAuthorized}}</view>
  </view>
  <!--允许微信通知带有声音的开关（仅 iOS 有效）-->
  <view class="tr">
    <view class="td">微信通知带有声音</view>
    <view class="td">{{result.notificationSoundAuthorized}}</view>
  </view>
  <!--允许微信使用日历的开关-->
  <view class="tr">
    <view class="td">微信使用日历</view>
    <view class="td">{{result.phoneCalendarAuthorized}}</view>
  </view>
  <!--蓝牙的系统开关-->
  <view class="tr">
    <view class="td">蓝牙开关</view>
    <view class="td">{{result.bluetoothEnabled}}</view>
  </view>
  <!--蓝牙的系统开关-->
  <view class="tr">
    <view class="td">地理位置开关</view>
    <view class="td">{{result.locationEnabled}}</view>
  </view>
  <!--Wi-Fi 的系统开关-->
  <view class="tr">
    <view class="td">Wi-Fi开关</view>
    <view class="td">{{result.wifiEnabled}}</view>
  </view>
  <!--系统当前主题-->
  <view class="tr">
    <view class="td">系统当前主题</view>
    <view class="td">{{result.theme}}</view>
  </view>
</view>

3.2 样式文件(systemInfo.wxss)

/* pages/systemInfo/systemInfo.wxss */
.table{
  border: 1px solid orange;
  font-size: 40rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.tr{
  display: flex;
  width: 100%;
  justify-content: center;
  height: 2rem;
  align-items: center;
}
.th{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3366ff;
  color: #fff;
  height: 2rem;
  border-right: 1px black solid;

}
.th:last-child{
  border-right: none;
}
.td{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 2rem;
  border-right: 1px black solid;
  border-bottom: 1px black solid;
}
.td:last-child{
  border-right: none;
}

3.3 逻辑文件

// pages/systemInfo/systemInfo.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (result) => {
        this.setData({
          result
        })
        console.log(result)
      },
      fail:err=>{
        console.log("信息获取失败")
      }
    })
  },
})

3.4 systemInfo.json

{
  "navigationBarTitleText": "设备信息"
}

3.5 效果图

四 参考

• wx.getSystemInfo