vue实现获取⽤户信息的⽅法
本次项⽬做到⼀个点赞功能，即分享出去⼀个页⾯给好友，好友点开并点赞，需要将点赞⽤户的昵称，头像以及openid，unionid（这个需要关注公
众号才会有该字段）传给后端，记录点赞⼈的相关信息
1、⽹页授权配置，详见官⽹
2、关于⽹页授权的两种scope的区别说明（详细见官⽹）
－scope=snsapi_base 获取⽤户openid，获取后直接跳转业务页⾯，不需要⽤户操作
－scope=snsapi_userinfo 获取⽤户详细信息（昵称，头像等），需要⽤户⼿动点击授权，当点击允许时，会跳转业务页⾯（类似于关闭弹窗），点击拒绝时会推出页⾯，授权如图：
⚠
3、⽤户管理类接⼝中的“获取⽤户基本信息接⼝”，是在⽤户和产⽣消息交互或关注后事件推送后，才能根据⽤户OpenID来获取⽤户基本信息。这个接⼝，包括其他接⼝，都是需要该⽤户（即openid）关注了后，才能调⽤成功的。
4、分享页⾯的实际链接：
⚠  当前页⾯的链接需要 encodeURIComponent( url ) 编码
open.weixin.qq/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
// APPID: 的appid
// REDIRECT_URI：当前页⾯的链接，需要编码
// scope： snsapi_base / snsapi_userinfo
// 其他值均不⽤改动
5、点击允许后跳转的链接是 REDIRECT_URI + code=CODE&state=STATE。
⚠  此处的code可以⽤来调取接⼝获取⽤户的相关信息
⚠  每次⽤户授权带上的code将不⼀样，code只能使⽤⼀次，5分钟未被使⽤⾃动过期。
－官⽅说法code只能被使⽤⼀次，在H5页⾯中，如果有跳转的情况，再返回当前页⾯，会判断是否已经授权，如果授权过，则code返回的还是上⼀次的code，⽽你如果⽤code调取⽤户信息（code已失效）会报 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ]，所以在第⼀次获取⽤户信息的时候就可以将该⽤户信息存储在本地
6、需要获取⽤户信息，且⼆次分享的问题
代码如下
// created 周期
if(this.$route.query.from) { // 判断链接中是否有from参数，下⾯的studentId，activityId项⽬需要
let _nowUrl = window.location.href.split('?')[0] + `?resource=1&studentId=${this.$route.query.studentId}&activityId=${this.$route.query.activityId}`
let _shareUrl = `open.weixin.qq/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect` window.location.href = _shareUrl
return
}
// 处理⽤户信息
handleWechatMsg(code) {
// 调取获取⽤户信息的接⼝（后端参考官⽅⽂档进⾏封装）  code－－参数
vue json字符串转数组if(de == 200) {
// 返回的是json字符串
let _data = t
let _personMsg = JSON.parse(_data)
this.wechatMsg = _personMsg
// 本地存储⽤户信息，防⽌页⾯被刷新，code失效
window.localStorage.setItem('wechatMesssage', _data)
} else if (de == 400) { // 400-code失效，400是后端返回，具体看后端返回哪个码
let msgs = Item('wechatMesssage')
this.wechatMsg = JSON.parse(msgs)
} else {
this.$ssage(ssage);
}
})
},
如果需要获取unionid，则需要引导⽤户关注，可以在返回的⽤户信息中判断是否含有unionid，如果没有，可以展⽰的⼆维码，供⽤户识别关注⚠ －－－－－－－－－－－－－－－－－－－－
1. 当前页⾯的域名，需要在后台配置添加（详见官⽹）
2. 如果页⾯存在＃，可能会出问题，可以使⽤nginx进⾏配置
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。