2

我正在尝试构建一个简单的 Web 应用程序，该应用程序捕获用户照片并通过连接到其他一些业务用例将其发送到我的自定义服务器。我的网页使用 HTML 的文件输入控件来启动本机相机或画廊选择选项。

var input = document.createElement('input');
    input.setAttribute('accept', 'image/*');
    input.setAttribute('capture', 'camera');
    input.setAttribute('type', 'file');
    input.click();

这个网络应用程序，我放置在名为“PhotoLocker”的本地网络服务器中，并使用类似 url 进行测试

https://localhost(ipaddress to access via mobile browser)/PhotoLocker/index.html

此链接在桌面和移动 chrome 浏览器上都可以正常工作，并且能够调试任何问题。同样的链接，我尝试从微信浏览器访问（只是从聊天窗口打开上面的链接），它根本没有在应用浏览器中打开我在微信中的应用程序。

谷歌搜索后，我发现https URL scheme微信不支持。是真的吗？当我粘贴与 相同的应用程序 urlweixin://ipaddress/PhotoLocker/index.html时，我可以看到我的网络应用程序主页，但它没有按预期工作。

我的问题是 - 如何调试我在微信浏览器中打开的网页？我是否需要官方微信开发帐号来开发和测试示例应用程序？ 附加信息： 我可以从以下链接中提到的微信网络开发工具调试网页。但是，无法在此工具中调试移动微信页面。它总是在打开 chrome 开发工具。 https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1

4

2 回答 2

5

我是中国的前端开发人员，中文。原谅我的英语有任何错误，我可能造成的误解。下面的一些链接（主要是开发文档）包含中文完整的站点，因为我现在找不到对应的英文站点。

如何调试我在微信浏览器中打开的网页？

腾讯提供了开发普通网页界面和微信小程序的IDE ，开发者可以直接交互：

  1. JSSDK（基本上是一个特殊的weixin 对象只存在于微信浏览器中）；
  2. 微信小程序中提供的API 。

如果您下载该 IDE：

  1. 首先它会问你是用你的微信扫描二维码，然后用你的微信账号确认登录；
  2. 接下来会出现两个方形按钮（下图），左边是微信小程序，右边是测试普通网页。 微信开发IDE登录页面
  3. 点击右边的蓝色，然后你可以找到你的出路，它只是在项目 Blink之上构建的东西。微信开发IDE中调试常规网页的UI

可以看到微信IDE中调试常规网页的部分只不过是一个模拟器（微信小程序部分，开发者可以直接在里面写代码），根据我的经验，它确实有bug，你仍然会需要在真机上测试代码。

为此，腾讯提供了另一个工具叫做vConsole，教程在这里，你可以直接在微信浏览器中进行以下操作：

  1. 查看控制台日志；
  2. 查看网络请求；
  3. 查看文档元素；
  4. 查看 Cookie 和本地存储；
  5. 手动执行 JS 命令
  6. 等等

我是否需要官方微信开发帐号来开发和测试示例应用程序？

依靠。

你可能知道微信里面的公众号，在微信浏览器里面可以任意上下文直接打开网页，可以和weixinObject交互，或者有一些API，比如微信登录，微信支付：

  1. 关闭当前微信浏览器，隐藏分享按钮等API不需要任何特殊的，你不需要注册任何公众号；
  2. 但是如果你想做支付，登录的事情，你需要一个公众号并每年支付能力（在中国以外不确定）。

localhost你遇到的问题

我现在没有我的工作机器，所以我无法测试。平时我可以localhost用Charles代理然后在微信调试，但是从来不做https，以后再试试。

于 2018-03-05T15:31:10.403 回答
1

所有关于如何调试在微信浏览器中打开的网页的信息都重定向到如何查看日志或 ajax/netwrok 调用分析。即使使用下面链接中提到的微信网页开发工具，我也无法在此工具中调试移动微信页面。它总是在打开 chrome 开发工具。

https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1。

因此进一步分析了远程移动网页调试，发现没有办法像在chrome dev工具中那样放置断点，watch，表达式等都是不可能的。

作为一种解决方法 - 当您在开发工具中模拟页面但无法在移动设备中调试网页时，您可以调试代码。 在此处输入图像描述

尝试按照微信 web 开发工具文档进行远程调试时的相同网页。在这里我们只能看到控制台日志和网络调用。 在此处输入图像描述

于 2018-04-09T05:21:06.917 回答