vue实现微信获取用户信息的方法 - 行业资讯 - 肥雀云

本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号才会有该字段)传给后端,记录点赞人的相关信息

微信网页授权

1,微信公众号网页授权配置,详见官网

2,关于网页授权的两种范围的区别说明(详细见官网)
　　

范围=snsapi_base获取微信用户openid,获取后直接跳转业务页面,不需要用户操作
　　

范围=snsapi_userinfo获取微信用户详细信息(昵称,头像等),需要用户手动点击授权,当点击允许时,会跳转业务页面(类似于关闭弹窗),点击拒绝时会推出页面,授权如图:
　　

　　https://open.weixin.qq.com/connect/oauth3/authorize& # 63; appid=APPID& redirect_uri=REDIRECT_URI& response_type=code&范围=SCOPE&状态=# wechat_redirect//APPID:公众号的APPID//REDIRECT_URI:当前页面的链接,需要编码//范围:snsapi_base/snsapi_userinfo//其他值均不用改动以前　　　　

5点击允许后跳转的链接是REDIRECT_URI +代码=CODE&状态=状态。
　　

& # 9888; & # 65039;此处的代码可以用来调取接口获取微信用户的相关信息
　　

& # 9888; & # 65039;每次用户授权带上的代码将不一样,代码只能使用一次,5分钟未被使用自动过期。
　　

——官方说法代码只能被使用一次,在H5页面中,如果有跳转的情况,再返回当前页面,微信会判断是否已经授权,如果授权过,则代码返回的还是上一次的代码,而你如果用代码调取用户信息(代码已失效)会报无效代码,提示:[req_id: GGJbIz4ce-oGYwya],所以在第一次获取用户信息的时候就可以将该用户信息存储在本地

6,需要获取用户信息,且二次分享的问题
　　

虽然当前页面没有问题,但是当前微信用户使用微信进行二次分享,则微信会分享当前页面的链接(不包含https://open.weixin.qq.com),新用户点击则不会进行授权,但是微信的二次分享会在当前链接加上,从=,可以在vue创建的生命周期里进行参数获取并判断,如果有从参数,则跳转https://open.weixin.qq.com/co..。链接,让用户授权
　　& # 9888;& # 65039;二次分享样式显示问题可以查看我的另一篇文章vue +微信二次分享/自定义分享

代码如下

　　　　//创建周期　　如果(这一点。route.query.from美元){//判断链接中是否有从参数,下面的studentId, activityId项目需要　　让_nowUrl=window.location.href.split(& # 63;)[0] + " & # 63;资源=1,studentId=$ {。$ route.query.studentId}, activityId=$ {$ route.query.activityId}。” 　　让_shareUrl=' https://open.weixin.qq.com/connect/oauth3/authorize& # 63; appid=$ {appid}, redirect_uri=$ {encodeURIComponent (_nowUrl)}, response_type=code&范围=snsapi_userinfo&状态=# wechat_redirect ' 　　窗口。位置。href=https://www.yisu.com/zixun/_shareUrl 　　返回　　} 　　　　　　//处理微信用户信息　　handleWechatMsg(代码){//调取获取微信用户信息的接口(后端参考微信官方文档进行封装)代码——参数　　api.getWechatInfo(代码)((res)=祝辞{ 　　如果(res.data。代码==200){//返回的是json字符串　　让_data=https://www.yisu.com/zixun/res.data.content 　　让_personMsg=JSON.parse (_data) 　　这一点。wechatMsg=_personMsg//本地存储微信用户信息,防止页面被刷,新代码失效　　window.localStorage。setItem (wechatMesssage, _data) 　　如果(res.data}其他。代码==400){//400 -代码失效,400是后端返回,具体看后端返回哪个码　　让公司=window.localStorage.getItem (“wechatMesssage”) 　　这一点。wechatMsg=JSON.parse(公司) 　　其他}{ 　　美元。Message.message (res.data.message); 　　} 　　　　}) 　　}, 　　　　

如果需要获取微信unionid,则需要引导用户关注公众号,可以在返回的用户信息中判断是否含有unionid,如果没有,可以展示微信公众号的二维码,供用户识别关注