最近需要做一个公众号的H5登录页面，需要把登录的用户名与关注公众号的当前用户openid传给后端进行绑定，便于后期推送消息。
但是从来没做过，还好时间给的比较充裕，最终也是慢慢摸索着查资料做好了这个功能。下面写下处理的过程，具体的网页授权可见公众号开发文档——网页授权部分，阅读文档能力强者可直接看官方文档，文档写的已经很详细了。我也是读了好几遍文档才弄懂的。
1.让用户能通过公众号给的链接访问到你的页面
先给一个例子：
在这里，你可以通过点击防疫政策按钮跳转到一个h5页面，那么这个按钮是怎么和那个h5页面关联起来的呢？
官方给了一个固定url模板：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
这个url就是在公众号后台和防疫政策这个按钮绑定的，当点击这个按钮时，就会跳转到上面那个url去，而你写的h5页面(需要发布到服务器上的，有域名的)地址就包含在这个url里面。接下来逐个说下这个固定url的各个参数的用处与写法：
| 参数 | 必填 | 说明 |
|---|---|---|
| appid | 是 | 公众号唯一标识（基本配置-公众号开发信息可查看） |
| redirect_uri | 是 | 授权后访问的地址，需要使用urlEncoded对链接进行处理。这个连接地址就是你写的h5页面发布到你的服务器上以后的访问地址，使用在线url编码解码工具编码一下即可。例如我的h5页面路径是 https://www.baidu.com,经过编码以后就是 https%3A%2F%2Fwww.baidu.com%2F |
| response_type | 是 | 返回类型，填code(即response_type=code) |
| scope | 是 | 应用授权作用域。只有两个可选值：snsapi_base（仅获取openid）和snsapi_userinfo（获取用户基本信息）。 |
| state | 否 | 重定向后会带的参数。（a-zA-Z0-9类型），最多128字节。就是你希望你的h5页面能接收到什么参数。 |
| #wechat_redirect | 是 | 无论直接打开还是做页面302重定向的时候，必须携带此参数（固定携带这个结尾） |
关于scope参数的说明：
- 当用户已经关注了这个公众号，不论scope=snsapi_base还是scope=snsapi_userinfo，都是静默授权的，用户无感知。如果没有关注公众号，snsapi_base的scope用户仍然是无感知的，snsapi_userinfo的scope需要用户手动同意才能在没有关注公众号的情况下获取该用户的基本信息
2.用户同意授权，获取code。根据code获取openid
这里由于scope参数是snsapi_base，所以不会有额外的授权页面需要用户点击，会直接跳转到我的的h5页面。
跳转的路径为：
redirect_uri/?code=CODE&state=STATE
如果第一步我的h5页面路径是 https://www.baidu.com那么这里就会跳转到https://www.baidu.com?code=xxxxxxxxxxxxx&state=State。
这里的code是自动给你加上的，是一串字符串，是作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
关于如何从当前页面的url里获取指定的查询字符串这里有个可用的方法：
getParam(url, code) {
let param = url.split('?')[1] || '';
let params = param.split('&');
let o = {};
params.forEach((e) => {
o[e.split('=')[0]] = e.split('=')[1];
});
return o[code] || null;
}
只要在url中获取到了code参数，只需要openid的话到这一步，前端的工作基本都结束了。
这里将获取到的code传给后端，后端根据code调用指定的api接口即可获取到openid,access_token等数据。这里的access_token可以用来获取微信用户的头像、微信名称等信息。由于我的需求没有要用到微信的用户信息，所以到了这一步就结束了。
如果需要获取头像等信息的话，需要后端根据这个access_token调用另外一个接口获取。
