百度智能小程序 獲取系統(tǒng)信息

swan.getSystemInfo

基礎庫 1.10.8 版本開始支持。

解釋：獲取系統(tǒng)信息。

Web 態(tài)說明：由于瀏覽器的限制，在 Web 態(tài)下部分系統(tǒng)信息無法獲取，詳見下方 success 返回參數(shù)說明。

方法參數(shù)

Object object

object 參數(shù)說明

success 返回參數(shù)說明

示例

圖片示例

代碼示例 1：屬性全集 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <view class="list-area border-bottom" s-for="item in infoList">
            <text class="list-item-key-4">{{item.label}}：</text>
            <text class="list-item-value">{{item.value}}</text>
        </view>
    </view>
    <view class="swan-security-padding-bottom flex-button">
        <button bindtap="getSystemInfo" type="primary" hover-stop-propagation="true">點擊獲取系統(tǒng)信息</button>
    </view>
</view>

Page({
    data: {
        infoList: [{
            label: '手機品牌',
            key: 'brand',
            value: ''
        }, {
            label: '手機型號',
            key: 'model',
            value: ''
        }, {
            label: '使用窗口寬',
            key: 'windowWidth',
            value: ''
        }, {
            label: '使用窗口高',
            key: 'windowHeight',
            value: ''
        }, {
            label: '狀態(tài)欄高',
            key: 'statusBarHeight',
            value: ''
        }, {
            label: '導航欄高',
            key: 'navigationBarHeight',
            value: ''
        }, {
            label: '宿主版本',
            key: 'version',
            value: ''
        }, {
            label: '操作系統(tǒng)',
            key: 'system',
            value: ''
        }, {
            label: '客戶端平臺',
            key: 'platform',
            value: ''
        }, {
            label: '屏幕寬度',
            key: 'screenWidth',
            value: ''
        }, {
            label: '屏幕高度',
            key: 'screenHeight',
            value: ''
        }, {
            label: '用戶字體',
            key: 'fontSizeSetting',
            value: ''
        }, {
            label: '基礎庫版本',
            key: 'SDKVersion',
            value: ''
        }, {
            label: '宿主平臺',
            key: 'host',
            value: ''
        }, {
            label: '宿主平臺版本',
            key: 'swanNativeVersion',
            value: ''
        }, {
            label: '屏幕密度',
            key: 'devicePixelRatio',
            value: ''
        }, {
            label: 'DPI',
            key: 'pixelRatio',
            value: ''
        }, {
            label: '宿主語言',
            key: 'language',
            value: ''
        }]
    },
    getSystemInfo(e) {
        swan.getSystemInfo({
            success: res => {
                console.log('getSystemInfo success', res);
                // 更新數(shù)據(jù)
                this.updateInfoList(res);
            },
            fail: err => {
                console.log('getSystemInfo fail', err);
                swan.showToast({
                    title: '獲取失敗',
                    icon: 'none'
                });
            }
        });
    },

    clearClick() {
        this.updateInfoList({});
    },

    updateInfoList(res) {
        let infoList = this.data.infoList;
        for (let item of this.data.infoList) {
            if (res[item.key] === '') {
                item.value = '暫無';
            }
            else {
                item.value = res[item.key];
            }
        }
        this.setData('infoList', infoList);
    }
});

參考示例

參考示例 1: 開發(fā)者一般在模擬頂部導航欄時用到 statusBarHeight 屬性 

在開發(fā)者工具中打開

<!-- 代碼鏈接中為自定義組件寫法，可進行多頁面復用 -->
<view class="nav-box">
    <view class="top-title" style="margin-top:{{statusBarHeight}}px">
        <view class="back-icon-wrap" bindtap="back">
            <image class="back-icon" src="/images/back.png"></image>
        </view>
        <view class="page-title">
            <view class="page-title-china">{{chinaName}}</view>
            <view class="page-title-english">{{engName}}</view>
        </view>
    </view>
</view>
<!-- 占位元素，防止接下來的頁面內(nèi)容被導航欄遮擋 -->
<view style="padding-top:{{statusBarHeight + 0.53}}px"></view>

methods: {
    created() {
        swan.getSystemInfo({
            success: res => {
                console.log('getSystemInfo success', res);
                this.setData({
                    'statusBarHeight': res.statusBarHeight
                });
            },
            fail: err => {
                console.log('getSystemInfo fail', err);
            }
        });
    }
}

參考示例 2: safeArea 屬性 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">可使用窗口高度:{{windowHeight}}</view>
    <view class="card-area">屏幕高度:{{screenHeight}}</view>
    <view class="card-area">安全區(qū)域bottom:{{safeArea}}</view>
    <button bind:tap="getSystemInfo" type="primary">獲取數(shù)據(jù)</button>
</view>

Page({
    getSystemInfo(e) {
        swan.getSystemInfo({
            success: res => {
                this.setData({
                    screenHeight: res.screenHeight,
                    windowHeight: res.windowHeight,
                    safeArea: res.safeArea.bottom
                });
                if ( res.safeArea.bottom !== res.screenHeight) {
                    swan.showToast({
                        title: '需要適配',
                        icon: 'none'
                    });
                }
            },
            fail: err => {
                swan.showToast({
                    title: '獲取失敗',
                    icon: 'none'
                });
            }
        });
    }
});

參考示例 3: 適配 iphoneX 等機型 

在開發(fā)者工具中打開

<view class="wrap">
    <button bindtap="getSystemInfo">
        是否是iphoneX
    </button>
    <view class="card-area"> {{isIPhoneX}} </view>
</view>

Page({
    data: {
        isIPhoneX: ''
    },
    getSystemInfo(e) {
        swan.getSystemInfo({
            success: systemInfo => {
                console.log('getSystemInfo success', systemInfo);
                if (systemInfo.model && (systemInfo.model.indexOf('iPhone X') > -1) || (systemInfo.model === 'iPhone Simulator <x86-64>' && systemInfo.screenWidth === 375)) {
                    this.setData({
                        isIPhoneX: true
                    })
                }
                else {
                    this.setData({
                        isIPhoneX: false
                    })
                }
            },
            fail: err => {
                swan.showToast({
                    title: '獲取失敗'
                });
            }
        });
    }
});

錯誤碼

Android