微信开发工具连接本地开发环境

使用umi+dva+antd-mobile方案

创建并进入项目目录
makdie project && cd project
使用umijs，并且勾选其中的antd,dva等
yarn create umi
安装依赖
cnpm install
启动项目开发模式
npm start
这个时候可以访问页面了 http://127.0.0.1:8000

微信授权地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=http%3A%2F%2F127.0.0.1:8000&response_type=code&scope=snsapi_userinfo&state=1#wechat`

这时候比较麻烦，回不到我们本地的地址。

我们平时开发的时候都是本地开发环境、日常测试环境和线上生产环境
日常与线上都是在阿里云的有公网IP
公司也有1个公网IP

公众号访问的页面 ---> 阿里云服务器 --->nginx代理---> 公司路由器 ---> 端口转发 ---> 我自己的电脑

好，经过这一系列的处理，就把日常环境连接到了我的本地开发环境

公众号访问的页面 ---> 阿里云服务器

当然是域名指向到服务器地址了， 没什么好配置的
需要注意的问题，开发环境用到了websocket， 默认也是80端口
如果阿里云服务器外面还有一层SLB(负载均衡)的话， 不用管，我们只要配置好服务器上的nginx 就好了

阿里云服务器 --->nginx代理---> 公司路由器

nginx.config 文件

http{
    #`你的其他配置.... 
    # 重点
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

    server {
      # 以下是用来处理websocket连接的
      location ^~/sockjs-node/{
        proxy_pass http://公司的公网IP:18000;  #这个端口你随意
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
      location / {
        proxy_pass http://公司公网IP:18000;
        try_files $uri $uri/ /index.html =404;
    }
    }
}

公司路由器 ---> 端口转发 ---> 我自己的电脑

我们一般的路由器上都是有端口映射端口转发功能的
外部端口: 18000
内部端口: 8000
内部IP: 你自己电脑的IP
如果你是windows 电脑，注意你的防火墙配置

总结

好了