vue实现微信获取用户信息的方法

本次项目做到一个点赞功能，即分享出去一个页面给微信好友，微信好友点开并点赞，需要将点赞用户的微信昵称，微信头像以及微信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、需要获取用户信息，且二次分享的问题

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

代码如下

// 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进行配置

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。