iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

早在五年前,在哈尔滨大街小巷的饭馆儿里,经常听到店老板抱怨服务员不好招,钱给少了没人干!

那时还特意做了个分析,2010年倒推30年,正好是1980年,一家一个孩儿,80后还有十年的人力资源可用,90后一是骄惯着长大的,做服务员那份辛苦吃不消,另一方面也真

那么多闲人了。小声带一句,本人也曾在毕业前后做过一两次跑堂的,甚至穿着旱冰鞋传菜,正常站一天,就够受了,第二天没到下午就跑路了,实在没这能力和体力,只好偷个懒,学点技术,搞IT吧

时至今日,在IT行业摸爬滚打已15个年头,从电信中继线到IVR板卡开发,再到Linux计费,短信SMPP协议运用,一直到智能手机,从 C++ 到 Java、C#,从 J2EE 到 PHP再到Asp.net,从 Sybase、SQLServer到Oracle、DB2,再到Mysql、Sqlite,从Android到Sybian、QT再到iOS,技术的变改一直在进行着,从小到大,再从大到小,智能设备从2008年至今已走过7个年头,屏是越来越大,大到 pad 的诞生,又回归到5寸大屏手机,未来可能电视大屏又会火一把,接着就是瓶颈,开始衍生,多屏互动无处不在,慢慢的屏又该小了,手表、纽扣、戒指、钥匙、胸针,也许有一天学生会被再一次要求强制戴校徽,不再像我们以前那样仅是个标志,那枚校微将会如身份证一样标识着身份,记录着身影,播报着校园新闻、了解考试成绩,随时解答书本中不懂的题目。。。谁知道了

畅想总是美好的,未来总是值得期待的,然而眼下人荒已经出现多年,慢慢波及各个行业,尤其IT这种苦力行业,随着这种社会关系的变化,也许IT也不再以苦力行业出现,需要充分利用智慧和思想才能达到生产力的补充,而非人海策略了。

由此现状,不难看出,像Android、iOS这种技术要求较高的工种,人才更是少得可怜,那么如何利用现有资源进行转嫁补充将是一个新的问题需要探索。

WKWebView 随着 iOS8的发布呈现在人们眼前,一个 UIWebView 例程初始20M的内存占用量,突然降到10M,让人欣喜若狂,尤其后续多次加载 HTML 页面所带来的内存

量,基本以 0.2 M为单位,而不会像 UIWebView 一样以2M为单位。

苹果发布 WKWebView 更得要的目的是开放它的高效 JS 引擎,那才是真正的金矿。

早些年,老乔就是想用Safari应用来构建这一生态链,无耐各方面的限制,原生应用倒是火起来了,而今WKWebView的发布,也标志着一个新的时代的到带,也许这可能叫做 Web 8.0 吧?!

说了这么多,只能用一个词来形成:瞬息万变!

如何应对新的嵌入式应用开发时代,嵌入式应用中嵌入JS应用将成为充分利用 Web 2.0时代留下的一笔人力财产的有效方式,就如我们现在全国最大的消费市场是早些年“人多力量大”思想留下的财富一样。如何挖掘将成为新的课题。

JS作为一种动态语言,在桌面浏览器上进行开发,早些年也曾很让人头疼,后来发现了 FireFox 的 FireBug 插件,可以实时调试,很让人心动,随之各浏览器厂家及插件开发者不断提供这方面的支持,使得 JS 开发变得没那么让人抓狂,继而很多集成开发环境内置浏 览器调试环境,更大限度地解决了这些问题。

那么,嵌入式应用嵌入JS,又成为一个新的问题,怎么样能利用已有的开发环境及浏览器及插件环境来解决嵌入式JS的问题呢?

首先要说,Sarari 桌面浏览器是可以对 XCode 模拟器中的 WebView 组件进行调试支持的。

详细用法参见:使用safari对webview进行调试

对于Android,可以使用 Chrome 进行远程调试,由于chrome 和 android 官网我家里的环境访问不到,只能再贴几篇链接凑和看吧,至少您知道有这么回事儿

http://blog.csdn.net/t12x3456/article/details/14225235

还有一种方式,利用开源的 js 调试库:

https://github.com/lexandera/Aardwolf

详情自个去看一下吧。

这里有一篇,比我总结得好得多,以下直接转载:

各种 真机远程调试 方法 汇总

各种 真机远程调试 方法 汇总

“真机远程调试”(remote inspect web on real device),是指用桌面电脑(PC或MAC)远程连接上移动设备,通过类似Chrome浏览器开发人员工具的界面,来调试移动设备上运行的网页

当前:Oct 27,2014

“真机远程调试”的方法总是在发展,日新月异,有必要在每次更新本文档时标注当前时间及当前相关软件版本

  • 当前最新 桌面版Chrome 版本:MAC:38.0.2125.104,PC:未知
  • 当前最新 Android上的Chrome 版本:38.0.2125.102
  • 当前最新 Android上的UC开发人员版 版本:9.8.9.457
  • 当前最新 iOS:8.1

总览表格

方法 关键点 实现难度(综合考虑搭环境、软件、硬件成本,分数 为佳) 调试效果(综合考虑仿真效果、能调试的项等,分数 为佳) 可用的桌面设备 可用的移动设备及可调试的浏览器 简要步骤
Chorme模拟器 非真机,只是模拟 0 2(新版本加入了模拟网络链接的功能,故上调评分) PC、MAC GO
weinre 安装较为繁琐 3 2 PC、MAC 全部 GO
调试Android上的Chrome 需要翻墙 2 4 PC、MAC Android上的Chrome GO
调试Android APP里的webview 需要翻墙 3 4 PC、MAC Android APP里的webview GO
调试Android上的UC 需要桌面设备和移动设备同一网段 1 3 PC、MAC Android上的UC GO
调试iOS上的Safari 需要MAC(甚至可以无需iOS设备) 2 4 MAC iOS上的Safari GO

简要步骤

Chorme模拟器

  1. 在PC或MAC上打开Chrome浏览器,打开想要调试的页面,然后打开开发人员工具
  2. 点击开发人员工具顶栏上的手机图标,即可开始调试( 示意图 ),一般来说需要重新刷新页面
  3. 在页面顶部可以看到设备选择下拉菜单 Device 和 模拟网络环境的下拉菜单 Network ,及左侧的清除选择按钮和打开关闭 media queries 的按钮( 示意图
  4. 打开设置左边的那个类似 >三 的图标,切换到 Emulation 标签,可以更细粒度地调整,来定制化你的模拟( 示意图

weinre

过程稍微繁琐,但是这个方案能调试几乎所有平台的所有浏览器,只要能运行js的就行

1. 安装nodejs
2. 安装weinre到global,即在命令行中运行 npm -g install weinre (MAC可能需要在前面加上 sudo
3. 获取本机IP地址(PC:开始→运行→cmd,输入 ipconfig ,查看“IPv4地址”字段; MAC:在网络偏好设置内),假设获取到的IP地址为 4.4.4.4
4. 在命令行运行weinre: weinre --boundHost 4.4.4.4 ,其中IP地址为上一步所获取的地址,如果弹出防火墙,请允许访问( 示意图
5. 在PC或MAC上用浏览器打开 http://4.4.4.4:8080/client/#anonymous ,其中IP地址为第三步所获取的地址( 示意图
6. 将移动设备连接到与PC或MAC同一局域网,打开移动设备上的需要调试的浏览器,然后随便打开一个网页。将它保存为书签
7. 修改上述书签,将地址改成:

javascript:(function(e){e.setAttribute("src","http://4.4.4.4:8080/
target/target-script-min.js#anonymous");document.getElementsByTagName("body")[
0].appendChild(e);})(document.createElement("script"));void(0);

,其中IP地址为第三步所获取的地址(复制后请去掉代码中的换行,使之成为一行)
8. 在移动设备浏览器上打开想要调试的页面,然后点击上一步保存的书签,即可在PC或MAC上的页面中的target中找到对应页面,点击可以开始调试( 示意图 )( 示意图

更多:

  1. 可以考虑在某个机器上搭建一个统一的weinre服务器,供团队成员共用,此方案我尚未尝试
  2. 在上述第7步开始,可以不采用书签的形式,而是考虑在代码中引入它提供的调试js文件,如 <script src="http://4.4.4.4:8080/target/target-script-min.js#anonymous"></script> (这种情况适用于不能使用书签的场景,如app内的webview、微信中等,但是上线之前要记得移除这个js的引用)

其他参考链接

调试Android上的Chrome

  1. 在Android设备上安装Chrome浏览器(版本>=32,https://play.google.com/store/apps/details?id=com.android.chrome&hl=en )(只有安卓4.0以上才有Chrome)
  2. 开启当前Android设备的USB调试
  3. 在PC或MAC上安装chrome浏览器(版本>=32)和对应的Android设备驱动(如果找不到,可以在这个 列表 内尝试)
  4. 用USB线连接Android设备,在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车,或通过菜单图标→工具→检查设备,进入调试界面
  5. 勾选界面中的 Discover USB devices ,直到搜索到你的Android设备( 示意图
  6. 在移动设备上弹出的是否允许远程调试上,选择“允许”
  7. 在下面的页面列表(将展示已在Android上的chrome中打开的页面),点击对应的 inspect 开始调试
  8. 此时将在桌面版Chrome上弹出一个新的标签页,即为调试界面;如果很久都没用响应,请翻墙后再试( 示意图 )( 一个免费的翻墙服务

其他参考链接

调试Android APP里的webview

  1. 通过修改代码,在APP内设置允许远程调试(需安卓版本为4.4及以上): 方法 ,然后安装APP
  2. 开启当前Android设备的USB调试
  3. 在PC或MAC上安装chrome浏览器(版本>=32)和对应的Android设备驱动(如果找不到,可以在这个 列表 内尝试)
  4. 用USB线连接Android设备,在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车,或通过菜单图标→工具→检查设备,进入调试界面
  5. 勾选界面中的 Discover USB devices ,直到搜索到你的Android设备( 示意图
  6. 在移动设备上弹出的是否允许远程调试上,选择“允许”
  7. 在下面的页面列表(将展示已在Android上的chrome中打开的页面),点击对应的 inspect 开始调试
  8. 此时将在桌面版Chrome上弹出一个新的标签页,即为调试界面;如果很久都没用响应,请翻墙后再试( 示意图 )( 一个免费的翻墙服务

其他参考链接

调试Android上的UC

  1. 在Android设备上安装UC浏览器开发版,http://www.uc.cn/business/developer/ ,点击第一行右侧的“安装包下载”( 示意图
  2. 获取Android设备的IP,一般在WLAN设置内,假设为 4.4.4.4
  3. 用和手机处于同一网段的PC或MAC访问步骤2获得的IP后加上 :9998 ,如例子中即为 4.4.4.4:9998
  4. 在Android设备上弹出的是否允许远程调试上,选择“允许”( 示意图 ),即可开始调试( 示意图

其他参考链接

调试iOS上的Safari

  1. 在iOS设备上打开允许调试:设置→Safari→高级→打开”web检查器“
  2. 在MAC上打开Safari的开发菜单:顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单
  3. 在iOS设备上的Safari浏览器中打开要调试的页面,然后切换到MAC的Safari,在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页,即可开始远程调试( 示意图
  4. 如果没有iOS设备,也可以在Xcode中模拟一台,点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器,并且模拟器里面Safari打开的页面,也是能通过上个步骤中MAC上的Safari调试。 ( 示意图

时间: 2024-10-17 04:43:08

iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂的相关文章

iOS原生混合RN开发最佳实践

做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也接触过PhoneGap等hybrid技术,今天我们就简单来聊下一种比较新的Hybrid技术方案,原生App与ReactNativie Hybrid,如果有同学们对React Native技术不熟悉的同学,可以查看作者简书中对React Native基础的讲解:React Native

Android深度探索(卷1)HAL与驱动开发 第十章&#160;嵌入式Linux的调试技术 读书笔记

对于复杂的Linux驱动以及HAL等程序库,需要使用各种方法对其进行测试.如设置断点,逐步跟踪代码,输出调试信息等.本章主要讲述了如何利用开发板.Android模拟器以及一些函数.工具调试嵌入式Linux内核模块.可执行程序和共享库. 1.打印内核调试信息:printk 该函数的用法和printf函数类似,只不过printk函数运行在内核空间,printf函数运行在用户空间.函数原型: asmlinkage printk(const char *fmt, ...) 第一个参数表示格式字符串.后面

混合app开发,h5页面调用ios原生APP的接口

混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行机制也是能够同步运行:但ios上就没那么容易了:. 在此我就不说兼容安卓的问题,只把ios问题说说: 问题1:H5调用ios接口,ios需要初始化,js代码在ISO上只运行一次 解决: 本人使用是angular框架搭建的H5页面 var ua = navigator.userAgen

iOS WKWebview 网页开发适配指南

iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们咨询. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的支持最新Webkit功能的网页浏览控件,摆脱过去 UIWebView的老.旧.笨,特别是内存占用量巨大的问题.它使用与Safari中一样的Nitro JavaScript引擎,大大提高了页面js执行速度. 切换方

大前端时代来临,我们何去何从?---前端工程师学习指南

 1.大前端时代是什么? 大前端时代是WEB统一的时代,利用html5或者6甚至7,不但可以开发传统的网站,做炫酷的网页动态效果,更可以采用BS架构应用程序.开发手机端web应用.移动端Native应用程序.智能设备(比如可穿戴智能手表,可穿戴智能衣服)等.别告诉我你不知道 iphone watch,以及各种琳琅满目的手机游戏哦. 大前端时代最大的特点在于一次开发,同时适用所有平台.再也不用为一个APP得做安卓和IOS两种模式而忧心啦,大前端已经能做非常多的开发语言[比如java.PHP等]能做

后ARM时代,嵌入式工程师的自我修养

1嵌入式学习的一些概念理解误区 很多嵌入式初学者认为,学嵌入式,就是学习ARM,就是学习开发板.买一块开发板,然后在上面"移植"u-boot.Linux内核,再使用busybox制作一个根文件系统,大功告成!觉得可以出去找工作了.这其实是有一定片面性的:首先ARM是个CPU架构,跟PC上的X86架构一样,你见过有人在Windows下面学习C/C++编程.MFC编程.网络编程.互联网编程,说自己学习X86的吗?当然,也不可否认,嵌入式平台的多样性.硬件的可定制性导致我们在嵌入式平台上开发

ARM开发比51开发高级吗—嵌入式就业技能分类

这个问题在嵌入式教育培训中,我回答了很多次.初学者往往都会认为ARM开发比51开发高级,但事实是这样吗?本篇文章就基于嵌入式开发领域的知识点分类的视觉来谈谈.作者在嵌入式领域有超十年的开发经验,本文也代表作者对嵌入式领域的大体见解. 1.     体系编程方面 CPU体系代表的是某类CPU家族的体系特性,如ARM体系.MIPS体系.X86体系,而嵌入式开发工程师一般是针对集成各种模块的SOC进行编程.因此这里的体系既包括CPU体系,也包括SOC编程.体系编程应该说是嵌入式领域最基本也是最通用的编

混合应用开发:Phonegap VS AppCan

混合应用开发:Phonegap VS AppCan 简介 Phonegap PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如iPhon

跨平台开发时代的 (再次) 到来?

这篇文章主要想谈谈最近又刮起的移动开发跨平台之风,并着重介绍和对比一下像是Xamarin,NativeScript .React Native和 DeviceOne 之类的东西.不会有特别深入的技术讨论,大家可以当作一篇科普类的文章来看. 故事的开始 “一次编码,处处运行” 永远是程序员们的理想乡.二十年前 Java 正是举着这面大旗登场,击败了众多竞争对手.但是时至今日,事实已经证明了 Java 笨重的体型和缓慢的发展显然已经很难再抓住这个时代快速跃动的脚步.在新时代的移动大潮下,一个应用想要