说明:微信网页授权有两种
1、单独获取openid,属于静默获取,用于绑定微信(scope为snsapi_base)

2、获取用户的基本信息,需要用户点击同意(scope为snsapi_userinfo)

这篇博客说的是scope为snsapi_base这种方式,用于获取每一个微信用户都只有一个的openid,作用是让用户使用微信绑定当前网页,获取微信的H5支付的必要参数之一。网页绑定就是前端获取到openid后把它给后端让后端拿着这个openid和账号关联到一起,就算绑定成功了;

成功获取openid的条件:
①、客户拥有自己的公众号
②、客户的公众号已经进行了微信认证
注意:公众号分为服务号和订阅号,正常而言,和交互有关的都要认证服务号(微信网页授权、微信支付),仅发布信息给用户使用订阅号,这个需要根据业务需要自查;


获取流程:

1、先准备一个结果页面,即为,告知用户当前是否获取到openid结果的页面(就是一个白页面,上面一行字,‘您已成功绑定微信’或‘微信绑定失败,请重新绑定’);

2、前端引导用户在微信浏览器点击或打开 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=你的结果页面&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 这个网址,这个网址会自动回到redirect_uri里的路径并跟一个参数为code=XXX,这个路径就可以使用刚才的绑定结果页面,这样用户点击了此链接就会直接跳转到绑定结果页面;

注意:这里不是直接打开上面那个链接,需要改变参数的,具体如何传参请参考官方文档,这里不过多赘述

网页授权 | 微信开放文档

3、在结果页面进行code获取并传给后端,这一步如果使用uniapp开发,在页面的onLoad函数中无法使用事件对象获取,需要使用window.location.href配合split来获取code,如果没有code就让用户重新绑定;

4、将code传给后端,他会通过一个请求获取到openid,然后接口返回数据告诉前端是否获取,获取到就算网页绑定微信成功,前端给与用户对应反馈即可;

关于只能在微信浏览器打开上面的链接的解决方法:
判断是否为微信浏览器,如果为微信浏览器,弹出提示框,用户确认一下绑定防止误触(这一步为用户体验优化),确认绑定直接请求链接,然后到结果页面进行上述流程;

如果不是微信微信浏览器:

移动端

通过将链接转化为二维码的方式,让用户扫码;

或把链接渲染到页面上,让用户点击复制后到微信中打开;

PC端
将链接转化为二维码,引导用户打开微信扫码进入链接跳转结果页面进行绑定;
(用户体验优化):如果在二维码被渲染之后就开始请求是否微信绑定的查询接口,如果绑定了就反馈用户然后跳转首页