《校内实训日志》DAY 04

实训DAY04日志

今天主要学习如何通过通过接口的方法获取设备信息、用户信息以及设置“我的”页面的背景自适应不同型号的设备。

 

一、背景自适应不同型号的设备

方法主要由两种：

（1）通过算法算出背景图片的尺寸

onLoad: function (options) {

    // this

    var _this=this;

    // 获取手机系统信息

    wx.getSystemInfo({

      success: function (res) {

        console.log(res)

        _this.setData({

        height:_this.data.imgH/_this.data.imgW * res.windowWidth

       

        })

      }

});

（2）使用rpx

一定版本下初始设定好背景图片尺寸，设置尺寸单位为rpx，实现图片自动适应大小。

 

以及获取本地图片时如何把本地图片转换为小程序可用的网络图片

// 本地相册选择图片

wx.chooseImage({

  success: res => {

    //console.log(res.tempFilePAths[0]);



    //读取本地文件内容

    wx.getFileSystemManager().readFile({

      //要读取的文件的路径

      filePath:res.tempFilePaths[0],

      encoding:'base64',//字符编码

      success:res => {

        console.log(res);

        console.log('data:image/jpg;base64,'+res.data);

      }



    })

  }

})

二、获取设备信息

采用wx.getSystemInfo接口，调用成功后回调success

onLoad: function (options) {

    // this

    var _this=this;

    // 获取手机系统信息

    wx.getSystemInfo({

      success: function (res) {

        console.log(res)

        _this.setData({

        model:res.model,

        system:res.system,

        screenHeight:res.screenHeight,

        screenWidth:res.screenWidth,

        language:res.language,

        version:res.version

        })

      }

});

三、获取用户信息

（1）无需用户授权的获取头像和昵称

授权登录

请升级微信版本

（2）需用户授权的获取信息

// 必须是在用户已经授权的情况下调用

wx.getUserInfo({

  success: function(res) {

    var userInfo = res.userInfo

    var nickName = userInfo.nickName

    var avatarUrl = userInfo.avatarUrl

    var gender = userInfo.gender //性别 0：未知、1：男、2：女

    var province = userInfo.province

    var city = userInfo.city

    var country = userInfo.country

  }

})

以及如何将获取的用户信息和昵称将其使用flex布局居中放置在“我的”页面设置的背景中。