如何在应用浏览器中构建在微信中运行的 Web 应用程序？

Question

我正在尝试构建一个简单的 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 浏览器上都可以正常工作，并且能够调试任何问题。同样的链接，我尝试从微信浏览器访问（只是从聊天窗口打开上面的链接），它根本没有在应用程序浏览器中打开我在微信中的应用程序。

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

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

Answer 1

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

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

腾讯提供了用于开发常规网页界面和微信小程序的IDE，开发者可以直接与：

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

如果您下载该 IDE：

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

如你所见，微信IDE中调试普通网页的部分不过是一个模拟器（微信小程序部分，开发者可以直接在里面写代码），以我的经验来看确实有bug，你还是会需要在真机上测试代码。

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

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

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

要看。

你可能知道的官方账号内的微信，与网页的任何上下文中直接打开的，微信，浏览器，它将有交互的能力weixin的对象，或具有像一些API与微信的登录，薪酬与微信支付：

1. 关闭当前的in-WeChat-browser、hide-share-button等API不需要什么特别的，也不需要注册任何公众号；
2. 但是如果你想做支付，登录的事情，你需要一个公众号，并每年支付能力（在中国以外不确定）。

localhost你遇到的问题

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