当前位置:   article > 正文

微信小程序(总结一):uniapp开发,获取微信用户信息(最新)_uniapp 获取微信用户信息

uniapp 获取微信用户信息

目录

第一章 了解趋势

第二章 准备工作 

2.1 注册微信小程序

2.2 获取小程序appId与小程序密钥

第三章 获取微信用户信息

3.1 用户登录

3.2  获取用户信息的两个方法

3.2.1 方法一(wx.getUserInfo)

3.2.2 方法二(wx.getUserProfile)

3.3 获取用户信息(现在)

第四章 获取接口调用凭据 access_token


第一章 了解趋势

随着小程序的发展,我们发现现在小程序的api,wx.getUserProfilewx.getUserInfo这两个接口已经不能满足获取到用户的基本信息了,如下图官方做出的解释:

第二章 准备工作 

2.1 注册微信小程序

微信小程序零基础入门【小程序的下载、安装与首项目配置】_小程序入门例子下载-CSDN博客

2.2 获取小程序appId与小程序密钥

第三章 获取微信用户信息

3.1 用户登录

  • 解释:通过该方法的目的就是为了获取code(登录凭证,有效时间5分钟) 
  •  作用:后续通过api接口请求,获取用户登录态信息
  • 用法:

html部分——

  1. <template>
  2. <view>
  3. <button @click="getLoginMethods()">调用wx.login方法</button>
  4. </view>
  5. </template>

 js部分——

  1. getLoginMethods() {
  2. uni.login({
  3. timeout: 6000,
  4. success: (res) => {
  5. console.log('success:login方法返回的值:', res)
  6. },
  7. fail(err) {
  8. console.log('fail:login方法返回错误:', err)
  9. },
  10. complete(val) {
  11. console.log('complete:login方法完成后返回值', val)
  12. }
  13. })
  14. }
  • 返回结果

  • 该code的有效期只有5分钟

3.2  获取用户信息的两个方法

3.2.1 方法一(wx.getUserInfo)

  • 使用wx.getUserInfo请求用户授权获取用户信息
  1. getUserInfoMethods() {
  2. uni.login({
  3. timeout: 6000,
  4. success: (res) => {
  5. console.log('success:login方法返回的值:', res)
  6. uni.getUserInfo({
  7. success(userInfo) {
  8. console.log('用户信息:', userInfo)
  9. }
  10. })
  11. },
  12. fail(err) {
  13. console.log('fail:login方法返回错误:', err)
  14. }
  15. })
  16. }
  • 输出结果

  • 目前微信小程序返回的用户信息是默认灰色头像以及"微信用户"的昵称,其他信息都不会返回,小编后续会出微信头像与微信用户昵称怎么获取的流程。

3.2.2 方法二(wx.getUserProfile)

  1. getUserInfoMethods() {
  2. uni.login({
  3. timeout: 6000,
  4. success: (res) => {
  5. console.log('success:login方法返回的值:', res)
  6. if (uni.getUserProfile) {
  7. uni.getUserProfile({
  8. desc: '授权登录',
  9. success(userInfo) {
  10. console.log('用户信息:', userInfo)
  11. }
  12. })
  13. } else {
  14. console.log('方法不可用!')
  15. }
  16. },
  17. fail(err) {
  18. console.log('fail:login方法返回错误:', err)
  19. }
  20. })
  21. }

3.3 获取用户信息(现在常用

html部分——

  1. <template>
  2. <view>
  3. <button @click="getUserInfo()">获取用户登录信息</button>
  4. </view>
  5. </template>

 js部分——

这里需要获取微信小程序的appid与密钥,在准备工作有说如何获取

  1. getUserInfo() {
  2. uni.login({
  3. success (res) {
  4. console.log('login', res)
  5. // 通过uni.login获取到临时登录凭证code
  6. if (res.code) {
  7. //发起网络请求
  8. uni.request({
  9. url: 'https://api.weixin.qq.com/sns/jscode2session',
  10. data: {
  11. appid: '微信小程序appid',
  12. secret: '微信小程序密钥',
  13. js_code: res.code, // wx.login登录code
  14. grant_type: 'authorization_code' // 固定赋值
  15. },
  16. success(res) {
  17. console.log('res', res)
  18. _this.openid = res.data.openid
  19. }
  20. })
  21. } else {
  22. console.log('登录失败!' + res.errMsg)
  23. }
  24. }
  25. })
  26. },

  • 返回的结果:

  • 至此,现在最常使用的获取用户信息的方法就结束了,由于微信小程序的调整,目前用户的详细信息已经被加密,具体是拿不到的,所以只需要拿到唯一识别的openid即可

第四章 获取接口调用凭据 access_token

  • 注意文档,是post请求

  • 请求参数 

 html部分——

  1. <template>
  2. <view>
  3. <button @click="getAccessToken()">获取access_token信息</button>
  4. </view>
  5. </template>

 js部分——

  1. getAccessToken() {
  2. uni.request({
  3. url: 'https://api.weixin.qq.com/cgi-bin/stable_token',
  4. method: 'POST',
  5. data: {
  6. appid: '微信小程序appid',
  7. secret: '微信小程序密钥',
  8. grant_type: 'client_credential' // 看文档直接赋值即可
  9. },
  10. success(res) {
  11. console.log('access_token', res)
  12. }
  13. })
  14. },
  • 结果:已经获取到access_token,保存即可,后续调用接口需要使用该access_token的值

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/630936
推荐阅读
相关标签
  

闽ICP备14008679号