• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序获取个人信息

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
这个作业属于哪个课程 <2021春软件工程实践|S班>
这个作业要求在哪里 <作业要求>
这个作业的目标 个人技术博客

技术概述

学习原因:在开发微信小程序的时候,我们一般都需要获取当前用户的微信信息,来存储用户的个性化设置,以及提供个性化的服务。
做什么:这里要介绍一下如何获取用户的登录状态及个人信息。
技术难点:在我个人开发过程中发现有许多参考文档是旧的,不能很好地解决问题,于是由此介绍下个人的解决方案。

技术详述

  1. 获取用户身份标识
    我们一般是采用wx.login()函数来获取获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等,之后就可以依据openid在后端生成用户并绑定用户行为。返回值是一个code,code是用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用auth.code2Session,使用code换取openid、unionid、session_key等信息
wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: \'https://example.com/onLogin\',
        data: {
          code: res.code
        }
      })
    } else {
      console.log(\'登录失败!\' + res.errMsg)
    }
  }
})

这是微信官方提供的时序图,在下面问题解决部分有对于此的应用。

  1. 获取用户资料信息
    在之前可以通过wx.getUserInfo()函数配合login登录后的状态直接获取用户状态,但在四月份微信调整接口使得getUserInfo()只能获取到匿名用户状态,于是现在需要获取用户信息应调用wx.getUserprofile()函数。
getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
    wx.getUserProfile({
      desc: \'用于完善会员资料\', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

技术使用中遇到的问题和解决过程

  1. 由于是初学,在获取登录状态以及登录信息时都会踩坑,比如登录完却没有记录状态等问题,有些接口需要登录后才能调用,否则后端无法获取正在访问的用户的信息,自然无法返回需要的数据,以下为我的解决方法可以参考。
    做法是封装userLogin函数,函数返回一个Promise对象,在调用别的函数时通过userInfo这个全局变量去判断该用户是否登录,若尚未登录则调用userLogin.then请求登录,已登录则可以直接获取信息。
userLogin:function (e) {
    let that=this;
    let promise=new Promise(function (resolve,reject) {
      let _that = that;
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
           console.log(res.code);
           console.log("登录" + that.globalData.baseUrl);
           request({
             url:  that.globalData.baseUrl + \'/api/user/login\',
             method: \'POST\',
             data:
               res.code,
             success:function(respond)
             {
               that.globalData.userInfo=respond.data;
               console.log("登录成功");
               console.log(respond);
               that.globalData.userId = respond.data.data.id;
               resolve(respond);
             },
             fail:function(respond)
             {
              //  this.globalData.userInfo=res.data;
              console.log("登录失败");
              console.log(respond);
               reject(respond);
             }
           })
        }
      })
    })
    return promise;
  },
function(){
    if(!app.globalData.userInfo){  //未登录
        userLogin
        .then(this.action());
    }
    else                           //已登录
        this.action();
}
  1. 获取用户资料时一般应提供一个按钮供用户授权,点击按钮后会出现授权弹窗用户允许后将返回一系列用户信息,则可以在特定地方显示,或者将其存储进数据库中



    代码如下可参考
<image class="avatar" bindtap="setAvatarUrl" src="{{url}}"> </image>
setAvatarUrl: function(e) {
    wx.getUserProfile({
      desc: \'获取用户头像等信息\',
      success: res => {
        this.setData({
          url: res.userInfo.avatarUrl
        })
        console.log(res)
      },
      fail: err => {
        wx.showToast({
          title: \'失败了\',
          icon: \'error\'
        })
      }
    })
  },

总结

微信小程序确实是一种很便携的工具,能够实现快速开发。以上是我对于获取用户身份标识以及获取用户信息的方法的分享,在初次学习时容易遇到问题,查阅资料后也会存在疑惑,以上内容是我在踩坑后总结调整得到,希望能对读者有所帮助,更多拓展的用法需要参考微信开发文档。若有疑问,也可评论留言。

参考文献、参考博客

微信官方文档
微信小程序获取openid


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
手机预览微信小程序发布时间:2022-07-18
下一篇:
微信小程序开发--获取微信用户手机号码发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap