开发环境调试微信公众号JSSDK和授权

2,499 阅读2分钟

如果你的H5项目需要用到微信授权或者微信JSSKD,想基于本地开发环境进行调试,那么以下内容对你来说是有一定参考意义。

首先需要准备一个工具Fiddler,HTTP抓包工具,大家自行搜索下载。

配置Fiddler 此处默认你已经下载并安装好了Fiddler

  • 设置HTTP拦截规则 f1.png
  • 通用配置,如果你需要开启HTTPS,可以看一下旁边的HTTPS选项

f2.png

  • 设置代理 格式:本地IP:端口 + 空格 + 拦截IP 例子:127.0.0.1:80 abc.cn 本地IP可以用127.0.0.1,端口用你本地跑的项目端口,如果是80端口,可以省略不写 可以配置多个,回车键输出新的一条。 配置完之后重启Fiddler,每次更改配置记得重启软件。

f3.png

f4.png

配置测试公众号

  • 准备一个测试公众号,这里是传送门
  • 设置JS接口安全域名,输入你项目部署服务器的域名,不能是IP地址
  • 设置网页授权的域名,授权域名,通常和JS接口安全域名一样 ( 网页服务 > 网页帐号 > 网页授权获取用户基本信息 > 修改 )
  • 替换前端项目里面的appid,替换后端项目里面的appid和appsecret

w1.png

w2.png

运行本地项目 这里没啥好说的,记得保证运行的端口和Fiddler一致

手机网络设置

  • 保证手机和电脑处于同一个局域网,手机连接对应的Wifi,然后修改该Wifi的网络

s1.png

如何查看自己的ip地址?
在cmd中输入ipconfig,对应的IPv4地址就是IP地址
代理端口为什么是8888?
配置在Fiddler > Tools > Options > Connections,你可以修改成自己喜欢的


最后在微信环境打开你Fiddler中设置好的域名,比如我的是abc.cn,Fiddler就可以抓取到HTTP请求了,而且页面访问的是你本地的环境,你可以随时调试代码

f5.png

有用点个赞!