记一次基于公众号的微信H5开发项目（一）

微信H5页面授权

过去一年项目主要以b端的为主，今年年初公司接了一个c端项目，基于工作号做微信H5开发，需要用到微信的授权登陆，拉取用户信息，扫一扫，支付等功能，记录一下。

授权登陆

微信的授权登陆：

1. 首先你需要甲方拿资料去申请一个公众号，然后给与你开发权限。
2. 然后要在白名单中配置好域名，注意不要带有https://，(开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息-配置好回调域名),
3. 设计好公众号菜单，将获取微信授权code的链接放置在按钮上。这样用户点击的时候，直接相当于去找微信获取了code，微信这边会将code和state参数拼接到你的回调地址上，并跳转至你回调地址（一般就是项目首页）
4. 我的项目里面，分为pc的b端，基于公众号的b端，和基于公众号的c端3个部分，公众号的b端仅需要openId，所以静默授权即可，c端则需要获取用户信息，所以这里scope选择上做了区分。
5. 从回调地址中把code取到，然后发给后端，由后端拿code去获取登陆的access_token和openId；
6. 如果需要刷新，就拿上一步获取到的refresh_token去请求即可；
7. 如果是需要拉去用户信息，则更改为获取userInfo的接口，拿access_token和openId去获取即可；
8. openId，用户对于单个公众号的openId是唯一的，这点需要注意。
9. 如果关联同一个公众号拥有者下面的小程序小游戏，好像就是使用unionId了，这里项目中没有涉及相关业务，只是自己好奇所以查看了一下相关的文档，不在这里记录了。

业务相关和注意事项

1. 首先b端是每个用户还有一个基于我们后台系统的账号，所以既要获取用户微信账号相关的信息又要关联上系统的账号，这里openId就很有必要了，基于他的唯一性，可以把用户的微信账号和系统账号关联起来。
2. 我们后端也是第一次开发与微信相关的功能，所以他犯了一个错误就是在获取access_token的时候调用的接口是jscode2session这个接口，但实际上这个是小程序获取openid时候使用的接口，而不是公众号专用的。
3. 还有个基础的access_token必须要获取到，官方文档中也有写到用code去获取用户信息所使用的access_token与这个基础的access_token并不一样，但是基础token也很重要，很多其他的功能都是需要它来作为凭证来实现的，所以也要获取并且存起来，还要注意基础token只有2个小时的有效期。
4. 在回调地址中获取code，只需要在mounted阶段用一个变量接收一下location.search就可以拿到包括?以后所有的参数信息的字符串，再做一下切割就可以了。然后拿code去发给后端直接获取openId,因为用户还要在登陆页登陆我们后台系统，此时添加一个加载中的遮罩层，防止网络不好的情况下用户在后端没有返回openId的情况下去点击登陆按钮。
5. 文档中说明token不要由前端去获取，应该交由后端去获取，这样安全。
6. 毕竟每个功能每个人都有第一次开发的时候，而且不是人人都有前辈手把手来带你，所以学会自己看官方的文档是很重要的。
7. 微信H5开发文档.

下一篇在说一说JSSDK的使用，以及在H5中调起微信扫一扫功能。