前端微信公众号服务号跳转H5页面接了个公司新的需求要求是在公众号点击按钮时把关注的微信号绑定对应的App账号实现进行

接了个公司新的需求要求是在公众号点击按钮时把关注的微信号绑定对应的App账号实现进行服务号消息推送

需求明确后我们进行技术调研(百度)

1. 调试工具微信开发者工具

选择公众号项目 -> 公众号网页

地址栏内填入我们的本地项目服务ip地址就可以调试了

工具方面准备ok了下面准备阅读文档

mp.weixin.qq.com/ 微信公众平台

自定义菜单这里其实就是命名一下点击按钮名称放一下按钮跳转地址也就是H5的地址

另外公号配置时是需要配置域名的不可以配置 ip 地址以至于我们本地的服务ip是无法配置的所以我们需要到微信提供的开发者工具中寻找公众号测试账号来进行开发中的本地配置用于调试

mp.weixin.qq.com/debug/cgi-b…

在公众号测试号中的体验接口权限表->网页服务->网页账号->配置本地服务ip地址

以上我们的配置就算完成了

developers.weixin.qq.com/doc/offiacc…

微信公众号跳转 H5 页面微信授权步骤如下

第一步: 用户统一授权获取 code
- 传递参数 AppId 注意有测试号和正式微信公众服务号分别
```
window.location.href =
    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
    this.APPID +
    '&redirect_uri=' +
    encodeURIComponent(local) +
    '&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect';
```
- 这一步以后呢我们拿到了跳转链接的 code 码注意有效期为5分钟且只有一次的传递接收的机会不可以缓存作为变量重复请求参数如果需要再次刷新形成新的 code 码或者进行下一步获取 access_token
第二步: 通过 code 换区网页授权 access_token (交给后端同学做)
- access_token 尽量交给后端同学来请求获取我们做的就是把上一个跳转链接拿到的 code 传输给后端
- 此外呢这个接口事儿可以获得此操作用户的 openId (唯一标识) 继而用于我们的后续操作
第三步: 如果需要，开发者可以刷新网页授权access_token，避免过期
- (第二步的access_token 是半个小时的有效期如果需要token时效加长这需要进行第三步的接口调用如上建议都是由后端同学来操作)
第四步: 拉取用户信息(需scope为 snsapi_userinfo)

我这次的需求呢只是获取 openId 然后在与 app 账号进行关联查询是否绑定过所以第一步获取到 code 码剩下的都是和后端同学联调的其余的三个步骤都是后端同学进行操作的但是作为前端呢我们也是要了解具体的步骤与传递参数报错信息的

ps: 其实不难只是之前从来都没有接触过分享记录一下这个需求做下来的总结以及调研过程的梳理