微信webview模拟器
背景
我们经常在微信的webview开发时会遇到比较头痛的问题:
微信的JSAPI没法调试(只能打log来定位问题)
微信的登录态(getA8key服务)比较难在PC上模拟(要抓日志看ui、key或者利用web微信的跳转)
手机没法连上开发机(不在一个网段)。
之前尝试过在PC上使用安卓模拟器来调用微信APP,从而在PC可以调试网页,同时也可以访问开发机,但是模拟器的使用非常耗资源,也很难在PC成功跑起来。
为了解决这个调试困难的问题,尝试用浏览器的Javascript插件来实现一个类似微信的webview的功能:微信webview模拟器
支持功能
模拟微信登录(默认绑定测试账号)
模拟微信JSAPI,部分有UI界面,全部API都可以在console里边看到调用log
可以在PC上连开发机,连本地静态网页,也可以利用浏览器开发工具调试网页
收藏到朋友圈、发送给好友、收藏等常用API的模拟界面
目前只支持Chrome浏览器
启动模拟器
先创建一个书签访问在开发机写好的JS插件:
成功访问页面后,点击刚刚创建的书签栏的“微信web模拟器”,页面就会自动加载微信登录态以及准备jsapi的初始化工作。此时你能看到这样的界面:
使用F12调出开发者工具面板,可以调试页面的元素以及Javascript,也可以在console面板里边看到所有JSAPI的调用。
实现过程
首先利用书签执行JS的方式,可以在任何域名下执行一段脚本,不存在跨域操作(假设我访问了www.qq.com)。
第一步:先把iPhone界面画好,中间webview区域采用一个iframe,其src=”www.qq.com”,可以发现现在外层的宿主环境也是在www.qq.com下,iframe里边也是在www.qq.com下,这样我们才可以做接下来的事情。
第二步:监听iframe加载结束后,动态往iframe插入我们写好的一个js,因为第一步交代了,同域下是允许这样的操作的:
可以看到当iframe加载完毕后,就会执行这里的jsapi.js了。这个JS负责模拟微信webview的JSAPI钩子,先回头看看微信的JSAPI是怎么调用的:
这就容易了,既然是在document监听WeixinJSBridgeReady事件,那就模拟一下呗。
第三步:在jsapi.js里边模拟WeixinJSBridgeReady事件
在触发这个事件之前我已经把JSAPI的钩子都初始化好了,就是上图第一行的WeixinJSBridge对象。
第四步:模拟WeixinJSBridge对象的所有调用接口
基本上模拟一下下边的几个接口就完成90%的工作了:
WeixinJSBridge.on
WeixinJSBridge.call
WeixinJSBridge.invoke
这里实现没什么好讲的了,如果简单做的话,全部把调用的输入参数往console.log一打就可以了,我这里还模拟了分享到朋友圈跟分享到朋友等UI操作:
第五步:最后只差微信登录态了
这是一个内部的服务,也没必要放在这讲,只要内网搭建一个cgi让我去获取一下登录态即可完成,纯粹记录一下步骤。
总结
目前这个小插件用来debug现网问题或者调试开发都非常方便,而且使用非常简单,不需要配置一大堆东西,只要配置一个HOST+添加书签。
PS:目前这个插件不支持HTTPS的页面,原因是HTTPS不能加载HTTP的资源,因此在开发机如果能搭建HTTPS的服务,插件自动识别加载不同协议下的插件JS即可。
建议继续学习:
- 网页与原生App如何交互 (阅读:2900)
- Android利用webView调用JavaScript (阅读:1997)
- [Android]用WebView访问证书有问题的SSL网页 (阅读:1829)
- WebView跨源攻击分析 (阅读:1562)
- ios webview 相关 (阅读:1265)
- WebView跨源攻击分析 (阅读:1089)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:raphealguo 来源: raphealguo'blog
- 标签: webview
- 发布时间:2015-01-05 23:43:55
- [66] Oracle MTS模式下 进程地址与会话信
- [66] Go Reflect 性能
- [65] 如何拿下简短的域名
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则