微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）

说明：微信网页授权有两种
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端
将链接转化为二维码，引导用户打开微信扫码进入链接跳转结果页面进行绑定；
（用户体验优化）：如果在二维码被渲染之后就开始请求是否微信绑定的查询接口，如果绑定了就反馈用户然后跳转首页

有更多建议想法欢迎私信交流，bye~