如何本地调试移动端页面

手机调试微信公众号本地代码

目前在写一个公众号,需要使用到微信的jssdk,但是每次都要把代码传到测试服上,然后再调试,调试一次都十分麻烦,之前也查过怎么本地调试,尝试之后都不可行,昨天又搜了一下,发现了一个可行的方法,由于那个作者也只写了后半截步骤,前半截是我自己又搜索出来的,现在把它整理到一起,方便我和你的使用

先建立本地web服务器的连接

由于我的电脑是win10的,所以以下是win10搭建本地服务器的方法(Mac请参考 :Mac本地服务器),建立web服务器的最终效果是访问12.0.0.1/,此域名下有我们要调试的页面

1. 打开"控制面板"–>选择"程序";
   

2. 选择"程序和功能"下的"启用或关闭Windows功能"
   

3. 点击它会出来一个弹框,稍等…
   

4. 然后找到Internet Information Services把这几个勾上,然后"确定";
   

5. 然后我们回到"控制面板"–>“系统安全”

选择"管理工具"

选择"Internet Information Services(IIS)管理器"

找到默认"Default web Site"

首先配置一下你的127.0.0.1下想要显示那个路径里的文件
在高级设置中修改"物理路径",这就是你127.0.0.1/下会显示的路径文件

如果还没有这个"重新启动,"那就先启动一下,有的也重启一下,然后测一测127.0.0.1/index.html是否有你的路径下的index.html了

在natapp官网获取一个免费的域名

1. 注册用户名 注册natapp
2. 最好实名认证一下,需要填写身份证号,购买免费域名时需要实名认证;

3. 购买隧道,有免费和付费的,如果代码量不是很大,免费的就可以了
   

直接点击购买即可

4. 购买成功后在我的隧道会有一条数据,我们主要使用这个authtoken
   

5. 我们需要下载一个natapp在电脑端 下载地址,选择跟你电脑对应的下载即可,解压后打开natapp.exe,会打开一个命令,然后在命令中输入以下命令(your authtoken 是在"我的隧道"中的authtoken)

windows

natapp -authtoken=your authtoken

linux

./natapp -authtoken=9ab6b9040a624f40

5. 运行成功后,这个域名替换掉127.0.0.1的ip就能正常使用了,发送到手机也可以实时更新

本地配置web参考教程
官网NATAPP1分钟快速新手图文教程
官网用Natapp(ngrok)进行微信本地开发调试教程