一个极客开发者讲述移动平台的混合开发经验

发布时间：2020-02-11 04:31:00 阅读：次来源：平开门厂家

作者通过Objective-c+HTML5进行混合开发，制作了一款模拟原生App的应用。用现实点的语言去描述，这款产品完全是以一种Geek的心态去制作，很酷。

文章中的内容没有教你学会怎么去码，也没有教你如何去营收。只是想再一次的告诉你，我们的技术能做什么。

过去一年多的时间，我的大部分精力都在做iOS上的Native+HTML5混合开发，坦白说，没什么成就，一直不好意思提自己的产品，但是失败的经验还是有的。现在我主要的精力在玩，所以我想把这些经验分享出来。后续的文章我将会谈到混合开发的重要经验，包括如何去掉讨厌键盘上的Previous/Next按钮，如果解决HTML5加载白屏的问题，如果加速动画，如果跳过App Store进行升级，本地HTML如何实现AJAX跨域，如何保护Javascript代码等等。如果再有时间，我将会谈到Native/Native+HTML5/HTML三种解决方案的优劣，它们的适应场景，如何进行技术选型等等。

我想说明的是，我在文章中只会谈到一些关键的技术点，不会太深入谈技术问题，也就是说，不会出现代码级的教程。请不要问我要源代码，虽然我做的App很一般，但这就好比虽然我长得不咋的，但我妈也不会愿意把我送人的，代码就是我的孩子，公开总是有点舍不得。不过也许有一天我会选择开源，但还没有开源之前，请不要问我要源码。

无图无真相，我想先上几张图，如果我不说明，各位能看得出这是HTML开发的吗?注意看第一张图的键盘上，没有讨厌的上一项/下一项按钮。点击可以看更多的截图，一共12张，文件有点大，500多K。

这个应用叫钱管家，基于Objective-c+HTML5混合技术开发的，它尽量模拟原生App的体验，基本上可以达到95%以上的水平，目前我觉得除了切换动画之外，其它都非常不错。但模拟始终是模拟，就算99.99%接近，和100%还是有差别的，所以要不要用混合技术开发，和你的产品有关，另外和你的技术团队组成也非常重要。

钱管家这个应用其实很简单，它就是一个简单记账工具，非常简单的记账工具，它只能记录收支和分类。实际上它还有一个姊妹版叫钱管家闪电版，闪电版更加简单，没有分类而且每天只能记一笔。因为对于懒人来说，是不大愿意每一笔都记的，特别是男生会觉得这样很没意思，但每天记录一笔就比较容易了，一天大概花多少钱还是能记得住的。

这个产品我最满意是计算器和在日历上显示金额，算是这个应用的小小创新点吧。在闪电版你是不需要选择支出还是收入的，输入正数判断为收入，负数判断为支出，输入数字就可以完成操作，减少用户操作。另外这个应用可以把数据备份到服务器上去，这个也是Hummer框架的功能之一，所有基于Hummer的应用都可以备份数据到服务器上，当然也是可以恢复的。

从截图上大家可以看到，HTML5在界面表现能力上非常好，要做到同样的效果，用Objective-c要写一大堆代码，而HTML5只需要简单的CSS就能实现。但在动画表现上，Objective-c简单的代码能实现非常华丽的动画，而且非常稳定，CSS3就惨了，不过可以从产品设计上来避免一些动画，减少用户的违和感。钱管家的折线图是用Canvas画的，参考了网上的代码，基本上重写过了，我可真折腾帝啊。

在做钱管家的时候，我已经将iOS元素组件化，尽量用HTML去模拟原生iOS UI控件，如Switch控件、日历控件、按钮、SegmentControl、Datepicker等等，模仿jQuery重写选择器，并扩展了许多功能，比jQueryMobile更加精简。可能有些人会觉得这是一个重复造轮子的过程，为什么我不用jQTouch和PhoneGap呢，因为2011年初PhoneGap还有很多问题，比如说没有解决白屏的问题，jQTouch做普通的App可以，但这显然不是我想要的。再加上技术人员的Geek心态，总想自己能控制一切，所以就自己不自量力地写了。

最初选择HTML5+Native进行混合开发的是因为急用，而自己又不熟悉Objective-c的开发，所以就用UIWebView嵌入了一个手机网站提交到App Store上去了，本地用一个HTML，并用AJAX检查网络是否正常，这个App居然提交审核成功。这样后来就一边学Objective-c一边用HTML进行开发了，自己用Objective-c写了一个叫imBox的框架，用Javascript/CSS3写了一个Hummer的轻量级框架，封装常用控件和数据库操作，以及和imBox之间的交互，调用本地硬件等等，其实就是和PhoneGap差不多的功能，现在做新的App开发算是比较简单了。

我是坚定的HTML5支持者，我坚信Web才是未来，苹果的设备对HTML5的支持非常优秀。特别是的出现，让Javascript可以横扫一切，我目前新实验的一个项目，就是用Javascript开发的，服务器用+MongoDB，我希望最大限度地减少代码量，并且能让它部署到80%的设备上，包括Pad/智能机/各种浏览器扩展/网站/Facebook应用等等。这一年来，我有很多的感触，究竟要用什么技术来开发移动设备App，我觉得要根据自身的业务和技术实力终合考虑，任何一种技术都有它的使用场景，用HTML5+Native做混合开发，技术难度并不比Objective-c低。但是混合开发有它的好处，一是跨平台，二是跳过苹果App Store进行升级。