搜索

uniapp 微信公众号开发 本地开发测试 本地接口联调


发布时间: 2022-11-24 18:43:00    浏览次数:29 次

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实现端口转发
免责声明 uniapp 微信公众号开发 本地开发测试 本地接口联调,资源类别:文本, 浏览次数:29 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 06:43:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/Denny_Yang/p/16922836.html