微信小程序wx.getUserProfile授权及页面展示

微信wx.getUserProfile授权及页面展示

微信小程序wx.getUserProfile授权及页面展示

小程序授权页面样式和wx.getUserProfile方法使用。话不多说，直接看图看代码。

app.js

代码片.

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log('app.js得到 login code:',res.code);
        if (res.code) {
          //发起网络请求
          wx.request({
            url: '',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

得到code方便去到后台换取 openId, sessionKey, unionId

login.wxml

代码片.

<view class="userinfo">
  <open-data class="userinfo-avatar" type="userAvatarUrl"></open-data>
  <open-data type="userNickName"></open-data>
</view>

<view class='content'>
  <view class='header'>
  <image src='/images/logo.png'></image>
</view>
<view>申请获取以下权限</view>
  <text>获得你的公开信息(昵称，头像等)</text>
</view>

<view class='bottom' wx:if="{{canIUseGetUserProfile}}">
  <button type='primary' lang="zh_CN" bindtap="getUserProfile"> 授权登录 </button>
</view>
<view wx:else>请升级微信版本</view>

login.wxss

代码片.

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  margin: 90rpx 50rpx;
  padding-bottom: 90rpx;
  border-bottom: 1px solid #ccc;
}

.userinfo-avatar {
  overflow: hidden;
  width: 144rpx;
  height: 144rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.header {
  float: left;
  display: flex;
  width: 150rpx;
  height: 150rpx;
  line-height: 150rpx;
}

.header image {
  width: 144rpx;
  height: 144rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
  font-size: 14px;
  line-height: 50rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  padding: 80rpx 50rpx 0 50rpx;
}

微信官方文档参考getUserInfo和getUserProfile 对比
注意：要自己去官网搜索，不然很难找到的

微信官方文档参考wx.getUserProfile

login.js

代码片.

Page({
  data: {
    userInfo: {},
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log('获取用户个人信息',res.userInfo)
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },

})

获取到用户信息

完。