小程序获取用户名与头像的流程

在pages/profile/profile.js文件下
全局默认头像

const defaultAvatarURL = "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"

初始化数据

Page({

    /**
     * 页面的初始数据
     */
    data: {
        defaultAvatar:  defaultAvatarURL,
        hasUserInfo: false,
        userInfo:{}
    },
    }

定义获取数据的方法

getUserProfile(){
        wx.getUserProfile({
            desc: '该信息仅用于展示在个人中心',
            success: (res) => {
                this.setData({
                    hasUserInfo:true,
                    userInfo:res.userInfo
                })
                // app.setUserInfo(res.userInfo)
            },
          })
    },

在profile.wxml中渲染页面

<view class="user">
 <text class="username">立即登录</text>
 <text class="userphone">解锁全部功能</text>
</view>
</view>


<view class="user-info" wx:else>
<image src="{{userInfo.avatarUrl}}"></image>
<view class="user">
 <text class="username">{{userInfo.nickName}}</text>
 <text class="userphone">176******462</text>
</view>
</view>

在profile.wxss 中设置样式

.user-info {
    display: flex;
    align-items: center;
    padding: 0 40rpx;
}
.user-info image {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
      /* box-shadow: 0 8rpx 8rpx #ca9764; */
    margin-right: 20rpx;
}
.user-info .user {
    display: flex;
    flex-direction: column;
}
.user-info .username {
    font-weight: bold;
    font-size: 30rpx;
}
.user-info .userphone {
    color: #aaa;
    font-size: 24rpx;
}

这样就可以实现获取用户都信息啦
但是此时会有一个问题 只要页面一加载，数据就没有了 此时要用到全局
用setStorage设置全局

 getUserProfile(){
        wx.getUserProfile({
            desc: '该信息仅用于展示在个人中心',
            success: (res) => {
                this.setData({
                    hasUserInfo:true,
                    userInfo:res.userInfo
                })
                // app.setUserInfo(res.userInfo)
            /-----------------/
            //此代码就是设置全局
                wx.setStorage({
                    key:"userInfo",
                    data:res.userInfo
                })
                /--------------------/
            },
          })
    },
  

在app.js中获取数据

 // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    /=====================/
       // 获取storage中的信息
       const userInfo = wx.getStorageSync('userInfo')
       if (userInfo) {
         this.globalData.userInfo = userInfo
       }
       /===================/
  },
  

此时就可以全局使用了

比如在index中使用
index/index.js

const app=getApp()

定义数据

  data: {
    userInfo: {},
    hasUserInfo: false
  },

监听数据 设置数据

  onShow: function () {
    this.setData({
      hasUserInfo: true,
      userInfo: app.globalData.userInfo
    })
  },

在index.wxml中使用

<view wx:if="{{hasUserInfo}}">{{userInfo.nickName}}</view>