百度智能小程序 获取系统信息

swan.getSystemInfo

基础库 1.10.8 版本开始支持。

解释：获取系统信息。

Web 态说明：由于浏览器的限制，在 Web 态下部分系统信息无法获取，详见下方 success 返回参数说明。

方法参数

Object object

object 参数说明

success 返回参数说明

示例

图片示例

代码示例 1：属性全集 

在开发者工具中打开

<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">点击获取系统信息</button>
    </view>
</view>

Page({
    data: {
        infoList: [{
            label: '手机品牌',
            key: 'brand',
            value: ''
        }, {
            label: '手机型号',
            key: 'model',
            value: ''
        }, {
            label: '使用窗口宽',
            key: 'windowWidth',
            value: ''
        }, {
            label: '使用窗口高',
            key: 'windowHeight',
            value: ''
        }, {
            label: '状态栏高',
            key: 'statusBarHeight',
            value: ''
        }, {
            label: '导航栏高',
            key: 'navigationBarHeight',
            value: ''
        }, {
            label: '宿主版本',
            key: 'version',
            value: ''
        }, {
            label: '操作系统',
            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);
                // 更新数据
                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: 开发者一般在模拟顶部导航栏时用到 statusBarHeight 属性 

在开发者工具中打开

<!-- 代码链接中为自定义组件写法，可进行多页面复用 -->
<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>
<!-- 占位元素，防止接下来的页面内容被导航栏遮挡 -->
<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 属性 

在开发者工具中打开

<view class="wrap">
    <view class="card-area">可使用窗口高度:{{windowHeight}}</view>
    <view class="card-area">屏幕高度:{{screenHeight}}</view>
    <view class="card-area">安全区域bottom:{{safeArea}}</view>
    <button bind:tap="getSystemInfo" type="primary">获取数据</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 等机型 

在开发者工具中打开

<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