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

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

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

app.js

代码片.

// app.jsApp({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

代码片.

<viewclass="userinfo"><open-dataclass="userinfo-avatar" type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data></view><viewclass='content'><viewclass='header'><image src='/images/logo.png'></image></view><view>申请获取以下权限</view><text>获得你的公开信息(昵称，头像等)</text></view><viewclass='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:90rpx50rpx;
  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:80rpx50rpx050rpx;}

微信官方文档参考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})}})},})

获取到用户信息

完。