美文网首页微信网页开发
搭建微信网页本地开发环境

搭建微信网页本地开发环境

作者: 一半苍白 | 来源:发表于2017-12-27 14:27 被阅读179次

    需求场景:微信公众号开发基本配置中填入的服务器地址只能是公网地址,然而,开发调试阶段又是建立在本地服务,这样就需要将被微信认可的公网域名映射到开发者本机的服务器地址,才能调试微信公众号提供的接口功能

    系统: Mac;

    工具:Nginx    Gas Mask    Charles    iPhone

    准备:假设你拥有Mac和iPhone各一台,并且下载并安装了所列的应用工具,网上有很多对应的安装教程

    具体步骤

    一. 利用Gas Mask修改hosts文件,将公网域名映射到本机,如图1-1

    图1-1

    二. 利用Mac上安装配置好的Charles工具代理掉自己的iPhone,需要提醒的是手机和电脑必须连接同一个局域网,网上有很多优秀教程,请自行股沟

    三. 修改nginx配置文件

       1.  运行    nginx -t    找到nginx.conf文件目录,如图2-1

    图2-1

        2. 选中Finder窗口,点击快捷键    shift+command+G,调出前往文件夹输            入框,将上一步获取的路径复制黏贴进去,点击“前往”,最终可以找到需要修改的nginx.conf文件,如图2-2

    图2-2

        3. 修改nginx.conf文件,新建一个server块,假设本地开发环境的端口是8080,如图2-3

    图2-3

        4. 保存对nginx.conf文件的修改后,运行 sudo nginx 或 sudo nginx -s reload 启动nginx服务,然后在浏览器的地址栏输入localhost,如果能正常显示nginx页面,则表示配置正确且80端口已经启动,如图2-4

    图2-4

    四. 运行本地开发环境,端口号要与nginx.conf中对应的配置保持一致。

    五. 用手机微信客户端直接访问为公众号配置的公网地址,到这一步就可以在手机上调试微信相关功能了

    总结:

        其实,方法不止一种,每种方法也可以有不同的实现,本文旨在用最简易流畅的阐述方式告知读者如何快捷有效的解决现实问题,因此并未对其他方法以及此方法中各环节展开描述。至于,为何引入nginx来反向代理本地服务,我的目的是为了避免每次提交代码都要手动更改端口号,除非开发者所有本地服务都启用80端口,显然这不是一个明智的选择。至于,实际的使用读者自行抉择。

    相关文章

      网友评论

        本文标题:搭建微信网页本地开发环境

        本文链接:https://www.haomeiwen.com/subject/uagygxtx.html