实训日志day 4

mine页面：显示手机信息，获取昵称和头像

1.wx.getSystemInfo(Object object)

获取系统信息

success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

 

重要的js内容

  data: {
    uicon:'../../assets/icons/my.png',
    uname:'用户名',
    model:'',
    system:'',
    screenHeight:'',
    screenWidth:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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
        })
      }
    });
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              _this.setData({
                uicon: res.userInfo.avatarUrl,
                uname: res.userInfo.nickName
              })
            }
          })
        } else {
          bindGetUserInfo();
        }
      }
    });
  },

 wxml

<view class="container">
  <view class='bg'>
    <!-- <image class='auto-img' src='../../images/bg.jpg' /> -->

    <image class='usericon' src='{{uicon}}'></image>
    <text>{{uname}}</text>
  </view>
  <view>手机型号：{{model}}</view>
  <view>手机版本号：{{system}}</view>
  <view>手机屏幕分辨率：{{screenWidth}} * {{screenHeight}}</view>

  
</view>

mine页面存放背景图片 

<view class="container">
  <view class='bg'>
    <!-- <image class='auto-img' src='../../images/bg.jpg' /> -->

    <image class='usericon' src='{{uicon}}'></image>
    <text>{{uname}}</text>
  </view>

</view>

调节背景图片和昵称的大小位置

.container{
  width: 100%;
  height: 100%;
}
.auto-img{
  width: 100%;
  height: 100%;
  display: block;
}
.usericon{
  height:200rpx;
  width:200rpx;
  border-radius:50%;
}
.bg>text{
  color: white;
}