微信公众号开发进行本地调试的方法

发表于 | 分类于 | | 阅读次数:

背景

由于微信的一些我们看来很蛋疼的规定，在微信公众号开发以及调用 JSSDK 时域名限制比较严格，在进行开发的时候调试起来很是麻烦，之前开发的时候很多时候就是打包–发布测试–修改–再打包。。。这样来循环调试，费时费力。现在想一劳永逸的解决这个问题。

查了一些资料发现很多的方法就是通过内网穿透，使用花生壳或者 Ngrok 来达到内网穿透的目的，再在微信后台配置给定的域名，最终实现对域名的代理。

关于 ngrok 的使用方法看这里,不过最终我没有选择这个方案，因为这种方式要到后台去配置域名，而且微信对域名的配置是有限制的。然后就选用了下面的方法，即通过修改本地 host 以及代理的方式去实现，成本更小。

mac 修改 host

修改 host 还是比较简单的，vim /etc/hosts/然后修改自己想要的就可以了。但是在开发中改来改去这样子还是显得麻烦，所以还是借助工具来比较简单，这里借助 Gas Mask 来实现一键切换 host。下载地址

gas mask

配置 webpack

这里是调试的 react 项目，使用 webpack 作为打包测试工具。

配置成功以后输入test.xxxx.com:8005/xxxx来访问调试服务器，竟然出现空白页面，并且报invalid host header错误。经过一番查询发现是 host 检查的错误。

可以对 devServer 作如下几种配置

  • 禁止 host 检查

    disableHostCheck: true

  • 设置公共 Host

    public: 'exampleHost.com'

  • 设置被允许 host 列表

    1
    2
    3
    4
    5
    allowedHosts: [
          'exampleHost.com',
          'differentExampleHost.com',
          ...
    ]

    配置完成以后重启服务，终于可以在微信调试工具中正常的访问，并且成功调起 JSSDK。

    在手机上访问服务

    上面成功是实现了本地代理，但是如果如果可以在微信中打开调试的链接，直接在手机上面调试 JSSDK 里面的功能岂不是更好。

    当然也有办法实现——通过 charles，实现方式也很简单。

    charles 的下载地址在这里，至于怎么用手机连接代理这里就不在介绍，只介绍怎么设置远程代理。

    点击 tools – Map Remote。

    远程代理1

    然后启用，添加一个代理。

    远程代理1

    完成以后，手机连上代理就可以在微信中打开调试的页面实时的调试效果了。