移动端 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前端开发岗

标签：

相关文章： 凡客诚品网上商城网络营销策略分析  轻松搭建个人网页，一键开启网络新天地  畅享ChatGPT，免登录对话新体验  张丽俊丨一个可以很旺自己的习惯  ERP管理系统，双核配置要价几何？,建设银行亳州分行网站  合肥SEO速成班  宝安SEO攻略：策略多，技巧精，一步到位！  深企营销网站专家  香水外贸企业响应式英文网站模板  企业做全网营销需要注意什么？从何入手？  黑客技术揭秘，你敢探索吗？,亚马逊站内营销推广简介  项城SEO专家，高效优化服务  淘宝店铺推广，多渠道、多创意，效果翻倍！  怎样才能做好全网营销推广？  想要通过app推广赚钱？教你6招快速进行吸粉引流的推广方法！  优化CPU性能，核心硬件升级？如何提升效率？,郑州网站推广平台有哪些  “极速提升网站权重，一触即达！”  小程序主要的传播或推广方式是什么？  优化搜索霸主地位  视频号商品橱窗藏身何处？  网速慢如蜗牛？网站访问慢之谜  工作五金指的是哪五金  新搜索神器，一搜即达！  企业担当，社会共融，绿色未来  淘宝推广新招式，轻松吸粉涨销量  陕西人肉拉面事件，背后真相是什么？,农村营销推广怎么做好  单页优化，如何提升用户体验？,龙南推广网络营销一体化  “新平台，广触角，高效推广”  SEO技巧精通，关键词优化与长尾关键词高效提升  京东订单怎么查询？  职业教育培训机构网站模板  用户体验研究员：产品成功的关键角色  外链汇总地  网络优化，性能效率双提升  关于企业员工工伤的通知  引领创意高效新时代  eBay怎么读？  网络营销师能力认证证  SEO工具教程：快速提升网站排名秘诀  搜索引擎营销新策略，高效提升品牌曝光  娃哈哈SEO：核心关键词+如何提升网站排名？,杭州seo优化哪家靠谱  轻松高效写论文，AI助力！  用户体验的四个维度  “行业领先排名优化专家”  “顾客至上，体验为王，服务制胜”  SEO写作：关键词布局核心策略，如何提升排名？,铜鼓百度网站优化  速卖通开店需要多少钱？  在闲鱼卖手机能赚多少钱？  SEO速效提升专家  这双改写的物篮球鞋表现如何？