如何在应用程序浏览器中构建运行 微信中的Web 应用程序?
How to build web application that run in WeChat in app browsers?
我正在尝试构建一个简单的 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
这个 link 在桌面和移动 chrome 浏览器上都运行良好,并且能够调试任何问题。同样link,我尝试从微信浏览器访问(只是在聊天link上方打开window),它根本没有在应用程序浏览器中打开我在微信中的应用程序。
google了一下,发现微信不支持https URL scheme
。是真的吗?当我粘贴与 weixin://ipaddress/PhotoLocker/index.html
相同的应用程序 url 时,我可以看到我的网络应用程序主页,但它没有按预期工作。
我的问题是 - 如何调试我在微信浏览器中打开的网页?我是否需要一个官方的微信开发帐户来开发和测试示例应用程序?
附加信息:
我能够从微信网络开发者工具调试网页,如下所述 link。但是,无法在该工具中调试手机微信页面。它总是打开 chrome 开发工具。
https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1
我是中国的一名前端开发者,中国人。请原谅我的英语可能造成的任何错误和误解。下面的一些链接(主要是开发文档)包含完整的中文站点,因为我现在找不到相应的英文站点。
how to debug my webpage opened in WeChat browser?
腾讯提供 IDE 用于开发常规 Web 界面和 WeChat-mini-program,开发者可以直接与之交互:
如果您下载 IDE:
- 首先会问你是用你的微信扫描二维码,然后用你的微信账号确认登录;
- 接下来会出现两个方形按钮(下图),左边一个是WeChat-mini-program,右边一个是给你测试普通网页的。
- 点击右边的蓝色那个,然后你就可以找到出路了,它只是建立在project Blink.
之上的东西
大家可以看到微信中调试普通网页的部分IDE只不过是一个模拟器(WeChat-mini-program部分开发者可以直接在里面写代码),而在我的体验它确实有错误,你仍然需要在真机上测试代码。
为此腾讯提供了另一个工具vConsole, tutorials here,使用它你可以直接在in-WeChat-browsers中做以下事情:
- 查看控制台日志;
- 查看网络请求;
- 查看文档元素;
- 查看 Cookie 和 localStorages;
- 手动执行JS命令
- 等等
Do I need a official WeChat Dev account even to develop and test sample apps?
视情况而定。
你可能知道微信里面的Official Account,在in-WeChat-browser里面的任意上下文直接打开网页,就会有weixin
对象交互的能力,或者有一些API 点赞微信登录, 微信支付:
- API 像 关闭电流 in-WeChat-browser, hide-share-button 不需要什么特别的,您无需注册任何公众号;
- 但是如果你想做 Pay, Login 事情,你需要一个公众号并每年支付费用(在中国以外的地方不确定)。
您遇到的localhost
问题
我现在没有工作机器,所以无法测试。平时我可以代理localhost
with Charles然后在微信里调试,但是从来不做https
,以后试试
所有关于如何调试微信浏览器打开网页的信息都重定向到如何查看日志或ajax/netwrok调用分析。
即使使用下面提到的WeChat web devloper工具link,我也无法在这个工具中调试手机微信页面。它总是打开 chrome 开发工具。
https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1.
于是进一步分析了远程手机网页调试,发现没有办法打断点,watch,expression之类的,跟chromedev tools里一样是不行的
作为解决方法 - 当您在开发工具中模拟页面但无法在移动设备中调试网页时,您可以调试代码。
尝试根据微信网络开发者工具文档进行远程调试时的同一网页。在这里我们只能看到控制台日志和网络调用。
我正在尝试构建一个简单的 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
这个 link 在桌面和移动 chrome 浏览器上都运行良好,并且能够调试任何问题。同样link,我尝试从微信浏览器访问(只是在聊天link上方打开window),它根本没有在应用程序浏览器中打开我在微信中的应用程序。
google了一下,发现微信不支持https URL scheme
。是真的吗?当我粘贴与 weixin://ipaddress/PhotoLocker/index.html
相同的应用程序 url 时,我可以看到我的网络应用程序主页,但它没有按预期工作。
我的问题是 - 如何调试我在微信浏览器中打开的网页?我是否需要一个官方的微信开发帐户来开发和测试示例应用程序? 附加信息: 我能够从微信网络开发者工具调试网页,如下所述 link。但是,无法在该工具中调试手机微信页面。它总是打开 chrome 开发工具。 https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1
我是中国的一名前端开发者,中国人。请原谅我的英语可能造成的任何错误和误解。下面的一些链接(主要是开发文档)包含完整的中文站点,因为我现在找不到相应的英文站点。
how to debug my webpage opened in WeChat browser?
腾讯提供 IDE 用于开发常规 Web 界面和 WeChat-mini-program,开发者可以直接与之交互:
如果您下载 IDE:
- 首先会问你是用你的微信扫描二维码,然后用你的微信账号确认登录;
- 接下来会出现两个方形按钮(下图),左边一个是WeChat-mini-program,右边一个是给你测试普通网页的。
- 点击右边的蓝色那个,然后你就可以找到出路了,它只是建立在project Blink.
大家可以看到微信中调试普通网页的部分IDE只不过是一个模拟器(WeChat-mini-program部分开发者可以直接在里面写代码),而在我的体验它确实有错误,你仍然需要在真机上测试代码。
为此腾讯提供了另一个工具vConsole, tutorials here,使用它你可以直接在in-WeChat-browsers中做以下事情:
- 查看控制台日志;
- 查看网络请求;
- 查看文档元素;
- 查看 Cookie 和 localStorages;
- 手动执行JS命令
- 等等
Do I need a official WeChat Dev account even to develop and test sample apps?
视情况而定。
你可能知道微信里面的Official Account,在in-WeChat-browser里面的任意上下文直接打开网页,就会有weixin
对象交互的能力,或者有一些API 点赞微信登录, 微信支付:
- API 像 关闭电流 in-WeChat-browser, hide-share-button 不需要什么特别的,您无需注册任何公众号;
- 但是如果你想做 Pay, Login 事情,你需要一个公众号并每年支付费用(在中国以外的地方不确定)。
您遇到的localhost
问题
我现在没有工作机器,所以无法测试。平时我可以代理localhost
with Charles然后在微信里调试,但是从来不做https
,以后试试
所有关于如何调试微信浏览器打开网页的信息都重定向到如何查看日志或ajax/netwrok调用分析。 即使使用下面提到的WeChat web devloper工具link,我也无法在这个工具中调试手机微信页面。它总是打开 chrome 开发工具。
https://mp.weixin.qq.com/wiki?action=doc&id=mp1455784140&t=0.06697335132505233#1.
于是进一步分析了远程手机网页调试,发现没有办法打断点,watch,expression之类的,跟chromedev tools里一样是不行的
作为解决方法 - 当您在开发工具中模拟页面但无法在移动设备中调试网页时,您可以调试代码。
尝试根据微信网络开发者工具文档进行远程调试时的同一网页。在这里我们只能看到控制台日志和网络调用。