这个项目实现了一个点赞功能，即分享一个页面给微信好友，微信好友点击并点赞，需要点赞用户的微信昵称、微信头像、微信openid、微信银联id(这个需要关注微信官方账号)。该字段将被传输到后端，以记录表扬人的相关信息

微信网页授权

1.微信微信官方账号网页授权配置，详见官网

2.两种网页授权范围的区别说明(详见官网)

-scope=snsapi _ base获取微信用户的openid，获取后直接跳转到业务页面，无需用户操作。

-scope=snsapi _ userinfo获取微信用户的详细信息(昵称、头像等)。)，用户需要手动点击授权。点击权限时会跳转到业务页面(类似关闭弹出)，点击拒绝时会推出页面，如图授权图所示：

3.用户管理界面中的“获取用户基本信息界面”，是在用户与微信官方账号产生关注后的消息交互或事件推送后，根据用户OpenID获取用户基本信息。这个界面，包括其他微信界面，只有用户(openid)关注微信官方账号后才能成功调用。

4.分享页面的实际链接：

当前页面的链接需要编码

https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid//REDIRECT _ URI=REDIRECT _ uri response _ type=codescope=scope este=状态#微信_ redirect//appid:微信官方账号的appid//REDIRECT_URI:当前页面的链接。需要编码。//作用域：SNSAPI _ base/SNSAPI _ user info//其他值无需更改。5.点击权限后跳转的链接是redirect _ uri code=code state=state。

这里的代码可以用来调用界面获取微信用户的相关信息

每次授权用户携带不同的代码，该代码只能使用一次，5分钟不使用将自动过期。

官方规定，代码只能使用一次。在H5页面，如果有跳转，回到当前页面，微信会判断是否已经授权。如果它已经被授权，代码将返回最后一个代码，如果您使用代码检索用户信息(代码已经过期)，您将报告无效代码，提示3360[req _ id : gjbiz4ce-ogywya]。

6.需要获取用户信息并共享两次

虽然当前页面没有问题，但是如果当前微信用户使用微信进行二次分享，微信会分享当前页面的链接(不含https://open.weixin.qq.com)，新用户点击不会被授权，但是微信的二次分享会在当前链接中添加从==到=的内容，这样就可以在vue创建的生命周期中获取参数并进行判断。如果有from参数，跳转到https://open.weixin.qq.com/co.链接，让用户授权二次共享样式显示问题。你可以查看我的另一篇文章VUE微信二次分享/自定义分享。

代码如下

//创建了循环if(this。$route.query.from) {//判断链接中是否有from参数，下面的studentId和activityId项需要let _ now URL=window . location . href . split('？')[0] `?资源=1studentId=${this。$ route . query . studentid } activity id=$ { this。$ route . query . activity id } ` let _ share URL=` https://open . weixin . QQ.com/connect/oauth 2/authorize？appId=$ { appId } redirect _ uri=$ { encodeURIComponent(_ now URL)} response _ type=code scope=SNS API _ user info STATE=STATE #微信_ redirect ` window . location . href=_ shareurreturn }//处理微信用户信息的微信群(代码){//调用获取微信用户信息的接口(后端引用微信官方文档进行封装)code-parameter API .get微信tInfo(代码)。然后((RES)={ if(RES . data . code==200){//返回json字符串let _ data=RES . data . content let _ personmsg=JSON . parse(_ data)this .微信msg=_ personmsg//微信用户信息本地存储，防止页面刷新，代码无效。Window.localstorage.setitem('微信邮件'，_ data)} else if(RES . data . code==400){//400-code无效，后端返回400。具体来说，看后端返回了哪些代码：让msgs=window . local storage . getitem('微信短信')this .微信msg=JSON.parse (msgs)} else {this。$ message . message(RES . data . message)；}})}，如果需要获取微信银联id，需要引导用户关注微信官方账号。可以判断返回的用户信息中是否有unionid。如果没有，可以显示微信微信官方账号的二维码，供用户识别关注。

-

当前页面的域名需要在微信官方账号后台配置添加(详见官网)。如果页面上有#可能有问题，可以通过nginx进行配置。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。