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

发表于 分类于 ， ， 阅读时长 ≈ 7 分钟

一 概述

  • 获取系统信息又两种方式：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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!--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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 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 逻辑文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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

1
2
3
{
  "navigationBarTitleText": "设备信息"
}

3.5 效果图

四 参考

  • wx.getSystemInfo