微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现

这个接口只能获得一些非敏感信息，例如用户昵称，用户头像，经过用户授权允许获取的情况下即可获得用户信息，至于openid这些，需要调取wx.login来获取。

index.wxml

<!-- 当已经授权的时候 -->
<view wx:if="{{result == 'ok'}}" class="result">
 <view class="headimg">
  <image src="{{avatarUrl}}"></image>
 </view>
 <view class="nickname">{{nickName}}</view>
</view>
<!-- 当未授权的时候 -->
<view wx:else class="result">
<view>未授权</view>
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
</view>

index.js

Page({
 data: {
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 onLoad: function() {
  var that = this;
  // 查看是否授权
  wx.getSetting({
   success (res){
    if (res.authSetting['scope.userInfo']) {
     // 已经授权，可以直接调用 getUserInfo 获取头像昵称
     wx.getUserInfo({
      success: function(res) {
       console.log(res.userInfo)
       that.setData({
        result:'ok',// 结果
        nickName:res.userInfo.nickName,// 微信昵称
        avatarUrl:res.userInfo.avatarUrl,// 微信头像
       })
      }
     })
    }else{
     // 未授权，结果返回null
     that.setData({
      result:'null',// 结果
     })
    }
   }
  })
 },
 // 请求API授权，获得用户头像和昵称
 bindGetUserInfo (e) {
  console.log(e.detail.userInfo.nickName)
  var that = this;
  that.setData({
   result:'ok',// 结果
   nickName:e.detail.userInfo.nickName,// 微信昵称
   avatarUrl:e.detail.userInfo.avatarUrl,// 微信头像
  })
 }
})

index.wxss

button{
 margin:30px auto 0;
}
.result{
 width:200px;
 margin:20px auto;
 text-align: center;
}
.result .headimg{
 width:200px;
 height: 200px;
 border-radius: 100px;
 margin-bottom: 20px;
}
.result .headimg image{
 width:200px;
 height: 200px;
 border-radius: 100px;
}

到此这篇关于微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现的文章就介绍到这了,更多相关小程序wx.getUserInfo授权内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • 微信小程序学习笔记之登录API与获取用户信息操作图文详解

    微信小程序学习笔记之登录API与获取用户信息操作图文详解

    本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序跳转页面.传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法. [小程序登录]wx.login() app.js: App({ onLaunch: function () { // 登录 wx.login({ success: function (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://w

  • 微信小程序实现获取用户信息并存入数据库操作示例

    本文实例讲述了微信小程序实现获取用户信息并存入数据库操作.分享给大家供大家参考,具体如下: 微信小程序获取用户信息简单,但是在存入自己服务器数据库的过程中研究了一天多的时间,并且网上搜索不到该资源,故发出来供大家参考. index.js Page({ data: { nickName: "微信账号登录", avatarUrl:"./user-unlogin.png", }, onLoad: function () { var that = this; var nic

  • 微信小程序获取用户信息并保存登录状态详解

    微信小程序获取用户信息并保存登录状态详解

    前言 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session

  • 微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现

    这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取. index.wxml <!-- 当已经授权的时候 --> <view wx:if="{{result == 'ok'}}" class="result"> <view class="headimg"> <image src="{{avata

  • 微信小程序使用uni-app一键获取用户信息

    用户不想输入账号密码,一键登录 <label for="" @click="LoginDL">一键登陆</label> uni.getUserProfile(只支持微信小程序) 获取用户信息.每次请求都会弹出授权窗口,用户同意后返回 userInfo.  参数说明: uni.getUserProfile({ //获取微信信息 desc: '用于获取您的个人信息', // 声明获取用户个人信息后的用途,不超过30个字符 success: res

  • 微信小程序 wx.getUserInfo引导用户授权问题实例分析

    本文实例讲述了微信小程序 wx.getUserInfo引导用户授权问题.分享给大家供大家参考,具体如下: 首先,在page外定义一个函数用户判断是否为空对象 var isEmptyObject = function (e) { var temp; for (temp in e) return !1; return !0 } 然后,在page中的onload里面调用授权 onLoad: function () { var that = this; if (app.globalData.userIn

  • 微信小程序学习笔记之获取位置信息操作图文详解

    微信小程序学习笔记之获取位置信息操作图文详解

    本文实例讲述了微信小程序学习笔记之获取位置信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序文件上传.下载操作.这里分析一下获取位置信息操作. [获取当前位置信息]wx.getLocation() getlocation.wxml: <view> <button bindtap="getlocation">获取位置</button> </view> getlocation.js: Page({ getlocation: fu

  • 微信小程序 springboot后台如何获取用户的openid

    openid可以标识一个用户,session_key会变,所以来获取一下openid. openid不能在微信小程序中直接获取,需要后台发送请求到微信的接口,然后微信返回一个json格式的字符串到后台,后台处理之后,再返回到微信小程序. 发布的小程序需要https的域名,而测试的时候可以使用http. 小程序在app.js中,修改login()中的内容: // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, session

  • 微信小程序wx.getImageInfo()如何获取图片信息

    微信小程序wx.getImageInfo()如何获取图片信息

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 一.知识点 二.列子 (1).加载时 <view class="zn-uploadimg"> <image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx" /> <text>图片的大小:{{imgwid

  • 微信小程序结合ThinkPHP5授权登陆后获取手机号

    微信小程序结合ThinkPHP5授权登陆后获取手机号

    1.在我们授权登陆后会获取到用户的 sessionKey 这个是获取手机号不可分割的一部分 上代码 wxml: <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> js:当我们在调用这个方法的时候可以在控制台输出一下 e 下方用红框框起来的两个也是获取手机号不可分割的一部分 getPhoneNumber: function

  • 微信小程序wx.request使用POST请求时后端无法获取数据解决办法

    微信小程序wx.request使用POST请求时后端无法获取数据解决办法

    遇到的坑: 例如在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 当我们使用POST方式请求时,后端无法获取到传送的参数,但使用GET方式却是可以的. 解决办法: 设置请求的 header头: header: { "Content-Type": "application/x-www-form-urlencoded" }, 特别注意:post请求必须写method: 'POST',因为wx.

  • 微信小程序后端实现授权登录

    登录与授权 官方文档 一.登录登录流程时序 说明: 调用 wx.login()获取临时登录凭证code,并回传到开发者服务器. 调用code2Session接口,换取用户唯一标识 OpenID和会话密钥 session_key. 之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份. 注意: 会话密钥session_key是对用户数据进行加密签名的密钥.为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥. 临时登录

  • 微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法 最近在给公司开发微信小程序,需要用到微信登录,根据文档要求需要把获取的用户信息按照AES进行解密. 我使用的是官方提供的PHP demo,拷贝到程序中,测试发现,解密之后的数据前面有一串乱码. 类似于这样子的,前面一段是乱码. 经过仔细的检查,发现官方的提供的demo中的帐号和机密之后的信息是可以解密的,这就说明解密代码是没有问题的. 后来查询微信开发者社区,找到好多解密失败.其中一个回答说是因为多次调用wx.login之后导致的问题. 终

随机推荐