iPhone Web App开发杂感

简介:

iPhone的SDK还需要两个月才出来……现在要给iPhone开发app的话,唯一的官方推荐方式就是走web app的道路……

水果牌的魅力无穷……即便有browser的局限,还是有不少精彩的iphone web app浮现……

Facebook的iPhone版本,简直就做得跟原生程序无异……当之无愧的Best iPhone Web App……

这或许也是iPhone上的Mobile Safari够强……它真的很强悍……现代浏览器该支持的它都有……若要挑剔的话,我可以说它js的执行速度太慢……但这是处理器的问题,非战之罪……

只要有足够想象足够技术,iPhone能够提供一个相当美好的舞台……而Google的手机平台Adroid使用的浏览器与iPhone亦是同核心……明年底,GPhone出来后,iPhone Web App应该都能够摇身一变成为GPhone Web App才对……

手机原生程序固然可以享受到各种Web App无法做到的东西……比方说3D,本地储存等等……但这是有代价的……Windows Mobile / Sybiam / iPhone / Adroid,难道我们需要维护四个程序版本?而Web App的话,相信未来几年内就能够将他们全部一网打尽……

浏览器内的世界已经可以很精彩了……偶个人对Web App的发展还是非常有信心的……

扯远了……

开发iPhone Web App时,偶大部分的时间都是十分开心……因为我只需要照顾好MobileSafari一个浏览器就够了……我可以毫不犹豫的使用-webkit-border-image这样酷的CSS效果……

但MobileSafari也是有bug的……最纳闷的一个CSS bug就是它无法在页面上固定位置显示一个东西……比方说菜单……而偏偏在页面上显示固定元素做导航在iPhone上面对用户交互是十分关键的……CSS搞不定,javascript呢?很悲惨的是用户拖动页面这个事件根本拿不到……应该有别的js奇技可以搞定这个……但是,这个是bug……相信这个bug会水果牌会很快搞定的……我个人是觉得投入精力去绕过这么个bug很划不来……至少,facebook也没有……

facebook是家伟大的公司……它的iPhone版很酷……而其开发者Joe Hewitt(不认识?Firebug作者是也!)把facebook iPhone版页面切换引擎iui给开源了……iui很好,很强大~ :P


因为开发的web app包括IM,使用AJAX是必然的了……实际上,偶使用了超大量的Ajax……

在选择Ajax库的时候,着实费了一番功夫……最终是选择了jQuery……主要原因是在普通web上用惯了……转其他库的话,重新上手需要时间……

一开始犹豫主要是担心jQuery太庞大……怕iPhone抗不住……可实际测试的结果……MobilSafari运行jQuery游刃有余……

另一方面的衡量是对于OO的支持……jQuery代表的是Event Base的开发哲学……OO并不是jQuery的选择……这点在jQuery作者John Resig的一个演讲中有提到……

偶的Web App相对比较复杂……不遵循OO的话,很担心代码后期的维护以及扩展……不过后来也就释然了……不是非OO不可……代码好坏最重要的还是看程序员本身的功力……如果说OO是神刀的话……有的人 “即便有神刀在手,亦无法成为刀中之神”……而且,也不是说用了jQuery就不能OO……我完全可以从别的库如Prototype / Mootools等挖出他们对OO支持的部分来用……至于$,还是觉得jQuery的爽~

如果不是jQuery用惯了的话,我很可能会选择mootools……因为它够轻量……

号称对iPhone有特别支持的js库是Dojo……而Dojo亦对Comet有支持……Cometd便是Dojo基金会那伙人搞出来的……偶做的Web App有包含Web IM,本来看上去Dojo会是合适的选择……但最终还是放弃了……它太庞大了……如果我用上Dojo的话,可能以后所有的东西都得基于Dojo……就算服务器端不用它的Cometd,我还是需要去使用使用它的bayeux协议……bayeux协议看了就很晕……这条贼船太大……上去了就下不来……所以,Dojo反倒是偶最先排除的js库……

不算UI设计……整个Web App开发了大概是2个人月……但,优化、修改又用去2.5个人月……

iPhone跑JS是很慢的……虽然开发的时候已经有小心注意效率……但第一版出来的结果不理想……主要原因是大家第一次做这么复杂的Web App,欠缺经验……所以,狠下一番功夫去做优化,若干模块几乎就是重写了……

jQuery的$对CSS selector是很强悍……但是功能强大并不代表它快……一开始做的时候甚至有时select了一堆Element出来,然后使用each……慢就一个字……后来全部另外想方法重写了……效率前后相差可达数十倍……

在UI上,则是开心了使用了iui……iui跟jQuery共存得很好……
 


整体上来说,开发iPhone Web App最大的问题在于用户操作上……实际上,这也是Apple提供的开发指南中首先强调的一点……Understand User-iPhone interaction……

它的可显示面积最多只有320x396……然后,还有横屏、竖屏……MobileSafari地址栏显示、隐藏……输入键盘打开、关闭……设计时必须考虑到这种种情况……如果说要在用户输入时做动态提示……那么需要记得用户输入的时候键盘是打开的,千万不要把提示放在被键盘盖住的地方……

纯手指触摸屏操作……这意味着屏幕上的所有可点击元素(按钮等)都必须够大,最好还要相隔够远……一行最好只有一个……不然,用户很容易点错……

当然,我们也可以完全选择按照iPhone它自己的UI风格去做……顶部一个标题,标题旁最多两个按钮……然后正式内容再采用那个List风格…… 但问题是,iPhone本身有一个Home按钮可以用……Web App没有,Home一按,就直接退出Safari了……另一个关键问题是MobileSafari的页面滚动默认是整个页面的滚动……你无法让用户只滚动页面中的一个Div/iframe,而保持其他部分不动……(Well,实际上,是可以只滚动一个Div,只是需要用两个手指!)……

这就意味如果Web App够复杂(比方说偶开发的这个),就不能照搬Apple的风格了……

总的来说,开发iPhone Web App是件很有挑战性,也可以是很惬意的事情……Web + 手机是当下以及下来一两年内最热门的开发话题……时势如此,英雄又是在哪里呢?



本文转自 Wuvist 51CTO博客,原文链接:http://blog.51cto.com/wuvist/847736

相关文章
|
3天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
44 11
|
7天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
39 6
|
8天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
36 3
|
14天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
10天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
20天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
27天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
30 7
|
1月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
1月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
38 2