Hybrid App（混合app）就是將原生技術(shù)（android具温，ios）和前端技術(shù)結(jié)合開(kāi)發(fā)的出來(lái)的app硅则，開(kāi)發(fā)成本冒掌，周期快噪裕，維護(hù)方便，比如我現(xiàn)在的公司就是一前端負(fù)責(zé)一個(gè)app股毫。平均每個(gè)人開(kāi)發(fā)上線(xiàn)的app數(shù)量大于2膳音，有個(gè)部門(mén)更夸張，一個(gè)月上線(xiàn)一個(gè)app铃诬。

初見(jiàn)ionic

我上家公司用的混合框架是ionic 1版本祭陷，在去年2015年的時(shí)候苍凛，那個(gè)時(shí)候apicloud還不是很火，apicloud是從mui分出來(lái)兵志，但是感覺(jué)apicloud再后期發(fā)展比mui要好很多醇蝴，無(wú)論是社區(qū)的活躍度，及官方回復(fù)想罕，修復(fù)更新上悠栓，感覺(jué)都做得很好，因?yàn)槲沂墙衲?016上半年3月才接觸apicloud的按价，那個(gè)時(shí)候惭适，我就是公司的小白鼠，之前公司用的是MUI開(kāi)發(fā)的一個(gè)農(nóng)產(chǎn)品電商app（貌似也是一個(gè)妹子開(kāi)發(fā)出來(lái)的俘枫，也不是獨(dú)立腥沽，還有其他人配合），我看了下鸠蚪，感覺(jué)效果比我用ionic開(kāi)發(fā)的要好很多今阳。

ionic我們之前開(kāi)發(fā)的是一個(gè)視頻娛樂(lè)類(lèi)型的app，可以給視頻配音什么茅信，基本上都是用的h5技術(shù)盾舌，也就是前端技術(shù)，webview怎么說(shuō)呢蘸鲸，性能不是很好妖谴，很多槽點(diǎn)，特么是加載大量圖片酌摇，或者有動(dòng)畫(huà)效果的時(shí)候膝舅，會(huì)有點(diǎn)卡，比如閃一下窑多，初次加載頁(yè)面時(shí)間長(zhǎng)仍稀，每次boss讓解決這些問(wèn)題都是腦殼痛，而且ionic是基于angular這樣的大型前端框架埂息，在手機(jī)上跑起來(lái)技潘，特別是android機(jī)，真的很蛋疼千康。當(dāng)時(shí)我們一共是4個(gè)人開(kāi)發(fā)維護(hù)一個(gè)app享幽，我們組長(zhǎng)主要是架構(gòu)整個(gè)app，一個(gè)妹子負(fù)責(zé)寫(xiě)頁(yè)面樣式拾弃，一個(gè)負(fù)責(zé)ios值桩，android方面的問(wèn)題，比如打包豪椿，編譯什么的奔坟。我負(fù)責(zé)js數(shù)據(jù)這塊斯入，也就是angular里面controller和servers這部分，寫(xiě)寫(xiě)接口文檔蛀蜜，和接第三sdk，當(dāng)時(shí)還對(duì)接了而一個(gè)百度地圖的sdk增蹭，看相關(guān)技術(shù)文檔滴某，及各種頭疼的配置文件也是躺了不少坑。因?yàn)閕onic想到于有三層滋迈，1.最上面那層是當(dāng)然就是一個(gè)瀏覽器霎奢，這個(gè)大家不默認(rèn)吧 ?2.中間那層就是cordova（cordova的前身就是眾所周知的phonegap），他的作用就相當(dāng)于把原生和瀏覽器連接起來(lái)饼灿，這中間當(dāng)然少不了很多配置文件幕侠，所以，我很多時(shí)候看那些java的配置文件是崩潰的碍彭。3晤硕。最底層就不說(shuō)了，就是ios和android庇忌，反正我也不是很懂他們舞箍。

成功上線(xiàn)，性能待優(yōu)

也許當(dāng)時(shí)在成都皆疹，混合app大家都是小白疏橄，4個(gè)人開(kāi)發(fā)起來(lái)真的還是蠻吃力，特別是我和寫(xiě)頁(yè)面的妹子略就，總感覺(jué)有修復(fù)不玩的bug捎迫。ionic和angular都不說(shuō)，歪果仁搞的框架表牢，全程看英文文檔窄绒，因?yàn)橹形奈臋n很多時(shí)候解釋不清楚，逼得沒(méi)法了初茶，還是只有特么去看英文文檔颗祝，特別是ionic，（angular中文社區(qū)還算比較成熟）恼布。遇到很多未知的問(wèn)題螺戳，也只有翻墻去goole英文社區(qū)搜答案，真的是自己挖的坑折汞，哭著也要填完倔幼。當(dāng)然也沒(méi)少加班，不過(guò)說(shuō)真的爽待，還挺懷戀那段時(shí)光损同，學(xué)到了很多東西翩腐，關(guān)鍵是解決問(wèn)題的能力。特別整合搜索關(guān)鍵詞的能力膏燃，無(wú)論中文還是英文茂卦，同樣一個(gè)問(wèn)題，我們組長(zhǎng)就很輕而易舉搜到他想要的答案组哩，而我搜半天等龙，也沒(méi)找到想要的東西！最后跌跌撞撞還是上線(xiàn)了那個(gè)app伶贰。后來(lái)我們離職后蛛砰，他們還是決定用原生開(kāi)發(fā)，畢竟是一個(gè)比較復(fù)雜的視頻類(lèi)娛樂(lè)app黍衙。想要高性功能泥畅，還是原生吧（那個(gè)時(shí)候他們還不知道有apicloud，他們估計(jì)也不想嘗試了）

偶然巧遇琅翻，Apicloud

曾經(jīng)滄海難為水位仁。辭掉工作后，我來(lái)到了這家公司方椎，和cto聊的時(shí)候障癌，了解到當(dāng)時(shí)他們想搞一個(gè)旅游在線(xiàn)app，想用混合app框架apicloud搞辩尊，我想搞就搞涛浙，這些框架無(wú)非也就大同小異，理論上說(shuō)不存在人類(lèi)無(wú)法理解的框架摄欲。大部分還是要看官方文檔轿亮。但是聽(tīng)到說(shuō)我要一個(gè)人弄一個(gè)app的時(shí)候，說(shuō)實(shí)話(huà)胸墙，我還是懵逼半秒鐘我注，，但是都想過(guò)放棄的這家公司的迟隅〉牵回去后，我就去官網(wǎng)看智袭，用了不到半個(gè)小時(shí)奔缠，就在android機(jī)上跑起了一個(gè)hello world 的app。信心大增吼野。于是我就加入了我現(xiàn)在的公司校哎，原本以為有人帶，結(jié)果，其他人都沒(méi)用過(guò)這玩意闷哆。我又只有哭著去看視頻和文檔腰奋，但是cto還花重金給我買(mǎi)了一個(gè)apicloud的視頻直播教學(xué)（至少700大洋），講道理抱怔，我沒(méi)用看完一個(gè)直播劣坊。有一個(gè)我甚至看睡著了。說(shuō)實(shí)話(huà)屈留，那個(gè)時(shí)候壓力還是大讼稚，簡(jiǎn)直就是一邊開(kāi)發(fā)一邊學(xué)。其實(shí)官網(wǎng)上幾個(gè)免費(fèi)的視頻绕沈，完全夠了，比起看視頻帮寻，還是看文檔來(lái)的快和直接乍狐。

原來(lái)都一樣

慢慢的我也漸漸對(duì)apicloud有了一點(diǎn)深入的了解（結(jié)合以前的經(jīng)驗(yàn)）。原則上固逗，apicloud 和ionic或者mui是沒(méi)得啥子區(qū)別的浅蚪，就是原生混合前端，簡(jiǎn)單點(diǎn)說(shuō)烫罩，就是在你的app上打了一個(gè)瀏覽器窗口進(jìn)去惜傲，之前那家公司，我們也給四川電信原生app做插件贝攒，實(shí)踐上就是原生應(yīng)用上的一個(gè)瀏覽器窗口盗誊，原生應(yīng)用可以控制流浪器的窗口的大小和透明度之類(lèi)的，也可以透?jìng)鲾?shù)據(jù)給瀏覽器隘弊，比如在用戶(hù)看視頻的時(shí)候彈出個(gè)廣告哈踱，或者文章簡(jiǎn)紹，其實(shí)就是打開(kāi)一個(gè)瀏覽器窗口梨熙。實(shí)現(xiàn)了ios开镣，android的兼容。講道理咽扇，瀏覽器真是個(gè)好東西邪财，瀏覽器的w3c標(biāo)準(zhǔn)已經(jīng)很規(guī)范了，可以實(shí)現(xiàn)跨終端质欲，跨設(shè)備的树埠。只要你的設(shè)備上有一個(gè)按標(biāo)準(zhǔn)實(shí)現(xiàn)的瀏覽器。當(dāng)時(shí)嘶伟，我之前那個(gè)公司還和四川電信合作弥奸，在EPG（電子節(jié)目選擇單）上加彈廣告功能，其實(shí)原理適合做一個(gè)app插件一樣的奋早。就是機(jī)頂盒上內(nèi)置了一個(gè)瀏覽器盛霎，只是操作他的是遙控板赠橙，所以，epg上也有很多獨(dú)特的標(biāo)準(zhǔn)和接口愤炸，當(dāng)時(shí)也是看了很多標(biāo)準(zhǔn)文件期揪，也是腦殼痛。

UI等其他原聲模塊规个，再也不用擔(dān)心性能問(wèn)題

額凤薛，不小心又講了那么多，其實(shí)apicloud也一樣诞仓，但是它封裝得很好缤苫，很多原生控件簡(jiǎn)直就是0耦合性，添加墅拭，配置管理起來(lái)也是極好的活玲。比如你的首頁(yè)要用一個(gè)輪播的banner，你就可以直接在控制臺(tái)（模塊谍婉，這里他一個(gè)原生組件舒憾，就是一個(gè)封裝好的模塊，有專(zhuān)門(mén)的文檔簡(jiǎn)紹調(diào)用方法穗熬，只有認(rèn)真看文檔镀迂，很快的）添加該模塊。這種原生的動(dòng)畫(huà)效果唤蔗，從根本上解決了性能問(wèn)題探遵，而且大大減少了前端的工作量。當(dāng)然妓柜，不好的地方就是樣式自定義選擇不多别凤，有是有，選擇不多领虹。apicloud官網(wǎng)上有很多這種動(dòng)畫(huà)類(lèi)的原生模塊规哪，有免費(fèi)的也有付費(fèi)的，當(dāng)時(shí)cto買(mǎi)課程的送了一個(gè)原生模塊塌衰，但是我都沒(méi)用诉稍，類(lèi)似聯(lián)系人的list那種樣式（cto非要我找個(gè)地方加進(jìn)去，可是我真沒(méi)得地方用這玩意白罱）杯巨，對(duì)接第三方sdk更是輕而易舉了，按官方文檔配置起走努酸，半個(gè)小時(shí)就可以和后端對(duì)接一個(gè)第三方sdk（比如第三方登錄服爷，第三方支付功能什么的）

云端管理，白癡都能開(kāi)發(fā)

除了apicloud的原生模塊，apicloud的云端也是做得很好仍源，很好用的就是編譯打包心褐，只要將證書(shū)上傳至云端，白癡式一鍵云端編譯打包笼踩。apicloud上面還可以一鍵創(chuàng)建生成android證書(shū)逗爹，至于ios，是ios工程師不曉得去哪里申請(qǐng)創(chuàng)建的嚎于。我們這個(gè)實(shí)際上是配了一個(gè)ios和android工程師的掘而，四個(gè)部門(mén)共享他們兩個(gè)，當(dāng)時(shí)他們做了個(gè)自定義的環(huán)信客服聊天界面的sdk于购。講道理挺好用的袍睡，他們也是按官網(wǎng)文檔開(kāi)發(fā)的模塊，理論上說(shuō)和官方的標(biāo)準(zhǔn)模塊沒(méi)區(qū)別肋僧。簡(jiǎn)直給我省去了很大的工作量斑胜，而且我們四個(gè)部門(mén)都可以用。

一鍵云端編譯色瘩，一人把控

在云端用正式證書(shū)編譯出來(lái)的包可以直接上線(xiàn)的，android是上應(yīng)用寶逸寓，ios我們這邊上線(xiàn)用的是testflight居兆。因?yàn)槲沂莔ac環(huán)境，我有xcode竹伸，所以這邊ios我編譯好包泥栖，都是自己用xcode的Application Loader上線(xiàn)測(cè)試，測(cè)試通過(guò)就直接提app store勋篓。理論上說(shuō)我是一個(gè)人維護(hù)兩個(gè)版本的全部流程吧享。

謝謝觀看！

e譬嚣，apicloud就先簡(jiǎn)紹到這來(lái)吧钢颂，我還會(huì)持續(xù)更新！O(∩_∩)O~~