视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue实现微信获取用户信息的方法
2020-11-27 21:59:49 责编:小采
文档


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

微信网页授权

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

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

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

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

⚠️

3、用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户OpenID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。

4、分享页面的实际链接:

⚠️ 当前页面的链接需要 encodeURIComponent( url ) 编码

https://open.weixin.qq.com/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、需要获取用户信息,且二次分享的问题

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

代码如下

// 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 = `https://open.weixin.qq.com/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--参数
 api.getWechatInfo(code).then((res)=>{
 if(res.data.code == 200) {
 // 返回的是json字符串
 let _data = res.data.content
 let _personMsg = JSON.parse(_data)
 this.wechatMsg = _personMsg
 // 本地存储微信用户信息,防止页面被刷新,code失效
 window.localStorage.setItem('wechatMesssage', _data)
 } else if (res.data.code == 400) { // 400-code失效,400是后端返回,具体看后端返回哪个码
 let msgs = window.localStorage.getItem('wechatMesssage')
 this.wechatMsg = JSON.parse(msgs) 
 } else {
 this.$Message.message(res.data.message);
 }

 })
 },

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

⚠️--------------------

  1. 当前页面的域名,需要在公众号后台配置添加(详见官网)
  2. 如果页面存在#,可能会出问题,可以使用nginx进行配置

下载本文
显示全文
专题