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

表示生效了。

参考：https://blog.csdn.net/liushijun_/article/details/111563881

posted @ 2022-11-24 18:37  流失的痕迹  阅读(1884)  评论(0)  编辑  收藏  举报