vue + 微信猎取用户信息
本次项目做到一个点赞功用,即分享出去一个页面给微信挚友,微信挚友点开并点赞,须要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个须要关注民众号才会有该字段)传给后端,记录点赞人的相干信息
- 微信民众号网页受权设置,详见官网
- 关于网页受权的两种scope的区分申明 (细致见官网)
-scope=snsapi_base 猎取微信用户openid,猎取后直接跳转营业页面,不须要用户操纵
-scope=snsapi_userinfo 猎取微信用户细致信息(昵称,头像等),须要用户手动点击受权,当点击许可时,会跳转营业页面(类似于封闭弹窗),点击谢绝时会推出页面,受权如图: - ⚠️用户管理类接口中的“猎取用户基本信息接口”,是在用户和民众号发生音讯交互或关注后事宜推送后,才依据用户OpenID来猎取用户基本信息。这个接口,包括其他微信接口,都是须要该用户(即openid)关注了民众号后,才挪用胜利的。
分享页面的现实链接:
⚠️ 当前页面的链接须要 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 // 其他值均不必修改
- 点击许可后跳转的链接是 REDIRECT_URI + code=CODE&state=STATE。
⚠️ 此处的code能够用来调取接口猎取微信用户的相干信息
⚠️ 每次用户受权带上的code将不一样,code只能运用一次,5分钟未被运用自动逾期。
-官方说法code只能被运用一次,在H5页面中,假如有跳转的状况,再返回当前页面,微信会推断是不是已受权,假如受权过,则code返回的照样上一次的code,而你假如用code调取用户信息(code已失效)会报 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ],所以在第一次猎取用户信息的时刻就能够将该用户信息存储在当地 - 须要猎取用户信息,且二次分享的题目
虽然当前页面没有题目,然则当前微信用户运用微信举行二次分享,则微信会分享当前页面的链接(不包括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,假如没有,能够展现微信民众号的二维码,供用户辨认关注
⚠️--------------------
- 当前页面的域名,须要在民众号背景设置增加(详见官网)
- 假如页面存在#,可能会出题目,能够运用nginx举行设置