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

Question

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

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

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

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

此链接在桌面和移动 chrome 浏览器上都运行良好，并且能够调试任何问题。同一个链接，我尝试从微信浏览器访问(只是从聊天窗口打开上面的链接)，它根本没有在应用程序浏览器中打开我在微信中的应用程序。

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

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

Answer 1

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

how to debug my webpage opened in WeChat browser?

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

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

如果您下载该 IDE:

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

如你所见，微信IDE中调试常规网页的部分只不过是一个模拟器(在微信小程序部分，开发者可以直接在其中编写代码)，根据我的经验，它确实存在错误，您仍然需要在真机中测试代码。

为此腾讯提供了另一个工具vConsole , tutorials here ，有了它，您可以直接在微信浏览器中执行以下操作:

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

---

Do I need a official WeChat Dev account even to develop and test sample apps?

视情况而定。

您可能知道 Official Account在微信内部，在 in-WeChat-browser 中的任何上下文中直接打开网页，它将能够与 weixin 对象进行交互，或者具有一些 API，例如 login with WeChat , 微信支付:

1. 像关闭当前微信浏览器、隐藏分享按钮这样的API不需要任何特殊的东西，你不需要注册任何公众号；
2. 但是如果你想做支付、登录的事情，你需要一个官方账户并每年支付费用(在中国以外的地方不确定)。

---

你遇到的localhost问题

我现在没有工作机器，所以我无法测试。定期我可以代理localhost与 Charles然后在微信调试，但是永远不要做https，我稍后试试。