微信小程序-新版用户授权

最新推荐文章于 2024-08-18 01:05:11 发布

小溪彼岸

最新推荐文章于 2024-08-18 01:05:11 发布

阅读量580

点赞数 3

分类专栏：微信小程序笔记文章标签：授权 getUserInfo

本文链接：https://blog.csdn.net/zww1984774346/article/details/84849623

版权

微信小程序笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

微信小程序官方文档提示

wx.getUserInfo(OBJECT) ，此接口有调整，使用该接口将不再出现授权弹窗。

推荐使用

<button open-type="getUserInfo"></button>

使用方式
*.wxml

<view class='container'>
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view wx:if='{{!userInfo}}'>
    <!-- 如果只是展示用户头像昵称，可以使用 <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>
  </view>
  
  <view class='usermotto'>
    <text class='user-motto'>{{motto}}</text>
  </view>
</view>

*.js

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    userInfo: null,
    motto: 'Hello World'
  },
  onLoad: function() {
    var that = this
    // 查看是否授权
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
             that.setData({
              userInfo: res.userInfo
            })
            }
          })
        }
      }
    })
  },

  /*
   *  授权成功
   */
  bindGetUserInfo: function (e) {
    this.setData({
      userInfo: e.detail.userInfo
    })
  }
  }

效果图：
在这里插入图片描述