摘要：分享页面的实际链接当前页面的链接需要编码公众号的当前页面的链接，需要编码其他值均不用改动点击允许后跳转的链接是。此处的可以用来调取接口获取微信用户的相关信息每次用户授权带上的将不一样，只能使用一次，分钟未被使用自动过期。
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进行配置
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54722.html
摘要：分享页面的实际链接当前页面的链接需要编码公众号的当前页面的链接，需要编码其他值均不用改动点击允许后跳转的链接是。此处的可以用来调取接口获取微信用户的相关信息每次用户授权带上的将不一样，只能使用一次，分钟未被使用自动过期。 vue ＋ 微信获取用户信息 本次项目做到一个点赞功能，即分享出去一个页面给微信好友，微信好友点开并点赞，需要将点赞用户的微信昵称，微信头像以及微信openid，微信...
摘要：微信网页授权，基于适配方案，开发的微信授权方案。项目地址又又又一次来写微信网页授权，一年前写过的微信授权解决方案。 vue微信网页授权，基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios，开发的微信授权方案。项目地址：vue-wechat-auth 又又又一次来写微信网页授权，一年前写过的 [vue 微信授权解决方案]。 参考了[v...
摘要：接口注入权限接入微信接口的最主要也是最重要一步步就是填写下面这些信息，填完这些信息之后，基本就好了。 写在前面： 做微信的网页基本上都要接入微信的sdk，我在做的时候，也颇费了一番功夫，然后就想记录一下，供自己日后翻阅，以及让有需要的朋友可以做一下参考，如果喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com 安装sdk np...
摘要：但是在本次开发中，我只使用了，，个别微信版本分享出来的还是没有图片和文案，的是没有问题，所以又加上了弃用的，之后，安卓机也可以正常分享。 微信二次分享／自定义分享 从App中使用App分享（一次分享） showImg(https://segmentfault.com/img/bVbp83T?w=593&h=278); 使用微信导航栏的分享（二次分享） －－已做处理 showImg(...
阅读 2560·2023-04-25 18:13
阅读 768·2021-11-22 12:10
阅读 2967·2021-11-22 11:57
阅读 2137·2021-11-19 11:26
阅读 2163·2021-09-22 15:40
阅读 1458·2021-09-03 10:28
阅读 2701·2019-08-30 15:53
阅读 1947·2019-08-30 15:44
