天小編給大家講講APP開發的事情。

APP就是手機里面的應用軟件，對于大多數沒做過研發的朋友，對內中細節還不是太了解。但是既然已經考慮要做獨立APP，想做出一番事業來，有些東西還是需要了解一下的。

從研發的角度講，開發一款APP，選擇不同思維開發模式，無論時間成本還是研發成本，差異都是相當大的。從客戶的角度，使用功能、實際體驗和后期效果，差異就更大了。

APP的開發模式

目前市場主流的APP分三種：原生APP、WebAPP和混合APP三種，這里對三者的區別進行下詳細分析。

原生APP

原生APP是什么？原生APP就是利用Android、iOS平臺官方的開發語言、開發類庫、工具進行開發。比如安卓的java語言，iOS的object-c 語言。在應用性能上和交互體驗上應該是好的。

優點：

1.可訪問手機所有功能、可實現功能齊全。

2.運行速度快、性能高，有較強的用戶體驗。

3.應用性能和交互體驗是最好的。

4.比較快捷地使用設備端提供的接口，處理速度上有優勢。

缺點：

研發成本高、周期長，特別是一款原生的App，Android和IOS都要各自開發，同樣的邏輯、界面要寫兩套。各個廠家不同機型都要做適配。

Web版APP

本質就是瀏覽器功能的疊加，用普通Web開發語言開發的，通過瀏覽器運行。

優勢：

1、支持范圍廣；

2、開發成本低、周期短。

缺點：

1、對聯網要求高，離線不能做任何操作；

2、由于Web技術本身的限制，H5移動應用不能直接訪問設備硬件和離線存儲，所以在體驗和性能上有很大的局限性

3、運行速度慢，頁面不能承載太多東西；

4、后期用戶量的增加，用戶訪問次數的增大，服務器的承載負荷會不斷增大。

5、如果用戶使用更多的新型瀏覽器，那么就會出現運行問題。

混合開發

即利用了原生APP的開發技術還應用了HTML5開發技術，是原生和HTML5技術的混合應用。混合比例不限。

優點：

1、比web版實現功能多；

2、兼容多平臺；

3、可離線運行；

缺點：

1、用戶體驗不如本地應用；

2、性能稍慢（需要連接網絡）；

3、技術還不是很成熟。

選最適合自己的

筆者拿旅游做下比較，對比這三種APP開發模式，也許不是很恰當，但大家能理解就好。

就拿馬上要來的國慶黃金周來說吧。

原生開發相當于選擇出行旅游，花費時間長，旅游成本也高，獲得的體驗是真實的。總的來說就是苦，累，花錢也多。但大都數人都喜歡，問題是缺錢。

WEBAPP就簡單了，待在家看電視就行。根本不用去現場，想看就看，省錢還舒服，短時間內周游全球都不是問題。

混合開發就復雜點了，就是去電影院看場電影，不過這個電影也不一樣，有大屏幕的，也有3D的，有的甚至增加動感座椅，環境特效等等。待在電影院就能從聽覺、視覺、達到強大的逼真感。

國慶長假怎么過？大家準備好了嗎？是待在家里？還是去電影院？或者來一場一場說走就走的旅行。選擇APP其實也一樣，每種都有一定的需求群體。結合自己的能力、財力、需求，選擇最適合自己的就好。

旅游雖然累點，但是如果免費，估計大多數人還是不會拒絕的。

原生APP一般都貴，要是能免費，又會有多少人拒絕呢？

ybrid App主要以JS+Native兩者相互調用為主，從開發層面實現“一次開發，多處運行”的機制，成為真正適合跨平臺的開發。Hybrid App兼具了Native App良好用戶體驗的優勢，也兼具了Web App使用HTML5跨平臺開發低成本的優勢。

目前已經有眾多Hybrid App開發成功應用，比如美團、愛奇藝、微信等知名移動應用，都是采用Hybrid App開發模式。

2、移動應用開發的三種方式比較

移動應用開發的方式，目前主要有三種：

• Native App： 本地應用程序（原生App）

• Web App：網頁應用程序（移動web）

• Hybrid App：混合應用程序（混合App）

圖1：三種移動應用開發方式

如圖1所示，三種移動應用開發方式具體比較如表2所示：

表2：三種移動應用開發方式比較

3、混合開發應用場景

（1）折中考慮——如果企業使用 Hybrid 開發方法，就能集Native 和web兩者之所長。一方面，Native 讓開發者可以充分利用現代移動設備所提供的全部不同的特性和功能。另一方面，使用 Web 語言編寫的所有代碼都可以在不同的移動平臺之間共享，使得開發和日常維護過程變得集中式、更簡短、更經濟高效。

（2）內部技能——許多企業都擁有Web 開發技能。如果選擇 Hybrid 開發方法，在合適解決方案的支持下，Web 開發者只要僅僅運用 HTML、CSS 和 JavaScript 等 Web 技能，就能構建 App，同時提供 Native 用戶體驗。

（3）考慮未來——HTML5的可用性和功能都在迅速改進。許多分析師預測，它可能會成為開發前端 App 的默認技術。如果用 HTML 來編寫 App 的大部分代碼，并且只有在需要時才使用 Native 代碼，公司就能確保他們今天的投入在明天不會變得過時，因為 HTML 功能變得更豐富，可以滿足現代企業一系列更廣泛的移動要求。

4、混合開發框架和層次結構圖

混合開發結構圖

1）移動終端web殼（以下簡稱“殼”）：殼是使用操作系統的 API 來創建嵌入式 HTML的渲染引擎。殼主要功能是定義Android應用程序與網頁之間的接口，允許網頁中的JavaScript調用Android應用程序，提供基于web的應用程序的Android API，將Web嵌入到Android應用程序中。

2）前端交互js：包括基礎功能js和業務功能js。

3）前端適配器：適配不同的終端：Pad、android、ios、wap。

混合開發層次結構圖

1） 頁面加載

1. 頁面容器（XdjaWebView）類，是整個框架的核心和基礎，主要用來實現頁面的加載，以及對頁面加載完成后的后續操作提供支持，例如：文件下載、js支持、文件上傳，數據緩存、進度條等；

2. 頁面加載接口：對頁面的加載過程進行跟蹤；例如：頁面加載進度百分比，頁面開始加載、頁面加載出錯、頁面加載完成等

2） JS調用Android功能

1. 網頁：頁面調用js接口中的具體方法；

2. JS接口：調用android接口中一一對應的具體方法；

3. android接口：直接調用框架中集成的功能，或者通過框架接口在應用系統中自定義功能（例如，退出、返回鍵響應等)；其中升級功能的返回結果或者過程信息，可以在客戶端中通過升級接口獲取。

4. XdjaClientHelper：如果需要將框架中的方法返回值通知給js方法，你們可以通過XdjaClientHelper類來實現；

3）應用系統調用JS功能

應用系統通過XdjaClientHelper來實現對js功能的調用；

4） 應用系統調用HDF功能

應用系統可以調用框架集成的工具類、消息提示框、升級模塊以及手機上常見的打電話發短信等功能。

5、性能優化

1） 單個頁面

登錄、首頁以及共用代碼（樣式文件、JS文件、頁面加載loading代碼）等放在index頁面里。頁面展示前顯示fake頁面（過場頁面），首屏加載完后，fake頁面消失。

頁面雖然按照業務模塊分為不同的頁面，但是展示的時候會在同一個頁面即index頁面展示。具體的說，需要某個功能頁面的時候將頁面以AJAX的形式請求到index頁面，使用完畢刪除。

使用一個頁面，公共的CSS和JS只會加載一次。

2）CSS、JavaScript

在本次混合開發框架開發中，CSS全部寫在一個文件里。

CSS和Jquery Mobile的相關文件寫在index頁面頭部，其余公用JS等寫在index頁面底部。防止JS阻塞頁面加載。各業務邏輯JS寫在各業務頁面的底部。

開發完成后，CSS和JS需要進行壓縮，減少用戶使用時初次請求時間。

3） @font-face

本次混合開發中使用@font-face來實現圖標字體化，統一控制圖標的顏色和大小。

使用@font-face優點：減少頁面因使用圖片而帶來的流量，大大縮短頁面響應時間；圖標可以隨意改變大小和顏色，而不會導致失真。

使用時注意：所有的圖標需要是矢量的SVG格式。

使用限制：只適用于純色扁平化的圖標。背景圖等比較復雜的圖片仍然使用圖片。

4） 本地存儲LocalStorage

HTML5本地存儲LocalStorage，在混合開發中主要用來存儲最近查詢記錄等。

拿首頁最近查詢來說，用戶每次在綜合查詢中點擊一個模塊，通過LocalStorage將圖標和對應的功能名字存儲起來，如果用戶不清除，LocalStorage中的數據是一直存在本地的。下次打開應用的時候從LocalStorage中讀取最近查詢記錄等。

使用LocalStorage的好處是，不進行后臺交互，速度快。

5）異步AJAX

本次開發中多處實現都是通過使用AJAX。首先，顯示頁面時，先顯示框架，然后異步加載內容；其次，分頁功能中，先顯示部分簡項列表，上拉獲取更多內容。再次，每打開一個新功能，頁面以AJAX的形式獲取新頁面的內容并展示出來。

異步AJAX，交互體驗更好。從性能的角度考慮，速度也更快。

5是玩互聯網的一個熱詞，搞移動開發的嫌它效率不夠高、做市場營銷的卻用得風生水起。

整天聽人說H5，概念倒是火，應用跟得上嗎？它到底行不行？所幸網上出了很多有關它的“論斷”，反倒能幫助我們“撥開云霧見青天”。

.

論斷一：H5炒了n年了。

最近人工智能肯定火，根據百度指數，這個詞近7天的搜索指數是8000多，最高有近2萬，但李世石這5場比賽前只有2000幾。

H5和HTML5卻長期穩定在9000多，它的概念不是炒出來的，是實實在在應用廣、有人持續在關注，人工智能這種緊跟時事起起落落的才算炒出來的。

.

論斷二：一直沒火起來，沒救了。

現在一般提起H5，就是在移動端傳播的微信H5頁面。國內H5頁面制作平臺iH5產出的H5，最高一天能達到5億PV，最低也在一億頁面瀏覽上下。火不火？火。

如果要比應用HTML5的網站，還真別說，國內知名網站多了去了。百度？是。QQ？是。淘寶？是。新浪？門戶和微博都是。優酷？還是。

.

論斷三：流量什么的全部免費就有可能，否則這是一紙空談。

這句話是說因為流量這個大難題，H5網頁不能取代原生APP。所以你為了看視頻下了個××視頻的APP后，會燒你的移動商運營流量，去看短片消磨長電影嗎？你的APP也是趁有WIFI的時候下的吧？

現在沒有網絡，手機上也沒幾個APP真的能用，頂多看看本地緩存的電子書和視頻。流量費用降低是當前的趨勢，而H5會隨著入口的完善，一步步蠶食APP的份額。

.

論斷四：你想讓我每次打開一個應用要重新加載？你是不是移動臥底，我還是很支持APP，有固定的模塊，離線都能用。

HTML5也支持本地存儲服務，能提供存儲于客戶端、不隨頁面刷新而消失、不回傳至服務器的離線存儲。

.

論斷五：沒有實用價值的體現，行業場景應用少。

如果出現一個HTML5應用市場，能取代你大多數APP的功能，還都不用下載，你用不用？現在H5網頁缺的是一個集大成者式的入口，像APP Store激發APP的開發一樣，去催生H5網頁的生產。

前陣子微信說要出一個微信應用號，作為企業號的升級版，就是想打造這樣的輕應用市場。

.

論斷六：HTML5很簡單，但是要運用起來，做出來一個作品，難。

你當研發近10年做出來的可視化平臺iH5.cn是擺設？在可視化編程的幫助下，H5頁面的制作只會越來越容易。手指按住屏幕的時間長短、手勢擦除面積的大小、數據的提交和判斷，這些都能通過圖形化界面的操作+簡單配置實現。

就算做一個數據管理系統，iH5也能提供模板，感興趣可參見文章：一個團隊協作Web APP可能引發的互聯網革命。（此處是理直氣壯的廣告）

.

論斷七：手機上有幾個人愿意開瀏覽器？那么點大的屏幕，花花綠綠的網頁體驗比APP差遠了。

手機屏幕大小是一定的，瀏覽器網頁不一定是花花綠綠的，UI渣你去噴設計師。假設你打開微信的頻率比瀏覽器APP高，難不成你不知道微信有內置瀏覽器？

.

論斷八：你拿出HTML的Web APP還好意思去談融資？還好意思談市值？

當智能手機還沒流行、APP還沒形成市場的時候，我們還在用軟件去談融資、搞市值。當然，現在都玩APP了，軟件反而很少聽到有什么新聞了，做軟件的都去做APP了。

只要用戶做高了，是不是基于Web不是問題。

.

論斷九：H5的開發和維護成本低，很多公司已經轉向H5了，尤其創業公司用H5的越來越多。

隨便打開一個網頁，國內外都行，看看第一行文檔聲明是不是“<!DOCTYPE html>”，“是”就多少用了HTML5。

很多公司轉H5，就是互聯網服務平臺，但更多用H5的公司目前還是用它去做市場營銷，利用社交傳播去打市場。創業公司多的是提供H5在線制作服務的平臺，而且近兩年融資成功的案例也不少。

.

論斷十：現在任何一個用戶量極高的APP都可以考慮增加H5應用接口，不是你就被等H5。

H5很好用，不用白不用。現在有一個概念是HTML5與原生APP結合，把網頁封裝在客戶端里，形成混合模式移動應用（Hybrid APP）。典例是掌上百度和淘寶Android版客戶端，你以為你下載了一個APP，其實暗地里一直在訪問H5。

.

十個論斷取自近日發的兩篇文章的評論，HTML5取代原生APP：Google的智，騰訊的謀？（3.20），以及單日PV 5億？他花10年創業養出了互聯網的一個怪物（3.21），均由熱心網友的留言整理得來。