移动端 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体检，精准优化  STSO88，网站推广，效果显著首选！  木门企业应关注文化营销寻突破点  湖北大学研究生双一流专业，报录比如何？,廊坊seo推广服务平台  不做SEO，网站流量难存活；SEO优化，流量翻倍涨！  微商控价系统的作用有多少  静安SEO，精准优化，提升网站排名  “SEO薪资揭秘”  全网营销真的能够提升企业品牌？  文学短评升级指南：精炼点评，提升笔锋  抖音账号注册成新账号，怎么操作？  微博推广，内容为主  SEO未来：技术革新，价值深耕  网赚新潮流，轻松赚钱新选择  推广普通话，沟通无界，共筑和谐家园  浙速优创中心  助力顺德SEO，流量飞跃无忧  SEO操作教程：视频学习，网站优化提升秘诀何在？,禄丰网站优化哪家好  畅享智能对话，未来已触手可及  天使轮投资是什么意思  闲鱼软件值得尝试吗？  改写推广有效果？淘宝格子铺流量靠谱吗？  AI写作神器，创意无限加速器  如何让GPT批量生成助力内容创作，开启新时代高效创作模式？  年销千万掌柜SEO实战15步分享  避错秘籍：写作无陷阱  公司注册资金大小有什么区别  淘试用免费送？入口在哪？  南京抖音SEO软件，哪家更靠谱？  快手直播权限如何开通？  电商seo是什么意思  SEO关键词优化，快速提升排名，引流秘籍！  AI赋能，创意无限，轻松创作！  达州抖音SEO推广公司收费情况如何？  权威榜单新锐站，一网打尽行业翘楚  全球速搜一触即达  微信分销系统是有哪些重要的运营价值  北海哪家SEO公司收费合理？  系统开发 篇一：小程序开发费用，做小程序多少钱 小程序开发需要多少钱？广西一女生即将开学，狗狗仿佛意识到什么，赖在行李箱里不肯离开  网络营销服务，思路决定出路  网站体检专家  企业如何策划推广自身品牌打响着名度呢？  合肥SEO优化飞跃  关键词排名稳定优化秘籍  湖北警官学院专升本，升本直通车  物商家快递寄送方式有哪些？  提升企业在线曝光，抢占商机新高峰  阿里旺旺登不上，是啥原因？  网站流量翻倍，曝光力MAX优化秘籍