vue ＋ 微信获取用户信息

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. 须要获取用户信息，且二次分享的问题
   虽然当前页面没有问题，可是当前微信用户使用微信进行二次分享，则微信会分享当前页面的连接（不包含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进行配置