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

2024-01-08 20:38
文章标签 应用 开发 调试 js 嵌入式 ios wkwebview 混合 时代 成为 来临 催化剂

本文主要是介绍iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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模拟器非真机，只是模拟02（新版本加入了模拟网络链接的功能，故上调评分）PC、MAC无GO
weinre安装较为繁琐32PC、MAC全部GO
调试Android上的Chrome需要翻墙24PC、MACAndroid上的ChromeGO
调试Android APP里的webview需要翻墙34PC、MACAndroid APP里的webviewGO
调试Android上的UC需要桌面设备和移动设备同一网段13PC、MACAndroid上的UCGO
调试iOS上的Safari需要MAC（甚至可以无需iOS设备）24MACiOS上的SafariGO

简要步骤

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的引用）

其他参考链接

  • http://people.apache.org/~pmuellr/weinre-docs/latest/Installing.html

调试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上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请翻墙后再试（ 示意图 ）（ 一个免费的翻墙服务 ）

其他参考链接

  • https://developer.chrome.com/devtools/docs/remote-debugging

调试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上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请翻墙后再试（ 示意图 ）（ 一个免费的翻墙服务 ）

其他参考链接

  • https://developers.google.com/chrome-developer-tools/docs/remote-debugging

调试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设备上弹出的是否允许远程调试上，选择“允许”（ 示意图 ），即可开始调试（ 示意图 ）

其他参考链接

  • http://www.uc.cn/business/download/developer.pdf

调试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调试。 （ 示意图 ）




这篇关于iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/584752。

相关文章

Linux内核的调试（TODO）

Linux内核的调试（TODO）

（TODO）
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2