学习笔记4

点击按钮获取用户信息，给用户信息加背景图

.js

// pages/mine/mine.js

Page({

 

  /**

   * 页面的初始数据

   */

  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,

                

//                })

//              }

//            })

//          } else {

//            bindGetUserInfo();

//          }

//       }

//      });

},

 

  // 获取授权用户信息

  btn_sub: function (res) {

    // 声明一个变量接收用户授权信息

    var userinfos = res.detail.userInfo;

    // 判断是否授权  true 替换微信用户头像

    if (userinfos != undefined) {

 

      this.setData({

        image: userinfos.avatarUrl,

        uname:userinfos.nickName

      })

    } else {

      // false 默认头像

      this.setData({

        image: "../../assets/icon/mine.png",

        uname:" "

      })

    }

  },

 

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

 

  },

 

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

 

  },

 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

 

  },

 

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

 

  }

})

 

.wxml

<!--pages/mine/mine.wxml-->

<view class="container">

  <view class='bg'>

    <image class='list_img' src='{{image}}'> </image>

    <text>{{uname}}</text>

  </view>

  <view class='button'>

<!-- button按钮获取用户信息授权 -->

 <button class='btn_sub' bindgetuserinfo='btn_sub' open-type="getUserInfo" mode="cover">点击获取头像昵称</button>

  </view>

 <view class='text'>

    <view>手机型号：{{model}}</view>

    <view>手机版本号：{{system}}</view>

    <view>手机屏幕分辨率：{{screenWidth}} * {{screenHeight}}</view>

 

 </view>

</view>

 

 

.wxss

/* pages/mine/mine.wxss */

 .container{

  width: 100%;

  height: 100%;

  

}

 

 

.bg>text{

  color: white;

}

.text{

  

 margin-top:200rpx;

 text-align: center;

 color: rgba(241, 104, 195, 0.747);

 

 

}

 

/* 头像 */

.list_img{

  height:150rpx;

  width:150rpx;

  border-radius:50%;

}

/* button外层视图 */

.button{

  text-align: center;

  width: 100%;

  height: 10rpx;

 

}

/* 按钮居中 */

.btn_sub{

  width: 80%;

  height: 100rpx;

  background-color:rgba(241, 104, 195, 0.747);

  border: 0;

  margin-top:20rpx;

 

}

.btn_sub::after{

  opacity: 0;

 

}

.bg{

  width:100%;

  height:350rpx;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background:url('data:image/jpeg;base64, no-repeat 0 0;

  background-size: 100% 100%;

}