问题情境
最近在开发微信绑定的功能, 遇到微信的回调只能在微信开放平台中填写的安全域名下才能正常回调, 也就是只能在生产环境下流程才能正常, 公众号小程序可以有测试号, 可以临时改下域名地址来配合开发,但是微信开放平台的修改都需要审核, 审核时间不固定, 所以只能在生产环境生效的开发就非常难受, 所以研究了下如何在本地联调微信绑定
问题解决实现
首先下载 Fiddler Everywhere, 下载下来之后注册登录,直到打开下面这个界面
点击右上角的小齿轮, 加一下配置:
点击 Save保存
点击第一个card: System Proxy, 然后第一次打开它要一些权限: 更改系统代理, 信任安全证书等, 全给它就好了
系统代理的打开后的页面如下:
此时你在浏览器刷新页面, 你会发现, 请求没有被捕获, 面板上没有抓到请求
接下来怎么做呢?
点击Browser, 会自动打开一个可以被 Fiddler抓到请求的浏览器
在新的浏览器上输入url, 你会发现请求都被捕获在面板上了
下面要添加 Rule了, 添加之前我们先开启一个本地服务, 我的本地服务地址是http://localhost:8001, 页面如下
点击下面的Rules``Tab, 点击按钮Add Rule
我们新建一条规则, 比如说 baidu, 一个简单的rule demo如下:
简单解释一下配置:
RuleName: 规则名称
Conditions: 条件, 当满足 URL中包含https://www.baidu.com时命中
Actions: 触发行为 1. Update URL: 命中时替换https://www.baidu.com/为http://localhost:8001/ 2. 标记请求: 设置行背景色和文本颜色, 当 url命中时标记下
这条规则开启后, 我们在 fiddler监听的浏览器中输入baidu.com, 你会发现你输入的baidu.com, 最终进入的页面是你的本地服务: <http://localhost>:8001, 如下:
是的, 地址没变, 还是baidu.com, 但是页面变成了自己的项目地址, 至此, 解决了本地开发微信绑定的问题, 把 demo 中的baidu的地址换成生产环境的地址, 就可以实现对微信开放平台的"欺骗", 绕过它对代码环境的校验, 使我们本地开发顺利完成
换成项目地址后, 继续走一下
发现 redirect_url参数错误, 看看请求
发现这个规则把请求里的参数也给改成本地的了, 那这个回调参数肯定不能改成本地的啊
那就在规则里再添加一个条件, 完整如下:
重新刷新一下页面, 调起微信登录, 正确显示, 如下:
OK, 没问题了, 完结撒花~