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

相关文章
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
8天前
|
安全 JavaScript 前端开发
小游戏源码开发之可跨app软件对接是如何设计和开发的
小游戏开发团队常需应对跨平台需求,为此设计了成熟的解决方案。流程涵盖游戏设计、技术选型、接口设计等。首先明确游戏功能与特性,选择合适的技术架构和引擎(如Unity或Cocos2d-x)。接着设计通用接口,确保与不同App的无缝对接,并制定接口规范。开发过程中实现游戏逻辑和界面,完成登录、分享及数据对接功能。最后进行测试优化,确保兼容性和性能,发布后持续维护更新。
|
10天前
|
前端开发 Java 测试技术
语音app系统软件源码开发搭建新手启蒙篇
在移动互联网时代,语音App已成为生活和工作的重要工具。本文为新手开发者提供语音App系统软件源码开发的启蒙指南,涵盖需求分析、技术选型、界面设计、编码实现、测试部署等关键环节。通过明确需求、选择合适的技术框架、优化用户体验、严格测试及持续维护更新,帮助开发者掌握开发流程,快速搭建功能完善的语音App。
|
11天前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
884 14
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
12天前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
68 8
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55