charles 代理本地调试微信公众号

jiaHang
286 阅读5分钟

charles 代理本地调试微信公众号

在微信内置浏览器中使用微信JS SDK，可以使用微信提供的功能，例如设置分享链接的标题和图片、调起微信支付、打开扫一扫等等。 根据官方文档，前端在使用微信的接口前要先进行配置，如下：

wx.config({
    debug: true, // 调试模式
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

为什么要用到charles代理来本地调试？

配置信息得从后端获取，后端在计算signature时需要前端传入当前页面的URL。开发者要在公众平台设置JS SDK安全域名，在这个域名下才能使用微信JS SDK。也就是说调用JS SDK一共有2个条件：1. 在微信内置浏览器访问，或者在电脑端的微信开发者工具；2. 在指定域名下访问。

所以，只有在微信公众号中的添加的js安全域名，在可以使用使用授权，分享等JSDK。但是我们平常开发阶段，要么就是一个本地的静态 Html 文件，或者是使用的是一些框架通过npm run dev启动的一些服务，亦或者是通过其他例如vscode的live serve ,http-serve等工具启动的一些本地服务，这些文件路径或者本地服务ip不是公众号中配置的安全域名，在做安全校验的时候，是无法通过服务端的签名校验的，所以，必须通过代理的方式绕过安全校验，而charles针对这些情况都可以应对，以下几种方式都可以实现本地调试。

Map Local 代理

是将某个网络请求重定向到本地的某个文件或者文件夹

  1. 开启 Windows Proxy 选项

image-20230223170133491.png

  1. Tools > Map Local > 勾选 Enable Map Local选项

  2. 填写代理信息

image-20230223171738440.png

如何填写这里的信息，用一个简单的例子来说明：假如某个页面线上的访问地址（添加了JS安全域名）是：http://shop.zhuoyou.com/app_v1/lunch/index.html,则配置信息如下：

image-20230223172833736.png

  • Protocol：协议类型，https， http 或者为空，一般不填也可以。
  • Host：域名（需要填写的是JS安全域名）
  • Port：端口号
  • Path： 路径，可以以**/*的形式填写
  • Query：参数
  • Local Path：本地所在的目录，文件夹或者文件都可以

  1. 微信开发中工具 设置代理

    设置 > 代理设置 > 手动设置代理，填入本地 ip 或者 127.0.0.1 端口：8888

    charles 默认端口是8888，如果做了修改，则保持一致即可。

  2. 访问页面

在微信开发者工具输入地址，http://shop.zhuoyou.com/app_v1/lunchApp/index.html 就可以本地使用开发者工具调试公众号的开发了。

image-20230223192549163.png

也可以通过charles的面板工具可以看到，当访问url的时候，其实是访问的本地的文件。

  1. 手机上访问

在开发者工具中也只能模拟一些JSDK的一些方法，有时候需要真机上调试，就需要在手机上也设置代理

  • 手机WIFI必须和电脑在同一个网络
  • WIFI 设置代理，手动，填入电脑的ip地址：端口8888

5

然后，点击开发者工具上的预览，生成二维码，即可手机上访问。

::: tip

通过踩坑，通过链接地址的形式访问页面，有些时候很多jsApi会失败，最好已二维码的形式访问，或者链接地址收藏，通过收藏夹访问。

:::

Map Remote 代理

是将某个网络请求重定向到另一个网络请求。

  1. 开启 Windows Proxy 选项

  2. Tools > Map Remote> 勾选 Enable Map Remote选项

  3. 填写代理信息

如何填写这里的信息，用一个简单的例子来说明：假如本地起的服务是：localhost:3000

image-20230223194342070.png

  • Map To：本地所起的服务，端口号也是本地服务对应的端口号
  • Map From：线上地址，Protocol可以不填，只要域名命中就可以代理。根据线上实际情况配置即可
  1. 微信开发中工具 设置代理

设置 > 代理设置 > 手动设置代理，填入本地 ip 或者 127.0.0.1 端口：8888

charles 默认端口是8888，如果做了修改，则保持一致即可。

  1. 访问页面

在微信开发者工具输入地址，http://shop.zhuoyou.com/ 就代理到本地的localhost:3000的服务了,可以本地使用开发者工具调试公众号的开发了。

image-20230223195441460.png

查看charles工具可以看到代理已经成功。

  1. 手机上访问

在开发者工具中也只能模拟一些JSDK的一些方法，有时候需要真机上调试，就需要在手机上也设置代理

  • 手机WIFI必须和电脑在同一个网络
  • WIFI 设置代理，手动，填入电脑的ip地址：端口8888

其他方式

也可以通过修改本地host文件的方式处理

  1. 修改host文件，将域名映射到127.0.0.1 IP地址
127.0.0.1 shop.zhuoyou.com

2. 开发者工具中 访问htpp://shop.zhuoyou.com:3000,如果本地服务的端口是80，则可以不填了。 3. 手机访问

通过上面2步，其实开发工具其实已经是可以正常访问了，不需要开发者工具设置任何代理，也不需要开启charles，但是如果手机上需要访问，则需要开启charles即可。

vite启用host代理，自动刷新问题

本地使用了charles代理，会发现会进行无效的刷新，解决方案： 在vite.config的配置中

server: {
    host: '0.0.0.0',
    open: true,
    proxy: {
    ......

    // 加上这个，可以解决
    hmr: {
      protocol: 'ws',
      host: '127.0.0.1'
    }
  },

charles下载以及安装

charles百度网盘下载地址

  1. 解压charles.rar > charles-proxy-4.1.4-win64.msi安装
  2. 安装之后，再使用jar，去破解，更新lib下的jar就可以
avatar
文章
阅读
粉丝