uniapp 微信公众号开发 本地开发测试 本地接口联调
1. 条件
- 本地一个uniapp的H5项目(本地运行 localhost:8080)
- 本地一个webservice接口项目(本地运行 127.0.0.1:9999)
目的:
因微信公众号没有提供良好的测试体验环境,每次测试时又需要授权域名,而且必须是https的。我们也不方便映射一个域名到自己本机(局域网环境不一定有固定的公网ip)
为了完成使用localhost也能在本地开发和调试微信公众号H5,记录一下自己的实施方案
2. 准备一个https域名(test.wxh5.poemfar.com)
微信公共公众号配置业务域名需要https
- 公众号后台下载验证文件上传到该域名的根目录下(这里是我自己准备的linux服务器和nginx,相关配置这里不详述,如果这块条件自己不具备,可联系我免费帮忙验证,这样你可以共用我这个方向代理的域名进行本地测试)
- 填写业务域名、jsapi安全域名、网页授权域名
- 验证完成
3. 反向代理该域名到本地站点
这里有好几个方案,如:nginx、设置本机host和端口转发、其他proxy。我这里是mac,使用最简单的hosts和端口转发来实现
基本原理:hosts转发上一步的域名到127.0.0.1,然后使用端口转发8080到80
nginx方案参考:https://blog.51cto.com/u_15570408/5205299
- 设置hosts(mac os)
sudo vim /etc/hosts # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost 127.0.0.1 test.wxh5.poemfar.com
这里如果报错:Invalid Host header
则是因为新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的,将中断访问。
解决办法:
在manifest.json中配置:devServer:
通过mac的pf实现端口转发
- pf.conf中增加:rdr on lo0 inet proto tcp from any to 127.0.0.1 port 80 -> 127.0.0.1 port 8080
sudo vim /etc/pf.conf # # com.apple anchor point # scrub-anchor "com.apple/*" nat-anchor "com.apple/*" rdr-anchor "com.apple/*" # 加入下面这行 rdr on lo0 inet proto tcp from any to 127.0.0.1 port 80 -> 127.0.0.1 port 8080 dummynet-anchor "com.apple/*" anchor "com.apple/*" load anchor "com.apple" from "/etc/pf.anchors/com.apple"
- 重新加载配置
sudo pfctl -f /etc/pf.conf
输出:
pfctl: Use of -f option, could result in flushing of rules present in the main ruleset added by the system at startup. See /etc/pf.conf for further details. No ALTQ support in kernel ALTQ related functions disabled
表示成功了。
- 启动(重启电脑后需要重新执行这个命令)
sudo pfctl -e
输出:
No ALTQ support in kernel ALTQ related functions disabled pf enabled
表示生效了。
- 测试:http://test.wxh5.poemfar.com
微信授权已能正常返回code,成功!
参考:https://blog.csdn.net/liushijun_/article/details/111563881
分类:
JavaScript
, mac
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2012-11-24 JS的那些“小事”
2011-11-24 SQL 事务相关介绍及示例