[quick document] so much information about the user's mobile phone can be directly found in the original applet. Others already know what the price of my mobile phone is

Keywords: Mini Program

Query user system information


Obtain user system information (traditional, synchronous, available Promise style)


Obtain user system information (synchronous, Promise style available)


Get user system information (asynchronous)

usage method

Pass in an object in the parameter, including three options: success, fail and complete

success function, the interface call is executed successfully

fail function, interface call failed to execute

complete function. After the interface is called, it will be executed regardless of success or failure  

These three options do not have to be available, but generally speaking, there should be at least one success.

Information obtained

Brand of res.brand equipment

res.model device model (the new model may take some time to understand)

res.pixelRatio screen width in px

res.screenHeight screen height in px

res.windowWidth the window width that can be used, in px

res.windowHeight the window height that can be used, in px

res.statusBarHeight the height of the status bar in px

res.language the language set by wechat

res.version wechat version number

res.system operating system version

res.platform client platform

res.fontSizeSetting the font size set by the user in wechat, unit px

res.deviceOrientation user equipment direction, English string

1. portrait is vertical screen

2. The landscape is horizontal

Res.benchmarklevelif the user is an Android device, this option can obtain the user's device performance

1, - 2 or 0 means that the user's equipment is poor and can't play the game

2, - 1 means the user's device performance is unknown

3. The higher the number above 0, the better the performance

res.cameraAuthorized Boolean value, whether the user allows wechat to use the camera

res.locationAuthorized Boolean value, whether the user allows wechat to use location

res.microphoneAuthorized Boolean value, whether the user allows wechat to use the microphone

res.notificationAuthorized Boolean value, whether the user allows wechat notification

res.phoneCalendarAuthorized Boolean value, whether the user allows wechat to use the calendar

res.bluetoothEnabled Boolean value, whether the user has turned on Bluetooth

res.locationEnabled Boolean value, whether the user has opened the geographic location

Res.wifi enabled Boolean value, whether the user has WiFi enabled

Obtain basic information of user equipment

There are three methods in total. You can actually use any one (of course, it may be better to give priority to asynchronous). Here I will use the traditional one for demonstration. In addition, in order to be easier to understand, I don't use the arrow function and Promise style. If you want to use them, you can modify them yourself.

The wxml code for obtaining basic information is as follows

<view>The equipment brand you use is:{{ d1 }}</view>
<view>The equipment model you use is:{{ d2 }}</view>
<view>Your screen width is:{{ d3 }}</view>
<view>Your screen height is:{{ d4 }}</view>
<view>The available window widths are:{{ d5 }}</view>
<view>The available window heights are:{{ d6 }}</view>
<view>The height of the status bar is:{{ d7 }}</view>
<view>Your wechat language is:{{ d8 }}</view>
<view>Your wechat version number is:{{ d9 }}</view>
<view>The version of your operating system is:{{ d10 }}</view>
<view>Your client is:{{ d11 }}</view>
<view>The font size you set in wechat is:{{ d12 }}</view>

The code of js part is as follows

  data: {
    d1: "",
    d2: "",
    d3: "",
    d4: "",
    d5: "",
    d6: "",
    d7: "",
    d8: "",
    d9: "",
    d10: "",
    d11: "",
    d12: "",
  onLoad: function (options) {
    let that = this;
        that.setData({d1: res.brand});
        that.setData({d2: res.model});
        that.setData({d3: res.pixelRatio});
        that.setData({d4: res.screenHeight});
        that.setData({d5: res.windowWidth});
        that.setData({d6: res.windowHeight});
        that.setData({d7: res.statusBarHeight});
        that.setData({d8: res.language});
        that.setData({d9: res.version});
        that.setData({d10: res.system});
        that.setData({d11: res.platform});
        that.setData({d12: res.fontSizeSetting});

Get permission information of user equipment

The code of wxml is as follows

<view>{{ d1 }}</view>
<view>{{ d2 }}</view>
<view>{{ d3 }}</view>
<view>{{ d4 }}</view>
<view>{{ d5 }}</view>
<view>{{ d6 }}</view>
<view>{{ d7 }}</view>
<view>{{ d8 }}</view>

js code is as follows

  data: {
    d1: "",
    d2: "",
    d3: "",
    d4: "",
    d5: "",
    d6: "",
    d7: "",
    d8: ""
  onLoad: function (options) {
    let that = this;
        if (!res.cameraAuthorized){
          that.setData({d1: "You didn't turn on the camera, please turn it on"});
        if (!res.locationAuthorized){
          that.setData({d2: "You have not opened the positioning, please open it"});
        if (!res.microphoneAuthorized){
          that.setData({d3: "If you refuse to turn on the microphone, we will not be able to communicate with you"});
        if (!res.notificationAuthorized){
          that.setData({d4: "You have not set wechat push, you will not be able to receive our latest messages"});
        if (!res.phoneCalendarAuthorized){
          that.setData({d5: "Why don't you allow us to use the calendar? Is there anything hidden in it"});
        if (!res.bluetoothEnabled){
          that.setData({d6: "Please turn on Bluetooth service immediately, thank you"})
        if (!res.locationEnabled){
          that.setData({d7: "Please open the geographic service. I want to know where you are"});
        if (!res.wifiEnabled){
          that.setData({d8: "You didn't wifi,Yes, it's 2 g Net"});
        that.setData({d9: res.deviceOrientation});

System information summary

Of course, what is the purpose of querying equipment information? We can't query information meaninglessly. Of course, the purpose of querying this information is not to see the price of the user's mobile phone. Of course, it is necessary to see the price of the user's mobile phone in many scenarios.

1. Query the size of the user's equipment and provide corresponding layout. It is similar to the responsive layout often used in the old front end. At the very least, you can make some minor adjustments to some elements. But this situation should be rarely used, not recommended.

2. Query the user's personal preferences and provide corresponding services. For example, when we see that the font set by the user is large, we make the font of our page larger. In other words, when we see that the language set by the user is a foreign language, we provide him with some foreign language translation or tips. That is, an upgrade for user personalization. However, this hard core is generally difficult to achieve.

3. You can query the permission information opened by the user and prompt it. For example, your applet needs to use location-based services or Bluetooth. We can also know whether the user has enabled these functions by querying the system information. If it is not enabled, we can give some hints to users that they should start some services first. This should be the best and easiest to implement.

I'm Wu Ming. If it's helpful to you, please give me a compliment before you go. Thank you! Your support is really important to me!

Back to applet quick document - Wu Ming​​​​​​​

Posted by Alpha_One on Mon, 11 Oct 2021 10:53:22 -0700