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进入调试页面,切换到“来源”选项查看源码,并设置断点。ios网页源码下载
5. 在手机上运行App,点击按钮触发调试,查看控制台日志。
脱离Xcode调试JS的方法:断开Xcode调试后,在手机上运行App,Safari中也能看到对应运行的App。脱离Xcode调试方便Web开发工程师进行Web逻辑调试。
再聊移动端 ms 延迟及 fastClick 原理解析
移动端ms延迟及fastClick原理解析
移动端ms延迟问题源于浏览器为识别双击手势而等待的时间,最初在桌面端网页兴起时,为解决移动端适配和提高用户体验,移动端浏览器引入了双击缩放手势。然而,这种设计导致了移动端点击操作的延迟,延迟时间从ms到ms不等。
谷歌在移动版Chrome发布后,从Chrome 版本开始,对于移动端优化的网站,即使禁用了缩放功能,小程序 运动 源码也解决了这一延迟问题。之后,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包有哪些形式?
小游戏给包方式多样,php源码检测更新与渠道打交道的小伙伴较为熟悉,主要介绍两种: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端的高效通信,为跨平台应用提供了便利。