整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天小編給大家講講APP開發(fā)的事情。
APP就是手機(jī)里面的應(yīng)用軟件，對于大多數(shù)沒做過研發(fā)的朋友，對內(nèi)中細(xì)節(jié)還不是太了解。但是既然已經(jīng)考慮要做獨(dú)立APP，想做出一番事業(yè)來，有些東西還是需要了解一下的。
從研發(fā)的角度講，開發(fā)一款A(yù)PP，選擇不同思維開發(fā)模式，無論時間成本還是研發(fā)成本，差異都是相當(dāng)大的。從客戶的角度，使用功能、實(shí)際體驗(yàn)和后期效果，差異就更大了。
APP的開發(fā)模式
目前市場主流的APP分三種：原生APP、WebAPP和混合APP三種，這里對三者的區(qū)別進(jìn)行下詳細(xì)分析。
原生APP
原生APP是什么？原生APP就是利用Android、iOS平臺官方的開發(fā)語言、開發(fā)類庫、工具進(jìn)行開發(fā)。比如安卓的java語言，iOS的object-c 語言。在應(yīng)用性能上和交互體驗(yàn)上應(yīng)該是好的。
優(yōu)點(diǎn)：
1.可訪問手機(jī)所有功能、可實(shí)現(xiàn)功能齊全。
2.運(yùn)行速度快、性能高，有較強(qiáng)的用戶體驗(yàn)。
3.應(yīng)用性能和交互體驗(yàn)是最好的。
4.比較快捷地使用設(shè)備端提供的接口，處理速度上有優(yōu)勢。
缺點(diǎn)：
研發(fā)成本高、周期長，特別是一款原生的App，Android和IOS都要各自開發(fā)，同樣的邏輯、界面要寫兩套。各個廠家不同機(jī)型都要做適配。
Web版APP
本質(zhì)就是瀏覽器功能的疊加，用普通Web開發(fā)語言開發(fā)的，通過瀏覽器運(yùn)行。
優(yōu)勢：
1、支持范圍廣；
2、開發(fā)成本低、周期短。
缺點(diǎn)：
1、對聯(lián)網(wǎng)要求高，離線不能做任何操作；
2、由于Web技術(shù)本身的限制，H5移動應(yīng)用不能直接訪問設(shè)備硬件和離線存儲，所以在體驗(yàn)和性能上有很大的局限性
3、運(yùn)行速度慢，頁面不能承載太多東西；
4、后期用戶量的增加，用戶訪問次數(shù)的增大，服務(wù)器的承載負(fù)荷會不斷增大。
5、如果用戶使用更多的新型瀏覽器，那么就會出現(xiàn)運(yùn)行問題。
混合開發(fā)
即利用了原生APP的開發(fā)技術(shù)還應(yīng)用了HTML5開發(fā)技術(shù)，是原生和HTML5技術(shù)的混合應(yīng)用。混合比例不限。
優(yōu)點(diǎn)：
1、比web版實(shí)現(xiàn)功能多；
2、兼容多平臺；
3、可離線運(yùn)行；
缺點(diǎn)：
1、用戶體驗(yàn)不如本地應(yīng)用；
2、性能稍慢（需要連接網(wǎng)絡(luò)）；
3、技術(shù)還不是很成熟。
選最適合自己的
筆者拿旅游做下比較，對比這三種APP開發(fā)模式，也許不是很恰當(dāng)，但大家能理解就好。
就拿馬上要來的國慶黃金周來說吧。
原生開發(fā)相當(dāng)于選擇出行旅游，花費(fèi)時間長，旅游成本也高，獲得的體驗(yàn)是真實(shí)的。總的來說就是苦，累，花錢也多。但大都數(shù)人都喜歡，問題是缺錢。
WEBAPP就簡單了，待在家看電視就行。根本不用去現(xiàn)場，想看就看，省錢還舒服，短時間內(nèi)周游全球都不是問題。
混合開發(fā)就復(fù)雜點(diǎn)了，就是去電影院看場電影，不過這個電影也不一樣，有大屏幕的，也有3D的，有的甚至增加動感座椅，環(huán)境特效等等。待在電影院就能從聽覺、視覺、達(dá)到強(qiáng)大的逼真感。
國慶長假怎么過？大家準(zhǔn)備好了嗎？是待在家里？還是去電影院？或者來一場一場說走就走的旅行。選擇APP其實(shí)也一樣，每種都有一定的需求群體。結(jié)合自己的能力、財力、需求，選擇最適合自己的就好。
旅游雖然累點(diǎn)，但是如果免費(fèi)，估計大多數(shù)人還是不會拒絕的。
原生APP一般都貴，要是能免費(fèi)，又會有多少人拒絕呢？
ybrid App主要以JS+Native兩者相互調(diào)用為主，從開發(fā)層面實(shí)現(xiàn)“一次開發(fā)，多處運(yùn)行”的機(jī)制，成為真正適合跨平臺的開發(fā)。Hybrid App兼具了Native App良好用戶體驗(yàn)的優(yōu)勢，也兼具了Web App使用HTML5跨平臺開發(fā)低成本的優(yōu)勢。
目前已經(jīng)有眾多Hybrid App開發(fā)成功應(yīng)用，比如美團(tuán)、愛奇藝、微信等知名移動應(yīng)用，都是采用Hybrid App開發(fā)模式。
2、移動應(yīng)用開發(fā)的三種方式比較
移動應(yīng)用開發(fā)的方式，目前主要有三種：
Native App： 本地應(yīng)用程序（原生App）
Web App：網(wǎng)頁應(yīng)用程序（移動web）
Hybrid App：混合應(yīng)用程序（混合App）
圖1：三種移動應(yīng)用開發(fā)方式
如圖1所示，三種移動應(yīng)用開發(fā)方式具體比較如表2所示：
表2：三種移動應(yīng)用開發(fā)方式比較
3、混合開發(fā)應(yīng)用場景
（1）折中考慮——如果企業(yè)使用 Hybrid 開發(fā)方法，就能集Native 和web兩者之所長。一方面，Native 讓開發(fā)者可以充分利用現(xiàn)代移動設(shè)備所提供的全部不同的特性和功能。另一方面，使用 Web 語言編寫的所有代碼都可以在不同的移動平臺之間共享，使得開發(fā)和日常維護(hù)過程變得集中式、更簡短、更經(jīng)濟(jì)高效。
（2）內(nèi)部技能——許多企業(yè)都擁有Web 開發(fā)技能。如果選擇 Hybrid 開發(fā)方法，在合適解決方案的支持下，Web 開發(fā)者只要僅僅運(yùn)用 HTML、CSS 和 JavaScript 等 Web 技能，就能構(gòu)建 App，同時提供 Native 用戶體驗(yàn)。
（3）考慮未來——HTML5的可用性和功能都在迅速改進(jìn)。許多分析師預(yù)測，它可能會成為開發(fā)前端 App 的默認(rèn)技術(shù)。如果用 HTML 來編寫 App 的大部分代碼，并且只有在需要時才使用 Native 代碼，公司就能確保他們今天的投入在明天不會變得過時，因?yàn)?HTML 功能變得更豐富，可以滿足現(xiàn)代企業(yè)一系列更廣泛的移動要求。
4、混合開發(fā)框架和層次結(jié)構(gòu)圖
混合開發(fā)結(jié)構(gòu)圖
1）移動終端web殼（以下簡稱“殼”）：殼是使用操作系統(tǒng)的 API 來創(chuàng)建嵌入式 HTML的渲染引擎。殼主要功能是定義Android應(yīng)用程序與網(wǎng)頁之間的接口，允許網(wǎng)頁中的JavaScript調(diào)用Android應(yīng)用程序，提供基于web的應(yīng)用程序的Android API，將Web嵌入到Android應(yīng)用程序中。
2）前端交互js：包括基礎(chǔ)功能js和業(yè)務(wù)功能js。
3）前端適配器：適配不同的終端：Pad、android、ios、wap。
混合開發(fā)層次結(jié)構(gòu)圖
1） 頁面加載
頁面容器（XdjaWebView）類，是整個框架的核心和基礎(chǔ)，主要用來實(shí)現(xiàn)頁面的加載，以及對頁面加載完成后的后續(xù)操作提供支持，例如：文件下載、js支持、文件上傳，數(shù)據(jù)緩存、進(jìn)度條等；
頁面加載接口：對頁面的加載過程進(jìn)行跟蹤；例如：頁面加載進(jìn)度百分比，頁面開始加載、頁面加載出錯、頁面加載完成等
2） JS調(diào)用Android功能
網(wǎng)頁：頁面調(diào)用js接口中的具體方法；
JS接口：調(diào)用android接口中一一對應(yīng)的具體方法；
android接口：直接調(diào)用框架中集成的功能，或者通過框架接口在應(yīng)用系統(tǒng)中自定義功能（例如，退出、返回鍵響應(yīng)等)；其中升級功能的返回結(jié)果或者過程信息，可以在客戶端中通過升級接口獲取。
XdjaClientHelper：如果需要將框架中的方法返回值通知給js方法，你們可以通過XdjaClientHelper類來實(shí)現(xiàn)；
3）應(yīng)用系統(tǒng)調(diào)用JS功能
應(yīng)用系統(tǒng)通過XdjaClientHelper來實(shí)現(xiàn)對js功能的調(diào)用；
4） 應(yīng)用系統(tǒng)調(diào)用HDF功能
應(yīng)用系統(tǒng)可以調(diào)用框架集成的工具類、消息提示框、升級模塊以及手機(jī)上常見的打電話發(fā)短信等功能。
5、性能優(yōu)化
1） 單個頁面
登錄、首頁以及共用代碼（樣式文件、JS文件、頁面加載loading代碼）等放在index頁面里。頁面展示前顯示fake頁面（過場頁面），首屏加載完后，fake頁面消失。
頁面雖然按照業(yè)務(wù)模塊分為不同的頁面，但是展示的時候會在同一個頁面即index頁面展示。具體的說，需要某個功能頁面的時候?qū)㈨撁嬉訟JAX的形式請求到index頁面，使用完畢刪除。
使用一個頁面，公共的CSS和JS只會加載一次。
2）CSS、JavaScript
在本次混合開發(fā)框架開發(fā)中，CSS全部寫在一個文件里。
CSS和Jquery Mobile的相關(guān)文件寫在index頁面頭部，其余公用JS等寫在index頁面底部。防止JS阻塞頁面加載。各業(yè)務(wù)邏輯JS寫在各業(yè)務(wù)頁面的底部。
開發(fā)完成后，CSS和JS需要進(jìn)行壓縮，減少用戶使用時初次請求時間。
3） @font-face
本次混合開發(fā)中使用@font-face來實(shí)現(xiàn)圖標(biāo)字體化，統(tǒng)一控制圖標(biāo)的顏色和大小。
使用@font-face優(yōu)點(diǎn)：減少頁面因使用圖片而帶來的流量，大大縮短頁面響應(yīng)時間；圖標(biāo)可以隨意改變大小和顏色，而不會導(dǎo)致失真。
使用時注意：所有的圖標(biāo)需要是矢量的SVG格式。
使用限制：只適用于純色扁平化的圖標(biāo)。背景圖等比較復(fù)雜的圖片仍然使用圖片。
4） 本地存儲LocalStorage
HTML5本地存儲LocalStorage，在混合開發(fā)中主要用來存儲最近查詢記錄等。
拿首頁最近查詢來說，用戶每次在綜合查詢中點(diǎn)擊一個模塊，通過LocalStorage將圖標(biāo)和對應(yīng)的功能名字存儲起來，如果用戶不清除，LocalStorage中的數(shù)據(jù)是一直存在本地的。下次打開應(yīng)用的時候從LocalStorage中讀取最近查詢記錄等。
使用LocalStorage的好處是，不進(jìn)行后臺交互，速度快。
5）異步AJAX
本次開發(fā)中多處實(shí)現(xiàn)都是通過使用AJAX。首先，顯示頁面時，先顯示框架，然后異步加載內(nèi)容；其次，分頁功能中，先顯示部分簡項(xiàng)列表，上拉獲取更多內(nèi)容。再次，每打開一個新功能，頁面以AJAX的形式獲取新頁面的內(nèi)容并展示出來。
異步AJAX，交互體驗(yàn)更好。從性能的角度考慮，速度也更快。
5是玩互聯(lián)網(wǎng)的一個熱詞，搞移動開發(fā)的嫌它效率不夠高、做市場營銷的卻用得風(fēng)生水起。
整天聽人說H5，概念倒是火，應(yīng)用跟得上嗎？它到底行不行？所幸網(wǎng)上出了很多有關(guān)它的“論斷”，反倒能幫助我們“撥開云霧見青天”。
.
論斷一：H5炒了n年了。
最近人工智能肯定火，根據(jù)百度指數(shù)，這個詞近7天的搜索指數(shù)是8000多，最高有近2萬，但李世石這5場比賽前只有2000幾。
H5和HTML5卻長期穩(wěn)定在9000多，它的概念不是炒出來的，是實(shí)實(shí)在在應(yīng)用廣、有人持續(xù)在關(guān)注，人工智能這種緊跟時事起起落落的才算炒出來的。
.
論斷二：一直沒火起來，沒救了。
現(xiàn)在一般提起H5，就是在移動端傳播的微信H5頁面。國內(nèi)H5頁面制作平臺iH5產(chǎn)出的H5，最高一天能達(dá)到5億PV，最低也在一億頁面瀏覽上下。火不火？火。
如果要比應(yīng)用HTML5的網(wǎng)站，還真別說，國內(nèi)知名網(wǎng)站多了去了。百度？是。QQ？是。淘寶？是。新浪？門戶和微博都是。優(yōu)酷？還是。
.
論斷三：流量什么的全部免費(fèi)就有可能，否則這是一紙空談。
這句話是說因?yàn)榱髁窟@個大難題，H5網(wǎng)頁不能取代原生APP。所以你為了看視頻下了個××視頻的APP后，會燒你的移動商運(yùn)營流量，去看短片消磨長電影嗎？你的APP也是趁有WIFI的時候下的吧？
現(xiàn)在沒有網(wǎng)絡(luò)，手機(jī)上也沒幾個APP真的能用，頂多看看本地緩存的電子書和視頻。流量費(fèi)用降低是當(dāng)前的趨勢，而H5會隨著入口的完善，一步步蠶食APP的份額。
.
論斷四：你想讓我每次打開一個應(yīng)用要重新加載？你是不是移動臥底，我還是很支持APP，有固定的模塊，離線都能用。
HTML5也支持本地存儲服務(wù)，能提供存儲于客戶端、不隨頁面刷新而消失、不回傳至服務(wù)器的離線存儲。
.
論斷五：沒有實(shí)用價值的體現(xiàn)，行業(yè)場景應(yīng)用少。
如果出現(xiàn)一個HTML5應(yīng)用市場，能取代你大多數(shù)APP的功能，還都不用下載，你用不用？現(xiàn)在H5網(wǎng)頁缺的是一個集大成者式的入口，像APP Store激發(fā)APP的開發(fā)一樣，去催生H5網(wǎng)頁的生產(chǎn)。
前陣子微信說要出一個微信應(yīng)用號，作為企業(yè)號的升級版，就是想打造這樣的輕應(yīng)用市場。
.
論斷六：HTML5很簡單，但是要運(yùn)用起來，做出來一個作品，難。
你當(dāng)研發(fā)近10年做出來的可視化平臺iH5.cn是擺設(shè)？在可視化編程的幫助下，H5頁面的制作只會越來越容易。手指按住屏幕的時間長短、手勢擦除面積的大小、數(shù)據(jù)的提交和判斷，這些都能通過圖形化界面的操作+簡單配置實(shí)現(xiàn)。
就算做一個數(shù)據(jù)管理系統(tǒng)，iH5也能提供模板，感興趣可參見文章：一個團(tuán)隊協(xié)作Web APP可能引發(fā)的互聯(lián)網(wǎng)革命。（此處是理直氣壯的廣告）
.
論斷七：手機(jī)上有幾個人愿意開瀏覽器？那么點(diǎn)大的屏幕，花花綠綠的網(wǎng)頁體驗(yàn)比APP差遠(yuǎn)了。
手機(jī)屏幕大小是一定的，瀏覽器網(wǎng)頁不一定是花花綠綠的，UI渣你去噴設(shè)計師。假設(shè)你打開微信的頻率比瀏覽器APP高，難不成你不知道微信有內(nèi)置瀏覽器？
.
論斷八：你拿出HTML的Web APP還好意思去談融資？還好意思談市值？
當(dāng)智能手機(jī)還沒流行、APP還沒形成市場的時候，我們還在用軟件去談融資、搞市值。當(dāng)然，現(xiàn)在都玩APP了，軟件反而很少聽到有什么新聞了，做軟件的都去做APP了。
只要用戶做高了，是不是基于Web不是問題。
.
論斷九：H5的開發(fā)和維護(hù)成本低，很多公司已經(jīng)轉(zhuǎn)向H5了，尤其創(chuàng)業(yè)公司用H5的越來越多。
隨便打開一個網(wǎng)頁，國內(nèi)外都行，看看第一行文檔聲明是不是“<!DOCTYPE html>”，“是”就多少用了HTML5。
很多公司轉(zhuǎn)H5，就是互聯(lián)網(wǎng)服務(wù)平臺，但更多用H5的公司目前還是用它去做市場營銷，利用社交傳播去打市場。創(chuàng)業(yè)公司多的是提供H5在線制作服務(wù)的平臺，而且近兩年融資成功的案例也不少。
.
論斷十：現(xiàn)在任何一個用戶量極高的APP都可以考慮增加H5應(yīng)用接口，不是你就被等H5。
H5很好用，不用白不用。現(xiàn)在有一個概念是HTML5與原生APP結(jié)合，把網(wǎng)頁封裝在客戶端里，形成混合模式移動應(yīng)用（Hybrid APP）。典例是掌上百度和淘寶Android版客戶端，你以為你下載了一個APP，其實(shí)暗地里一直在訪問H5。
.
十個論斷取自近日發(fā)的兩篇文章的評論，HTML5取代原生APP：Google的智，騰訊的謀？（3.20），以及單日PV 5億？他花10年創(chuàng)業(yè)養(yǎng)出了互聯(lián)網(wǎng)的一個怪物（3.21），均由熱心網(wǎng)友的留言整理得來。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
