文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序开发之获取用户信息

2023-09-27 20:21

关注

环境

用户的openid和头像名称信息

openid 是小程序用户的唯一标识。注意, openid 并不是微信用户的唯一标识,它是和小程序绑定的。也就是说,同一个微信用户,他在小程序A中的openid和小程序B中的openid是不同的。

头像和名称并不能唯一代表用户。头像名称等信息是可以公开的,而openid则相对私密,需要较高的安全性。

获取用户头像名称

显示用户头像名称

用户的头像和名称是公开的,可以直接在小程序中显示。

<open-data style="align-self: center; width: 150rpx; height: 150rpx;" type="userAvatarUrl">open-data><open-data style="text-align: center;" type="userNickName">open-data><open-data style="text-align: center;" type="userGender" lang="zh_CN">aaaopen-data><open-data style="text-align: center;" type="userCity" lang="zh_CN">open-data><open-data style="text-align: center;" type="userProvince" lang="zh_CN">open-data><open-data style="text-align: center;" type="userCountry" lang="zh_CN">open-data>

在这里插入图片描述

不过,通过该方法,小程序只是能够显示用户信息,并不能使用该信息。

wx.getUserProfile()

在小程序里,要想获取并使用用户信息,需要用户授权才行。下面是一个示例小程序:

在微信开发者工具中,创建一个新项目 miniprogram-11 ,输入AppID,并选择“微信云开发”。

找一张图片(本例中为 defaultUser.jpg )作为缺省的用户头像图标,把该图片复制到 images 目录下。

在这里插入图片描述

修改“miniprogram -> pages -> index -> index.wxml”文件内容如下:

<banner style="margin: 100rpx; text-align:center">  <view><image mode="aspectFill" src="{{userinfo.avatarUrl}}" style="width: 150rpx; height: 150rpx;">image>view>  <text>\n{{userinfo.nickName}}\ntext>banner><button wx:if="{{!hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="getUserProfile">获取用户信息button><button wx:if="{{hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="clearUserProfile">移除用户信息button>

修改“miniprogram -> pages -> index -> index.js”文件内容如下:

......  data: {    userinfo: {      avatarUrl: '../../images/defaultUser.jpg',      nickName: '未授权'    },        hasUserInfo: false,  },  getUserProfile: function(e){    wx.getUserProfile({      desc: '获取您的微信个人信息',      success:(res)=>{          this.setData({            userinfo: res.userInfo,            hasUserInfo: true          })          wx.setStorageSync('userinfo', res.userInfo)          wx.showToast({            title: '已获取信息',          })      },      fail:function(e){          wx.showToast({            title: '已取消',            icon: "none",            duration: 1500,            mask: true          })      }    })  },  clearUserProfile() {    wx.removeStorage({        key: 'userinfo',    })        this.setData({      userinfo: {        avatarUrl:'../../images/defaultUser.jpg',        nickName:'未授权',      },      hasUserInfo: false    })        wx.showToast({      title: '已移除信息',    })  },  onShow: function () {    var n = wx.getStorageSync("userinfo");        if(n.nickName != null && n.nickName != ''){      console.log(n)      this.setData({          userinfo: n,          hasUserInfo: true,      })    }  },......

测试效果如下:

在这里插入图片描述

点击“获取用户信息”按钮,如下:

在这里插入图片描述

如果选择“拒绝”,则提示“已取消”:

在这里插入图片描述

如果选择“允许”,则显示用户的图标和用户名,并提示“已获取信息”:

在这里插入图片描述

此时,如果点击“移除用户信息”按钮,则又恢复为缺省状态:

在这里插入图片描述

此外,缓存用户信息后,下次再打开页面,就会直接显示用户信息:

在这里插入图片描述

可以手工清除缓存信息:

在这里插入图片描述

获取openid

官方文档( https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a )给出的微信登录流程如下:

在这里插入图片描述
官方文档也解释了为何不能通过 wx.login直接拿到微信用户的ID编号,主要是出于安全的考虑。

基本流程为:

有了这个绑定信息,小程序在下次需要用户登录的时候就可以不需要输入账号密码,因为通过 wx.login() 获取到code之后,可以拿到用户的微信身份 openid ,通过绑定信息就可以查出业务侧的用户身份ID,这样静默授权的登录方式显得非常便捷。

上图中的第3步:“通过code和其他信息换取用户ID”,官方文档里提到,微信服务器提供的接口地址是: https://api.weixin.qq.com/sns/jscode2session?appid=&secret=&js_code=&grant_type=authorization_code

在实现上,有几种考虑:

  • 在小程序里直接 wx.request 请求
  • 在云函数里请求
  • 在开发者服务器里请求

方法1:小程序直接请求

在小程序里直接发上述请求,会报错: https://api.weixin.qq.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

官方文档里提到:

出于安全考虑,api.weixin.qq.com 不能被配置为服务器域名,相关API也不能在小程序内调用。 开发者应将 AppSecret保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API;

网上有人说可以配置微信开发者工具,不检验合法域名,我没仔细研究。

方法2:云函数

创建云函数 getMyOpenid ,默认生成的 index.js 文件内容如下:

// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境// 云函数入口函数exports.main = async (event, context) => {  const wxContext = cloud.getWXContext()  return {    event,    openid: wxContext.OPENID,    appid: wxContext.APPID,    unionid: wxContext.UNIONID,  }}

可见,默认返回值里已经包含了 openid

我们来测试一下。

修改 index.wxml ,添加以下内容:

<button style="width: 300rpx" type="primary" bindtap="getMyOpenid">获取openidbutton><view style="text-align: center;">{{myOpenid}}view>

修改页面的 index.js ,添加以下内容:

......  data: {    userinfo: {      avatarUrl:'../../images/defaultUser.jpg',      nickName:'未授权'    },        hasUserInfo: false,    myOpenid: ''  },  getMyOpenid: function() {    wx.cloud.callFunction({      name: 'getMyOpenid'    })    .then(res => {      console.log(res)      this.setData({        myOpenid: res.result.openid      })    })  },......

测试效果如下:

在这里插入图片描述

方法3:开发者服务器

具体方法就是官方文档里提到的,使用code和其它信息(AppId和AppSecret),访问微信服务器的接口地址 https://api.weixin.qq.com/sns/jscode2session?appid=&secret=&js_code=&grant_type=authorization_code ,获取openid。

注:AppId和AppSecret,可以在 https://mp.weixin.qq.com 获取:

在这里插入图片描述
注意:AppID是公开的,AppSecret是私密的。

我没有具体试验过,有待研究。

参考

  • https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a
  • https://blog.csdn.net/calm_programmer/article/details/124207072

来源地址:https://blog.csdn.net/duke_ding2/article/details/130674320

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯