微信开发本地调试

简介

• 因为微信浏览器中获取用户信息的回调地址必须是已经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反向代理服务器实现（apache也可）

• 下载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应用等）