where interesting happend !

内网穿透技术实现微信公众号本地开发

开发过微信公众号的盆友们都知道,由于微信公众号开发本身框架、微信安全等众多原因,开发调试起来比一般的前端开发麻烦不少,尤其是本地调试问题。

一开始大家可能是每次修改好了,提交到服务器,服务器做一个自动更新部署hook,然后在手机端或者微信微信web开发工具上就可以看到了。

这个办法是可行的,但是当开发人员多的时候,就很麻烦了。每次提交代码时,要先更新队员们的代码,如此繁琐。总之问题基本归结如下:

问题和说明
  1. 公众号调试查看需要在微信web开发工具中进行。由于微信授权回调只能设置为外网可以访问到的方法,所以需要把回调方法问题部署到外网。
  2. 由于授权的问题,本地修改添加的页面效果,只有提交部署到服务器之后才能看到效果。
  3. 当多人开发时,大家都使用同一个测试号,都提交代码到测试服务器,这就导致了每次提交前,都要求先更新服务器代码。即使是修改了一点点代码也必须这么做,这大大地增加了我们web的开发难度,拉低工作效率。

大家都很希望能像开发普通web页面一样,修改了自己的代码,然后在浏览器中刷新即可看到新修改的效果。这个愿望是可以实现,但是比较复杂。

解决办法
  1. 如果想实现本地开发调试,就必须要突破解决一个问题——授权回调。实现让微信可以访问到我们本地代码的回调方法。实现这个目标,我们要是使用一个黑科技技术——内网穿透。
  2. 我们使用natapp。注册账号并进行实名制后,可以开通一个免费的隧道。如图:

    image

  3. 下载natapp客户端 ,修改其中config.ini的authtoken 的值,修改为自己的 authtoken 。保存后双击 natapp.exe。(本地要先安装apache,并开启,默认端口为80)。

  4. 成功运行后natapp.exe 后会提示一个地址,类似 http://3msfaiidfa.natappfree.cc 这个地址就是客户端为我们生成的外网地址。在浏览器里输入这个地址,可以看到我们自己的apache。
    通过这个地址,别人可以访问到我们自己的本地apache。这就是开启了内网穿透。所以微信也会可以访问到我们的apache。
    这个地址每次开启都是随机的,为了方便后面的开发,我建议大家开通一下会员,5元每个月的套餐就可以。把地址固定下来。

  5. 申请自己的微信公众号,并配置相应的信息。如图:

    image

    image

    image

    image

当然啦,如果你采用的是下面这样的授权流程,

image

同时,你还得保存服务器保存token的话。你还得将你们的后台代码也得部署到本地来。

配置好后,在开发工具中使用 http://3msfaiidfa.natappfree.cc/XXXX 就可以进行开发测试。本地修改代码,直接刷新页面即可调试了。

通过以上的办法就可以像开发普通前端一样,随时调试公众号了。

Comments

Proudly published with Hexo