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

Posted 2023-04-06

参考技术A 使用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

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

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

nginx.config 文件

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

好了

微信公共号网页开发开发环境获取微信授权

参考技术A 在做微信公众号网页开发时, 获取微信授权是个老大难的问题
由于微信需要校验线上域名
具体请看 开发文档
而我们在开发过程中使用的都是本地服务, 这时候你是没法进行授权的
大多数时候, 很多人都是这一块的功能在本地开发时后忽略掉, 不验证, 对照文档开发完后直接丢测试环境去验证, 调试
其实, 这个是有办法解决的

1.微信授权必须是域名
1.微信会取域名下授权文件进行验证
1.开发者本地电脑是ip而非域名

1.一个外网域名用于授权

1.授权域名用测试环境域名
2: 测试环境有nginx, 而nginx可以转发, 代理
3: 测试环境服务器需要连接本地局域网

假如你测试环境域名叫 https://www.test.com
1.在ngixn服务上增加如下配置
location /zhangsan88 proxy_pass https://192.168.8.8:8088;
意思就是 当用户访问 https://www.test.com/zhangsan88 这个地址时,
nginx会把该请求转发到 https://192.168.8.8:8088 这个地址上;
所以你在你的浏览器访问 https://www.test.com/zhangsan88 其实是在访问 https://192.168.8.8:8088
那么只要 https://www.test.com 可以外网访问, 那么它就可以完成微信授权,
那么每个局域网内的ip就都可以完成完整的微信授权