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

最新推荐文章于 2024-04-12 23:12:00 发布

Max-Bug

最新推荐文章于 2024-04-12 23:12:00 发布

阅读量4.8k

点赞数

分类专栏：功能解决方案文章标签：微信前端小程序微信小程序

本文链接：https://blog.csdn.net/m0_51945808/article/details/126032614

版权

本文介绍了如何在微信开发工具中获取微信小程序用户的头像和昵称，通过在person.js、person.wxml和person.wxss中编写相应代码，实现了在本地和真机上的调试并展示了成功的效果。

摘要由CSDN通过智能技术生成

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

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中写下如下代码：

<view class="user_info_wrap">
  <view wx:if="{
  {avatarUrl}}" class="user_img_wrap">
    <image class="user_bg" src="{
  {avatarUrl}}"></image>
    <view class="user_info">
      <image class="user_icon" src=