微信小程序一键获取用户头像、昵称等基本信息

系统：Win10
微信开发工具：Stable v1.03.2005140

根据官方发布更新说明：小程序登录、用户信息相关接口调整说明
对getUserInfo的功能进行了调整，可能已经无法实现下面的效果，请注意！！！

需求描述

在一次开发微信小程序的过程中，需要获取到使用小程序的用户头像和用户昵称，而且只需要一次授权，后面再使用就自动获取用户的信息

功能实现

1.操作流程

用户登录时，使用 wx.getSetting 来查询用户是否授权过
- 如用户首次登录，则使用 button open-type=‘getUserInfo’ 来调起授权
  - 若未授权或拒绝授权，则一直显示授权按钮
  - 若获得授权，则使用 wx.getUserInfo 来获取用户的头像、昵称等信息
- 若用户是再次登录，则通过成功返回的 scope.userInfo 来调用用户的头像、昵称等信息

2.目录结构

这里我新建了一段代码片段来测试

3.关键代码

记得在 app.js 下创建一个全局变量 userInfo

App({globalData: {userInfo: null},onLaunch: function () {}
})

index/index.js

const app = getApp()
var that
Page({/* 页面初始数据 */data: {userInfo: {},hidden_actionSheet: true,},/*** 页面加载*/onLoad: function () {that = thisthat.isAuthorize().then(res => { //用户已经授权获取基本信息wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothat.setData({userInfo: app.globalData.userInfo,})}})}).catch(res => { //用户没有授权获取基本信息that.setData({hidden_actionSheet: false,})})},/* 是否授权获取基本信息，已经授权返回到then，没有授权返回到catch */isAuthorize() {return new Promise((resolve, reject) => {// 获取用户授权状态wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {console.log("全局--用户已经授权")resolve()} else {console.log("全局--用户还没有授权获取基本信息")reject()}}})})},// 底下的取消按钮actionSheetChange: function (e) {wx.showModal({showCancel: false,content: '部分功能需要登录才能使用',})},// 获取用户信息：拒绝还是接受都会进入这里allowGetUserInfo: function (e) {if (e.detail.rawData) { // 权限选择了：允许that.setData({userInfo: app.globalData.userInfo,})// 获取用户信息wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothat.setData({userInfo: app.globalData.userInfo,hidden_actionSheet: true, // 隐藏actionSheet})}})} else { // 权限选择了：拒绝wx.showModal({showCancel: false,content: '部分功能需要登录才能使用',})}},
})

index/index.wxml

<view class="container"><view class="userinfo"><!-- hasUserInfo为false表示没有获取到用户信息，就显示获取头像昵称的按钮 --><action-sheet hidden="{{hidden_actionSheet}}" bindchange="actionSheetChange"><button class="bt_login" open-type="getUserInfo" bindgetuserinfo="allowGetUserInfo"> 微信授权登录 </button><!-- 取消按钮可以不用 --><action-sheet-cancel class='cancel'>取消</action-sheet-cancel></action-sheet><!-- 已获取用户信息，显示头像和昵称 --><block hidden="{{!hidden_actionSheet}}"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view>
</view>

index/index.wxss

page {width: 100%;height: 100%;
}.container {width: 100%;height: 100%;
}.userinfo {display: flex;flex-direction: column;align-items: center;
}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.bt_login {width: 200rpx;height: 70rpx;color: #6699FF;border: 3rpx solid #6699FF;border-radius: 80rpx;font-size: 35rpx;margin: 20rpx 0;display: flex;justify-content: center;align-items: center;
}.cancel {font-size: 35rpx;
}.userinfo-nickname {color: #aaa;
}

4.效果演示

下面是测试效果图，除了头像和昵称外，还可以获取用户的国家，城市，性别，语言等信息

微信小程序一键获取用户头像、昵称等基本信息相关推荐

微信小程序如何获取用户头像昵称
微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息,按照官方推荐会显示用户在微信的头像和昵称,本文介绍一下实现方案. ...
php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
微信小程序直接获取用户头像、昵称等（无需按钮授权）
直接使用微信提供的组件在页面使用获取用户头像.昵称头像是直接返回图片需要对样式进行修改,其它数据也是直接展示头像圆角需要加这个,否则实现不了
【微信小程序】获取用户头像和ID
课程中国海洋大学22夏<移动软件开发> 实验名称实验1:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步 ...
关于微信小程序如何获取用户头像（保存到本地）新方法
传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,但是在使用时候会有官方log提醒你,这个方法需要升级.新方法则无需用户授权,使用方法如下: <open-data ...
【微信小程序开发】用户头像昵称获取规则调整 2022
之前通过wx.getUserInfo获取用户的头像.昵称等信息 2021年4月调整为通过wx.getUserProfile获取用户的头像.昵称等信息详情请看:https://developers.w ...
微信小程序无法获取用户头像和昵称，微信小程序获取昵称为微信用户，头像为灰色，请使用下面方式过去
getUserProfile(e) { wx.getUserProfile({ desc: '使用户得到更好的体验', success: (res) => { console.log(" ...
微信小程序——最新获取用户昵称和头像的方法总结
前段时间微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统 ...
小程序获取不到用户头像和昵称返回微信用户问题解决，即小程序授权获取用户头像规则调整的最新解决方案
最近好多同学在学习石头哥小程序课程的时候,遇到了下面这样的问题,在小程序授权获取用户头像和昵称时,获取到的是下面这样的. 到底是什么原因导致的呢,去小程序官方文档一看,又是官方改规则了. 点进去一看, ...

微信小程序一键获取用户头像、昵称等基本信息

微信小程序一键获取用户头像、昵称等基本信息

微信小程序一键获取用户头像、昵称等基本信息

需求描述

功能实现

1.操作流程

2.目录结构

3.关键代码

4.效果演示

微信小程序一键获取用户头像、昵称等基本信息相关推荐

最新文章

热门文章