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

  • 设置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: { disableHostCheck: true}

  • 通过mac的pf实现端口转发