1.iOS WKWebView调试JS
2.2019 再聊移动端 300ms 延迟及 fastClick 原理解析
3.你那么牛，怎么不教我打iOS包？安排！
4.JSBridge原理解析——以WebviewJavascriptBridge实现方式为例

iOS WKWebView调试JS

       近期撰写了一篇关于Android WebView调试JS的文章，本文作为姊妹篇，将介绍iOS上如何调试WKWebView加载的HTML中的JS。

       前提条件包括：配置Mac计算机和iPhone手机，集成系统网站源码注册Apple ID，购买美元一年的证书以签名App并发布到App Store。iOS研发门槛较高。

       调试JS前需满足以下条件：下载提供的Demo工程进行参考。

       调试JS步骤如下：

       1. 运行Demo工程App，可使用真机或模拟器。

       2. 在Safari浏览器设置中打开开发调试功能，勾选“显示网页开发者功能”。

       3. 使用Xcode运行工程，在Safari“开发”菜单中查看Debug起来的App。

       4. 点击打开的HTML：Test进入调试页面，切换到“来源”选项查看源码，并设置断点。红包统计源码

       5. 在手机上运行App，点击按钮触发调试，查看控制台日志。

       脱离Xcode调试JS的方法：断开Xcode调试后，在手机上运行App，Safari中也能看到对应运行的App。脱离Xcode调试方便Web开发工程师进行Web逻辑调试。

再聊移动端 ms 延迟及 fastClick 原理解析

       移动端ms延迟及fastClick原理解析

       移动端ms延迟问题源于浏览器为识别双击手势而等待的时间，最初在桌面端网页兴起时，为解决移动端适配和提高用户体验，移动端浏览器引入了双击缩放手势。然而，这种设计导致了移动端点击操作的延迟，延迟时间从ms到ms不等。

       谷歌在移动版Chrome发布后，从Chrome 版本开始，对于移动端优化的网站，即使禁用了缩放功能，openfalcon agent源码也解决了这一延迟问题。之后，Firefox、IE/Edge等浏览器也相继修复了此BUG。

       解决移动端ms延迟问题的方法包括禁用缩放或在代码中添加特定处理。在Android WebView和iOS WebView中，处理方式与移动端浏览器一致，但iOS WebView中UIWebView与WKWebView的使用和特性也有所不同。UIWebView始终存在ms延迟问题，而WKWebView在iOS 9.3时解决了此问题。

       fastClick库的原理在于在touchend事件发生时，阻止默认事件触发，然后通过创建MouseEvents并触发click事件来解决延迟问题。此外，fastClick在PC端不适用，需要通过notNeeded函数判断设备类型。

       fastClick的使用需谨慎，特别是虚拟硬盘源码在iOS 9.3以上的WKWebView中，引入fastClick可能会带来额外风险和不必要的文件请求。适合自己的才是最好的，因此，在仅需对iOS 9.3以上WKWebView做适配的情况下，无需使用fastClick。

       fastClick在解决移动端ms延迟问题上的贡献值得肯定，但是否继续使用需根据实际业务需求考虑。阅读优秀的源码可以提升编程审美和能力，但同时也需对其不足之处保持警惕。

你那么牛，怎么不教我打iOS包？安排！

       点击上方亿元程序员+关注和★星标

       引言

       Cocos如何更加顺利地打出iOS包

       进入游戏开发行业，通过关注亿元程序员，你对游戏开发的认知逐渐增长。不少小伙伴通过阅读笔者的文章，成功独立完成了属于自己的游戏，并且上线。

       1. 小游戏打iOS包有哪些形式？

       小游戏给包方式多样，水声通信 源码与渠道打交道的小伙伴较为熟悉，主要介绍两种：

H5

       通过H5形式完成渠道SDK对接，具有跨平台优势。游戏研发无需了解原生Android或iOS内容，仅提供链接即可。

       H5游戏打iOS包主要利用UIWebView或WKWebView等web视图容器，使游戏像传统原生应用程序一样运行在移动设备上。

原生

       发布iOS原生应用，通常借助游戏引擎提供的工具，Cocos Creator亦不例外。

       2. Cocos Creator打iOS包流程

       以Cocos Creator 3.8.3为例，分享如何顺利打出iOS包。

环境

       需要准备的环境包括安装电脑或虚拟机，以及通过App Store下载安装Xcode。

打开构建工具

       打开游戏项目，通过菜单栏Project->Build或快捷键shift+command+B，打开构建发布工具。

新建构建任务

       点击New Build Task新建任务。

选择平台

       在构建平台中选择iOS。

设置Bundle Identifier

       设置包名，测试时可自定义，正式上线需申请。

设置屏幕方向

       根据游戏情况调整。

选择Developer Team

       开始时可忽略，之后设置开发团队，自行前往。

构建与生成

       配置完成后，点击Build和Make生成Xcode工程和编译。

       通过Run运行游戏。

       或在生成Xcode工程后，使用Xcode打开工程进行调试或生成ipa。

       3. 打iOS包常见问题总结

       以下是一些常见问题，建议收藏。

未安装Xcode

       首次导出工程时，可能提示未安装Xcode或命令行工具设置错误。确认安装后，设置工具路径，检查xcodebuild版本。

Make报错

       首次点击Make，查看Xcode工程解决。

Xcode相关

       首次打开工程运行按钮无法点击，安装Xcode版本后即可。

开发团队

       运行提示选择开发团队，输入苹果ID，没有的可申请。

编译报错一

       模板问题，点击右下角的Fix解决。

编译报错二

       结构变动，论坛搜索解决。通常涉及头文件更新。

打提审包

       设置后台申请游戏包名，导入证书，调整目标，完成归档打包上传或导出ipa。

打越狱包

       使用个人包名和开发团队，点击Product->Analyze打包，生成app，压缩zip为ipa。

其他报错解决

       关键信息搜索论坛或搜索引擎，类似问题广泛存在。

       结语

       分享结束，如对您有帮助，欢迎分享、收藏、点赞和在看！更多源码可通过阅读原文获取。我是"亿元程序员"，有着8年游戏行业经验，希望能提供帮助。

       更多实用资源推荐：

       知识付费专栏

       微信小游戏常用API整理

       Cocos实例集锦

       游戏开发框架打造

       设计模式学习

       贪吃蛇游戏开发系列

       期待您的支持和关注！

JSBridge原理解析——以WebviewJavascriptBridge实现方式为例

       JSBridge是一种webview与native端进行通信的手段。通过JSBridge，webview可以通过jsb调用native的能力，而native端也可以通过jsb在webview上执行逻辑。以WebviewJavascriptBridge为例，解析其实现方式：

       在JSBridge中，主要通过拦截URL请求实现native端与webview端的通信效果。WebviewJavascriptBridge是一个较为流行的实现方式，其源码地址为：github.com/marcuswesti...

       实现JSBridge的关键步骤包括：

       1. 注册Bridge：在webview侧和native侧分别注册bridge，通过一个对象储存所有函数。

       2. 初始化代码注入：在webview内部注入初始化代码，此代码执行关键操作。

       3. 监听URL请求：在iOS中，如WKWebview，监听URL请求进行相关处理。

       4. webview调用native能力：当webview与native端注册桥后，双方可以互相调用。具体过程包括webview调用、native接收、执行响应。

       5. native调用webview能力：与webview调用相反，native主动调用JS侧方法。

       具体步骤如下：

       2-4-1：webview侧调用native，通过callHandler生成message并推入队列，更改iframe src。

       2-4-2：native侧处理消息队列，检测iframe src变化，执行WKFlushMessageQueue获取message。

       2-4-3：webview侧处理来自native的消息，根据responseId执行回调函数。

       过程总结如下图所示。

       通过这种方式，JSBridge实现了webview与native端的高效通信，为跨平台应用提供了便利。