移动端 H5 微信公众号网页开发调试技巧

随着移动互联网的不断发展，微信公众号已经成为了企业与用户之间沟通的重要桥梁。为了更好的利用微信生态，越来越多的H5网页项目嵌入在微信公众号或企业微信应用中为用户提供服务。

然而，微信公众号H5网页项目只能在微信环境中打开，比如微信或企业微信客户端中，如果在浏览器打开，则会提示：

因此，在开发和调试移动端H5微信公众号网页项目时常常会遇到一些问题，本文将分享一些公众号网页项目的调试技巧，希望能帮助大家更高效地进行项目调试。

一、常见的移动端调试方式

调试移动端H5项目的方式有很多，比如通过手机真机连接电脑端同一局域网的WiFi来调试，但移动端不会像Chrome一样直接打开开发者工具，我们可以借助如 VConsole、Weinre 等工具在真机上调试页面、查看网络请求、Console 输出等信息，或者借助 whistle 进行代理劫持查看相关请求信息。

然而，以上方式都不能便捷的进行断点调试，如果是微信公众号项目，我们经常还可能遇到需要调试清理授权、清理缓存等场景，虽然我们也可以通过手动清理微信缓存的方式，但毕竟比较麻烦，而且还不容易那么快生效。

因此，调试公众号网页项目可能需要借助更加便捷的工具。很多朋友仅仅使用微信开发者工具来调试微信小程序，却不太了解微信开发者工具还可以用来调试公众号网页项目，接下来将重点分享如何使用微信开发者工具来调试移动端公众号网页项目。

二、使用微信开发者工具

首先，那自然是需要下载并安装微信开发者工具，这个不用多说，相信优秀的你自然知道。

01

选择公众号网页项目

打开微信开发者工具后，选择左侧Tab菜单中的【公众号网页项目】，如图：

02

登录微信账号

点击【公众号网页项目】菜单后则会打开一个新的窗口，为了更方便的使用微信登录态信息，建议打开后第一时间使用微信扫描工具界面上的二维码，将其与你的微信账号绑定，以便后续调试时能够与微信公众号建立连接。

03

了解调试界面

接下来我们来看看这个窗口的布局，顶部有类似浏览器的地址栏，在这里可以输入公众号网页链接，就是微信鉴权回调的那个链接，如：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=xxx&response_type=code&scope=snsapi_base&state=1#wechat_redirect

输入链接并回车后则会跳转至对应的应用页面，左侧就是一个模拟移动端的页面显示窗口，右侧就是我们熟悉的开发者调试界面，在这里有类似于在浏览器开发者工具一样的元素查看、Console 窗口，以及网络请求监控等工具。

04

访问本地开发环境

通过开发者工具打开应用后，我们就可以像平时Chrome浏览器调试PC端Web应用一样去调试公众号网页项目了。在正式调试前，我们可能还需要配置代理，以更方便的调试本地开发环境。

Whistle 配置

借助 whistle，可以更方便的进行代理。首先我们通过 npm i -g whistle 命令安装好 whistle，然后在浏览器访问：http://127.0.0.1:8899，接着配置规则如：

https://www.test.com/s/web-h5/ http://127.0.0.1:8080/ excludeFilter://*/api

上面这段配置的意思是将页面访问请求代理到本地开发环境：http://127.0.0.1:8080/（端口换成自己本地项目实际启动的端口号），并排除 /api 开头的请求，因为我们可能需要希望后台接口实际访问测试环境。实际在开发者工具中访问的链接类似如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxx&redirect_uri=https%3A%2F%2Fwww.test.com%2Fs%2Fweb-h5%2F&response_type=code&scope=snsapi_base&state=1#wechat_redirect

具体的appid和微信授权方式等参数根据实际业务进行调整。

HTTPS代理配置

另外，如果链接访问涉及到HTTPS，则需要安装证书才能正常代理。

配置步骤：打开 http://127.0.0.1:8899 ，点击顶部的HTTPS，在出现的弹窗里面点击 Download RootCA（下载证书）。证书下载后在系统中安装证书，正确安装后才可以正常代理HTTPS的请求。

如果想要监听手机的HTTPS的请求，则需要使用手机扫弹窗中的二维码，并将 Capture TUNNEL CONNECTS 和 Enable HTTP/2 都勾选上。

Whistle 除了代理，还可以提供更多开发辅助，比如Mock数据，监听请求等等，具体可以查阅相关文档了解。

三、微信开发者工具代理

配置好 whistle 后，我们同时需要在微信开发者工具中指定所使用的代理。因为上面我们已经采用了 whistle 来实现代理，自然是将代理地址指向：http://127.0.0.1:8899。在微信开发者工具 - 设置 - 代理设置，选择：手动代理设置

，配置如下图：

配置好之后即可使微信开发者工具实际访问到本地开发环境，这样我们就可以愉快的调试本地项目了。

四、常见问题

01

企业微信的开发者权限

如果是调试企业微信应用号中的网页项目，首先需要你的微信账号加入对应的企业微信主体，并成为管理员，如果组织管理权限限制，至少也是需要分配为【分级管理员】，然后自己登录到企业微信管理台，并勾选开发者工具权限。菜单路径为：我的企业 - 微信插件 - 开发者工具，如图：

02

开发工具提示获取不到userId

如果是调试企业微信应用号中的网页项目，微信开发工具可能提示企业微信获取不到userId的问题。

解决办法：需要使用开发者的微信在企业微信管理台【我的企业 - 微信插件】扫码关注对应的企业才能获取到userId，参考。

03

微信开发过程中遇到 50001

微信开发过程中遇到 50001: redirect_uri unauthorized

解决办法：检测可信域名配置。但是，有时候并不是可信域名没配置，而是自己链接上的appid没配置正确。

五、结语

在这篇文章中，给大家分享了一些常见的移动端调试方式，并重点介绍了如何使用微信开发者工具来调试移动端公众号网页项目。

通过微信开发者工具，开发人员可以在电脑上模拟移动设备的环境，实时查看页面效果，进行元素查看、Console 输出等操作。同时，还介绍了如何使用代理工具像 Whistle 来配置代理，以便更方便地调试本地开发环境。

总之，希望这些技巧能够帮助你更轻松地进行移动端公众号网页项目的开发和调试工作。

作者简介

erictang(唐潇)

基础科技产品部 / WEB前端开发岗

标签：

相关文章： 深圳SEO速成班  第七届西湖论剑·中国杭州网络安全技能大赛举行有种“整容”叫生三胎后，张晋没啥变化，蔡少芬却模样大变  环保新材料新能源类回收网站模板  云浮互联网营销哪家强？哪家服务更专业？,德丰商贸网站建设  关键词+搜索量，如何提升效果？,关键词发贴排名  SEO新篇章：创新优化策略，领航未来趋势  闲鱼高于均值，如何删除？  普通人如何在抖音一夜爆红？  SEO优化策略：关键词精准，内容优质，结构优化  专业SEO，首页加速器，选对就对了！  双城记：唐山，谁将引领未来？,小红书软文营销推广策略  从中央政治局会议看2025年经济工作新动向  黑帽SEO秘籍，快速上位指南  开启智能对话新纪元，ChatGPT领航未来！  gmv是什么意思电商  分手大师 网络营销打造出的票房黑马  2024年AI写作神器，写作助手巅峰榜！  搜索引擎优化（SEO）之路，关键词优化是关键，如何提升排名？,泉港网站推广哪家强  双木成林，林中藏什么？,定制网站建设技术精粹  互联网营销工具大盘点  搜索费用精简优化  SEO入门必学，基础技巧全掌握  唐山网站建设，如何打造行业领先品牌？,松原seo公司推荐电话  庐江SEO攻略：关键词优化，本地化策略，内容深耕  思维导图 篇一：好用的在线思维导图制作网站分享！8个免费好用的思维导图软件推荐曾与刘德华翻脸，打吴京吐血，跟随成龙29年8万被开除，后靠打工维持生计  智慧生活，高效人生，一触即达。  网络营销对传统营销理论的冲击  专业网络营销外包团队，高效助力品牌成长  专业关键词精炼  广告宣传新阵地，一触即达！  电子商务专业，核心课程有哪些？,seo佳选  SEO优化，流量翻倍，策略精炼。  如何在小红书上屏蔽他人？  做好这6个手机赚钱项目，你就是下一个小富豪！  夜狼SEO精优化  刷排名软件，真的靠谱吗？  大学企业培训师，如何打造高效课堂？,工作室网站建设信息  SEO技术先锋品牌  SEO秘籍，客户源源不断  常德网站推广ROI最大化，关键词策略如何双倍收益？,厦门猎头网站推广公司  上海SEO公司排名哪家强？,湖南seo培训怎么操作  网络推广新思路，创意营销速启航！  郁南企业SEO，高效优化，提升排名  百度百家号霸屏搜索，为内容生态布局  南昌品牌网站定制专家  淘宝会员注册步骤有哪些？  破解版引流神器，揭秘流量密码？,高端网站建设与开发  “中国AI，引领未来之光，何去何从？”  企业自助建站网站建设的利与弊  互联网+农产品营销团队，如何打造爆款农产品？,广元seo关键词排名