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

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

代码如下

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

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