【編者按】本文發(fā)布于@涂雅 的個(gè)人博客。作者通過(guò)Objective-c+HTML5進(jìn)行混合開(kāi)發(fā)，制作了一款模擬原生App的應(yīng)用。用現(xiàn)實(shí)點(diǎn)的語(yǔ)言去描述，這款產(chǎn)品完全是以一種Geek的心態(tài)去制作，很酷。

　　文章中的內(nèi)容沒(méi)有教你學(xué)會(huì)怎么去碼，也沒(méi)有教你如何去營(yíng)收。只是想再一次的告訴你，我們的技術(shù)能做什么。

　　過(guò)去一年多的時(shí)間，我的大部分精力都在做iOS上的Native+HTML5混合開(kāi)發(fā)，坦白說(shuō)，沒(méi)什么成就，一直不好意思提自己的產(chǎn)品，但是失敗的經(jīng)驗(yàn)還是有的。現(xiàn)在我主要的精力在玩Node.JS， 所以我想把這些經(jīng)驗(yàn)分享出來(lái)。后續(xù)的文章我將會(huì)談到混合開(kāi)發(fā)的重要經(jīng)驗(yàn)，包括如何去掉討厭鍵盤上的Previous/Next按鈕，如果解決HTML5加載白屏的問(wèn)題，如果加速動(dòng)畫(huà)，如果跳過(guò)App Store進(jìn)行升級(jí)，本地HTML如何實(shí)現(xiàn)AJAX跨域，如何保護(hù)Javascript代碼等等。如果再有時(shí)間，我將會(huì)談到Native/Native+HTML5/HTML三種解決方案的優(yōu)劣，它們的適應(yīng)場(chǎng)景，如何進(jìn)行技術(shù)選型等等。

　　我想說(shuō)明的是，我在文章中只會(huì)談到一些關(guān)鍵的技術(shù)點(diǎn)，不會(huì)太深入談技術(shù)問(wèn)題，也就是說(shuō)，不會(huì)出現(xiàn)代碼級(jí)的教程。請(qǐng)不要問(wèn)我要源代碼，雖然我做的App很一般，但這就好比雖然我長(zhǎng)得不咋的，但我媽也不會(huì)愿意把我送人的，代碼就是我的孩子，公開(kāi)總是有點(diǎn)舍不得。不過(guò)也許有一天我會(huì)選擇開(kāi)源，但還沒(méi)有開(kāi)源之前，請(qǐng)不要問(wèn)我要源碼。

　　無(wú)圖無(wú)真相，我想先上幾張圖，如果我不說(shuō)明，各位能看得出這是HTML開(kāi)發(fā)的嗎?注意看第一張圖的鍵盤上，沒(méi)有討厭的上一項(xiàng)/下一項(xiàng)按鈕。點(diǎn)擊可以看更多的截圖，一共12張，文件有點(diǎn)大，500多K。

　　這個(gè)應(yīng)用叫錢管家，基于Objective-c+HTML5混合技術(shù)開(kāi)發(fā)的，它盡量模擬原生App的體驗(yàn)，基本上可以達(dá)到95%以上的水平，目前我覺(jué)得除了切換動(dòng)畫(huà)之外，其它都非常不錯(cuò)。但模擬始終是模擬，就算99.99%接近，和100%還是有差別的，所以要不要用混合技術(shù)開(kāi)發(fā)，和你的產(chǎn)品有關(guān)，另外和你的技術(shù)團(tuán)隊(duì)組成也非常重要。

　　錢管家這個(gè)應(yīng)用其實(shí)很簡(jiǎn)單，它就是一個(gè)簡(jiǎn)單記賬工具，非常簡(jiǎn)單的記賬工具，它只能記錄收支和分類。實(shí)際上它還有一個(gè)姊妹版叫錢管家閃電版，閃電版更加簡(jiǎn)單，沒(méi)有分類而且每天只能記一筆。因?yàn)閷?duì)于懶人來(lái)說(shuō)，是不大愿意每一筆都記的，特別是男生會(huì)覺(jué)得這樣很沒(méi)意思，但每天記錄一筆就比較容易了，一天大概花多少錢還是能記得住的。

　　這個(gè)產(chǎn)品我最滿意是計(jì)算器和在日歷上顯示金額，算是這個(gè)應(yīng)用的小小創(chuàng)新點(diǎn)吧。在閃電版你是不需要選擇支出還是收入的，輸入正數(shù)判斷為收入，負(fù)數(shù)判斷為支出，輸入數(shù)字就可以完成操作，減少用戶操作。另外這個(gè)應(yīng)用可以把數(shù)據(jù)備份到服務(wù)器上去，這個(gè)也是Hummer框架的功能之一，所有基于Hummer的應(yīng)用都可以備份數(shù)據(jù)到服務(wù)器上，當(dāng)然也是可以恢復(fù)的。

　　從截圖上大家可以看到，HTML5在界面表現(xiàn)能力上非常好，要做到同樣的效果，用Objective-c要寫一大堆代碼，而HTML5只需要簡(jiǎn)單的CSS就能實(shí)現(xiàn)。但在動(dòng)畫(huà)表現(xiàn)上，Objective-c簡(jiǎn)單的代碼能實(shí)現(xiàn)非常華麗的動(dòng)畫(huà)，而且非常穩(wěn)定，CSS3就慘了，不過(guò)可以從產(chǎn)品設(shè)計(jì)上來(lái)避免一些動(dòng)畫(huà)，減少用戶的違和感。錢管家的折線圖是用Canvas畫(huà)的，參考了網(wǎng)上的代碼，基本上重寫過(guò)了，我可真折騰帝啊。

　　在做錢管家的時(shí)候，我已經(jīng)將iOS元素組件化，盡量用HTML去模擬原生iOS UI控件，如Switch控件、日歷控件、按鈕、SegmentControl、Datepicker等等，模仿jQuery重寫選擇器，并擴(kuò)展了許多功能，比jQueryMobile更加精簡(jiǎn)。可能有些人會(huì)覺(jué)得這是一個(gè)重復(fù)造輪子的過(guò)程，為什么我不用jQTouch和PhoneGap呢，因?yàn)?011年初PhoneGap還有很多問(wèn)題，比如說(shuō)沒(méi)有解決白屏的問(wèn)題，jQTouch做普通的App可以，但這顯然不是我想要的。再加上技術(shù)人員的Geek心態(tài)，總想自己能控制一切，所以就自己不自量力地寫了。

　　最初選擇HTML5+Native進(jìn)行混合開(kāi)發(fā)的是因?yàn)榧庇茫约河植皇煜bjective-c的開(kāi)發(fā)，所以就用UIWebView嵌入了一個(gè)手機(jī)網(wǎng)站提交到App Store上去了，本地用一個(gè)HTML，并用AJAX檢查網(wǎng)絡(luò)是否正常，這個(gè)App居然提交審核成功。這樣后來(lái)就一邊學(xué)Objective-c一邊用HTML進(jìn)行開(kāi)發(fā)了，自己用Objective-c寫了一個(gè)叫imBox的框架，用Javascript/CSS3寫了一個(gè)Hummer的輕量級(jí)框架，封裝常用控件和數(shù)據(jù)庫(kù)操作，以及和imBox之間的交互，調(diào)用本地硬件等等，其實(shí)就是和PhoneGap差不多的功能，現(xiàn)在做新的App開(kāi)發(fā)算是比較簡(jiǎn)單了。

　　我是堅(jiān)定的HTML5支持者，我堅(jiān)信Web才是未來(lái)，蘋果的設(shè)備對(duì)HTML5的支持非常優(yōu)秀。特別是Node.js的出現(xiàn)，讓Javascript可以橫掃一切，我目前新實(shí)驗(yàn)的一個(gè)項(xiàng)目，就是用Javascript開(kāi)發(fā)的，服務(wù)器用Node.js+MongoDB，我希望最大限度地減少代碼量，并且能讓它部署到80%的設(shè)備上，包括Pad/智能機(jī)/各種瀏覽器擴(kuò)展/網(wǎng)站/Facebook應(yīng)用等等。這一年來(lái)，我有很多的感觸，究竟要用什么技術(shù)來(lái)開(kāi)發(fā)移動(dòng)設(shè)備App，我覺(jué)得要根據(jù)自身的業(yè)務(wù)和技術(shù)實(shí)力終合考慮，任何一種技術(shù)都有它的使用場(chǎng)景，用HTML5+Native做混合開(kāi)發(fā)，技術(shù)難度并不比Objective-c低。但是混合開(kāi)發(fā)有它的好處，一是跨平臺(tái)，二是跳過(guò)蘋果App Store進(jìn)行升級(jí)。

　　原文鏈接：聊一聊我在移動(dòng)平臺(tái)混合開(kāi)發(fā)的經(jīng)驗(yàn)