微信小程序-关于用户授权登录,获取用户信息

小程序官方文档,上面说明wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用
<button open-type="getUserInfo"></button>

接口调整说明

在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail 回调(详见《公告》)。在用户已授权的情况下调用此接口,可成功获取用户信息。
api示例代码
视图层:

<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button
  wx:if="{{canIUse}}"
  open-type="getUserInfo"
  bindgetuserinfo="bindGetUserInfo"
>
  授权登录
</button>
<view wx:else>请升级微信版本</view>

逻辑层:

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad() {
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
  }
})

我写的具体代码:
效果图:


批注 2019-03-16 214510.jpg

视图层:

<view class="content">
  <view class="bg">
  <button  bindgetuserinfo='isGetinfo'   style='width:200rpx;color:#999;display:{{isShow?"block":"none"}}' open-type='getUserInfo'>请先登录</button>
    <view class="head">
       <view class="headIcon">
          <image src="{{userInfo.avatarUrl}}" style="width:70px;height:70px;"></image>
       </view>
       <view class="login">
          {{userInfo.nickName}}
       </view>
       <view class="detail">
         <text>></text>
       </view>
    </view>
    <view class="count">
       <view class="desc">
         <view>10</view>
         <view>关注</view>
       </view>
       <view class="desc">
         <view>267</view>
         <view>粉丝</view>
       </view>
       <view class="desc" style="border:0px;">
         <view>300</view>
         <view>7天访客</view>
       </view>
    </view>
  </view>

  <view class="nav">
    <view class="nav-item">
      <view>
         <image src="/images/icon/shoucang.jpg" style="width:23px;height:23px;"></image>
      </view>
      <view>收藏</view>
    </view>
    <view class="nav-item">
      <view>
         <image src="/images/icon/lishi.jpg" style="width:23px;height:23px;"></image>
      </view>
      <view>历史</view>
    </view>
    <view class="nav-item">
      <view>
         <image src="/images/icon/yejian.jpg" style="width:23px;height:23px;"></image>
      </view>
      <view>夜间</view>
    </view>
  </view>
  <view class="hr"></view>
  <view class="item">
     <view class="title">消息通知</view>
     <view class="detail2">
       <text>></text>
     </view>
  </view>

  <view class="hr"></view>
  <view class="item">
     <view class="title">头条商城</view>
     <view class="detail2">
       <text>点击速领200元新年红包 ></text>
     </view>
  </view>
  <view class="line"></view>
  <view class="item">
     <view class="title">京东特供</view>
     <view class="detail2">
       <text> ></text>
     </view>
  </view>

  <view class="hr"></view>
  <view class="item">
     <view class="title">我也爆料</view>
     <view class="detail2">
       <text> ></text>
     </view>
  </view>
  <view class="line"></view>
  <view class="item">
     <view class="title">用户反馈</view>
     <view class="detail2">
       <text> ></text>
     </view>
  </view>
   <view class="line"></view>
  <view class="item" bindtap="setup">
     <view class="title">系统设置</view>
     <view class="detail2">
       <text> ></text>
     </view>
  </view>
<view class="hr"></view>
</view> 

逻辑层:

var app = getApp();
Page({
  data: {
    userInfo: {},
    isShow:true
  },
  onLoad: function() {
    this.getuser();
    },
    getuser(){
      // 查看是否授权
      wx.getSetting({
        success:(res)=> {
          console.log(res);
          if (res.authSetting['scope.userInfo']) {
            wx.getUserInfo({
              success: (res) =>{
                console.log(res.userInfo)
                console.log("成功");
                this.setData({
                  isShow:false
                })

                //用户已经授权过
              }
            })
          }else{
            console.log("失败")
            this.setData({
              isShow:true
            })
          }
        }
      })
      var page = this;
      //拿到userInfo的信息
      if (app.getUserInfo) {
        console.log('有函数')
      }
      //获取用户信息
      wx.getUserInfo({
        success: (res) => {
          //解构赋值
          let {
            userInfo
          } = res;
          this.setData({
            userInfo: res.userInfo
          })
        },
        fail: (res) => {
          console.log("调用了失败的回调");
        }
      });

    },
  
 
 
  //绑定的是否登录授权的事件
  isGetinfo(data) {
    if (data.detail.rawData) {
      //点击了允许
      console.log("允许");
      this.getuser();

    } else {
      //点击了不允许
      console.log("不");
    }
  }

}) 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。