![cover](https://img-blog.csdnimg.cn/6aebb9da90644e42bc9e41f1139628b1.png)
开发微信公众号H5,如何本地调试【爽歪歪】
最近开发公众号h5,需要获取公众号用户的code,但是是根据微信公众号提供的方式,是对url地址进行重定向,前提还要在公众号后台配置【网页授权域名】,这玩意还不能是ip地址,也就是说,本地调试不了,盲写完后,每次需要部署到测试环境进行调试,修改一次部署一次,烦死了!!!因为公众号【网页授权域名】不能是ip地址和外网不能访问内网,那么可以借助内网穿透工具。具体步骤如下
·
前言
最近开发公众号h5,需要获取公众号用户的code,但是是根据微信公众号提供的方式,是对url地址进行重定向,前提还要在公众号后台配置【网页授权域名】,这玩意还不能是ip地址,也就是说,本地调试不了,盲写完后,每次需要部署到测试环境进行调试,修改一次部署一次,烦死了!!!
解决方案
因为公众号【网页授权域名】不能是ip地址和外网不能访问内网,那么可以借助内网穿透工具。
具体步骤如下
(1)首先先下载natapp或花生壳内网穿透的工具(我用的是natapp,免费版有一个缺点就是公网域名是不定时随机生成的)
(2)按照natapp的图文教程进行相应的配置(图文教程很详细,我就不复制粘贴了,直接点击【图文教程】这个文字链接)
(3)当你配置完复制如下图圈中的url链接到浏览器,满心欢喜,以为行了!你会发现空白页显示【Invalid Host header】几个字。
因为webpack的devServer会进行hostname检测,如果hostname不是配置内的就中断,默认的hostname是localhost(也就是域名),那怎么解决了,请看第4步。
(4) 既然hostname检测,那就把当前域名(如图3圈中的域名,不包括http协议),添加到host白名单里面就行了。在devServer配置项,添加属性allowedHosts如下图。最后不要忘了在公众号【网页授权域名】也添加该域名。
(5)微信公众号有些链接调用必须要在微信浏览器,不然本地浏览器调试也调试不了!莫慌!只要在公众号后台设置【web开发者工具】就可以在微信开发者工具里面进行愉快的调试,大功告成,【爽歪歪】
后面可能还有跨域问题,到时前端在webpack的devServer属性开个代理proxy就行了。
谢谢阅读,有写的不对的,请指出,互相学习一下!
更多推荐
所有评论(0)