微信开发工具获取用户头像和用户昵称，实现本地和真机调试

1、新建一个person文件夹

2、person.js中写下如下获取用户头像和用户昵称代码：

Page({
  data: {
    avatarUrl:'',//用户头像
    nickName:''//用户昵称
  },
  getUserProfile() {//获取用户头像和用户昵称方法
    wx.getUserProfile({
      desc: '登录',
      success: (res) => {
        this.setData({
          nickName: res.userInfo.nickName,
          avatarUrl: res.userInfo.avatarUrl
        })
      }
    })
  }
})

3、person.wxml中写下如下代码：

  
    
    
      
      {{nickName}}
    
  
  
      
        登录
      
  

4.person.wxss中写下如下代码：

page{
  width: 100%;
  height: 100%;
}
.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  position: relative;
}
.user_info_wrap .user_img_wrap {
  position: relative;
}
.user_info_wrap .user_img_wrap .user_bg {
  height:50vh;
  width: 100%;
}
.user_info_wrap .user_img_wrap .user_info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  text-align: center;
}
.user_info_wrap .user_img_wrap .user_info .user_icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.user_info_wrap .user_img_wrap .user_info .user_name {
  color: #fff;
  margin-top: 40rpx;
  font-size: 40rpx;
  padding:0rpx;
}
.user_info_wrap .user_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40%;
  font-size: 38rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}

5、效果如下：


6、总结，本地和真机调试都可以成功