微信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，这个路径就可以使用刚才的绑定结果页面，这样用户点击了此链接就会直接跳转到绑定结果页面；

值得一提的是结果页需要做处理，举个例子：

要跳转的结果页面路径是：https://baidu.com/?#/pages/bindWX/bindWX

处理函数：

function urlencode(str) {
	str = (str + '').toString();
								
	return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
	}

最后调用：urlencode（你的结果页面路径）这样返回的数据才是要给微信服务器传递的结果路径参数

注意：这里不是直接复制粘贴上面那个链接，需要改变成你的参数的，分别是传入你的appid和处理后的结果页面，具体如何传参请参考官方文档，这里不过多赘述

网页授权 | 微信开放文档

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

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

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

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

移动端

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

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

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

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