微信开发本地内网穿透调试方法

简介

• 由于微信浏览器中获取用户信息的回调地址必须是已经ICP备案的域名。这样就导致无法本地开发比较麻烦，解决方案为内网穿透，如ngrok(二级域名每次启动会变化)、花生壳(需要支付8元)、NATAPP(和ngrok类似，本文使用)。
• 本程序基于微信开发者工具完成调试

NATAPP使用

• 注册NATAPP并实名认证
• 购买隧道 - 免费隧道 - Web（端口80）- 购买之后可在我的隧道中查看 - 复制authtoken
• 下载NATAPP客户端natapp.exe
• 在客户端根目录cmd运行natapp -authtoken=上文提到的authtoken。命令行会出现类似Forwarding http://smalle.natappfree.cc -> 127.0.0.1:80的显示。（表示访问在浏览器中访问http://smalle.natappfree.cc时相当于本地访问127.0.0.1:80）
  • 或者写入xxx.bat文件快速启动：D:/software/natapp.exe -authtoken=12347dc3f25a1234

启动本地web项目

• 下载nginx并安装，配置nginx.conf文件，如：

      server {
      listen   80;
      server_name localhost;
  
      location / {
          root   C:/Users/smalle/Desktop/web;
          index  index.html index.htm;
      }

• 将web项目拷贝到配置中的root路径

• 启动nginx（此时可通过http://127.0.0.1或http://smalle.natappfree.cc访问）

配置回调地址

• 微信后台 - 公众号设置 - 功能设置 - 网页授权域名
• 将类似MP_verify_2DCaFsV02WRKw123.txt的文件下载到root路径下
• 地址栏中填写xyabcd.natappfree.cc（不需要http://）保存即可

扩展：关于前后分离

• 如果api和web项目分别部署，如web是用nginx静态服务器，api使用PHP/Java完成。就回出现跨域问题，此处可在nginx中再次配置后台api的转发

  location /api/ {
      proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      if (!-f $request_filename) {
          proxy_pass http://127.0.0.1:8080;
              break;
      }
  }

  • web项目中认证请求js如：http://smalle.natappfree.cc/api/auth?code=021GT83e1ucjUu035F0e1Ttg3e1GT812就会被转发到http://127.0.0.1:8080/api/auth?code=021GT83e1ucjUu035F0e1Ttg3e1GT812

    var url = "http://smalle.natappfree.cc/api/auth?code=" + code;
    $.get(url, function(res) {
        console.log(res);
    });

---

相关文章：服务号使用微信网页授权（H5应用等）