Hybrid APP 混合開發模式簡介
原文出處:http://www.cnblogs.com/yeahui/p/5026587.html
1.1. APP三種開發模式
智慧手機之普及不用多說,手機APP滲投到各個行業:電商(淘寶、京東等)、金融(各手機行業、P2P借貸等)、醫療(智慧醫療)、交通(滴滴、Uber等)、教育(慕課網等)、餐飲(餓了嗎、美團等)……反正只要是個企業,無論規模大小,都已經訂製或將要訂製自己的APP。這麼多APP無外乎就三種模式:Native App、Web App、Hybrid App。
1.1.1. Native App
Native App,原生APP,使用原生(即Android或iOS)開發的APP。兩年多以前這非常流行,到現在為止,原生開發人員數量眾多,一抓一大票,技術成熟,好多培訓機構都抱著老掉牙的API翻來覆去的講——尤其是Android。Sorry,說錯話了……使用原生開發有其優勢:應用的效能好,適配起來相對容易。學習成本要看人,個人覺得技術點不多,門檻相對稍高,但入門後學習起來就很輕鬆——網路資料實在是太多了。
但原生APP最頭疼的有三個問題:
1、無法跨平臺:Android和iOS都需要開發各自平臺的版本——開發成本高;
2、升級麻煩:每次升級都要下載安裝包,Android還好,反正不需要稽核,下載就下載吧,但iOS就麻煩了,釋出每個版本還得經過App Store的稽核,這導致第三個問題;
3、Android和iOS很難同步釋出。
1.1.2. Web App
所謂的Web App,就是把手機當做一個瀏覽器(Android使用WebView,iOS使用UIWebView),做幾個頁面掛在伺服器端,類似於一個小網站。這樣說雖然不太貼切,但實際上給人的感覺就是這樣的。雖然開發成本大大降低,但頁面訪問速度慢、操作體驗差。於是第三種模式誕生了。
1.1.3. Hybrid App
乍一看和Web App沒啥差別,但涉及到的技術成本、開發成本、學習成本比Web App高,它綜合了Web App的開發速度和Native App的高效能體驗。之所以說學習成本高,是因為開發高效能的Hybrid App有難度,網路資料少。我是兩年半前開始接觸混合模式開發的,當時如何做好螢幕適配、提高UI響應速度、如何最大化使用原生功能等內容,網路幾乎沒有資料。網上能搜尋到的都是很粗略的東西,或者就是Hello World級別的東西,涉及到稍微細節一點的東西幾乎沒有。由於本系列文章都只講Hybrid,故在此不再囉嗦了。
三種開發模式各自的特點如下面的表格所示:
Native App |
Hybrid App |
Web App |
|
原生功能體驗 |
優秀 |
接近優秀 |
差 |
效能 |
非常快 |
快 |
慢 |
跨平臺開發成本 |
昂貴 |
合理 |
便宜 |
碎片化適配 |
非常嚴重 |
嚴重 |
嚴重 |
程式設計技術支援 |
短缺 |
非常短缺 |
通用人才 |
版本升級維護 |
保守 |
低延時 |
開放 |
安全 |
強 |
中 |
弱 |
1.2. Hybrid App所需技術
Hybrid App由於需要保證執行效能與開發速度,需要如下技術支援,本系列博文均會按照Demo的開發順序依次描述本人的開發心得和教訓,希望能起到一個拋磚引玉的作用。
1.2.1. Native技術
Native技術主要用於提供原生支援,要做到跨平臺,就需要掌握部分Android和iOS的知識,除了多執行緒,檔案儲存等基礎知識,Android需要非常熟練的掌握WebView、WebSettings、WebChromeClient、WebClient四大物件。iOS需要非常熟練掌握UIWebView物件。
1.2.2. Web技術
1、 HTML5
熟練掌握HTML5的各個標籤,如何編寫最優的文件結構。
2、 CSS
熟練掌握CSS2和CSS3的新特性,能按照效果圖編寫最高效能的樣式。
使用SCSS生成CSS,將CSS可程式設計化。
3、 JavaScript
實現業務邏輯控制。個人理解JavaScript主要包含兩大內容:DOM程式設計和麵向物件程式設計。大部分JS開發人員就只掌握DOM程式設計,諸如document.getElementById()等,但面向物件是很重要的一個方面。
4、 效能和開發
模組化程式設計:編寫可複用的組建;
CSS渲染:瞭解瀏覽器的CSS渲染引擎才能編寫更高效率的樣式;
JS解析:瞭解瀏覽器的JS解析引擎才能優化JS指令碼;
HTTP協議:熟練掌握HTTP請求的各個內容;
AJAX:和伺服器端的互動大都採用AJAX。
1.3. 流行框架
1.3.1. Hybrid 框架
Cordova/PhoneGap:側重於JS與原生的互動,開發簡單,但效能差,如觸控時反應不靈敏。
AppCan:效能還行,使用簡單,但要提交程式碼給AppCan的伺服器才能打包,相信有追求的企業是不會把自己的程式碼提交給第三方,把打包權利交給第三方的。
Ionic Framework:在Cordova的基礎上增加一些UI/JS方面的東西,樣式還不錯,但同樣具有Cordova的不足。
1.3.2. UI/JS框架
jQuery Mobile:上手簡單,元件豐富,但效能超級差,閃屏現象嚴重。
Senche Touch:簡單看過,沒有使用過,貌似UI很漂亮,學習成本高。
React Native:FB推出的,當年FB是最早嘗試Hybrid的,但效能超差,於是APP放棄了Hybrid,走原生的道路。在大家都不看好H5時,FB暗中深入挖掘H5,三年之後推出了這個框架,非常推薦各位去學習其中的思想。
GMU:百度推出的,這個不錯。
1.3.3. UI/JS庫
這個就多了,jQuery、Zepto、Swiper、iScroll、RequireJS、AngularJS……
1.3.4. 個人建議
由於移動端是一個重視效能和使用者體驗的終端,大量採用框架存在一些問題:
1、 擴充套件、維護、定製成本,這個非常需要考慮,或許框架提供的UI風格和自己設計的UI風格差異大,導致設計圍繞框架轉,不符合產品的需求。
2、 既然是框架,強調的是覆蓋面廣度和功能的全面,會有很多無用的東西,帶來累贅;
3、 框架本身存在BUG,或許需要開發人員面對一些能力之外的問題。
總之,如果只追求像山寨作坊一樣快速產出、不計效能的開發產品,那使用現成的框架是不二選擇。但如果追求效能和真正的產品,建議使用庫,不要使用框架。但是很多框架的實現思想都很優秀,雖然不建議使用,但我們應該多接觸學習其中的思想,才能寫更好的程式碼。僅僅建議而已,不中聽請忽略。
1.4. 系列大綱
本系列博文將按照我近三年來開發Hybrid App過程中的體會進行編寫,以一個APP完整開發為線索,形成一套完整的混合模式開發的解決方案。
1、 JS和原生互動架構
2、 WEB端基礎知識準備
3、 UI適配方案
4、 UI元件開發及封裝
5、 JS模組化開發
6、 升級、部署方案
相關推薦
Hybrid APP 混合開發模式簡介
原文出處:http://www.cnblogs.com/yeahui/p/5026587.html 1.1. APP三種開發模式 智慧手機之普及不用多說,手機APP滲投到各個行業:電商(淘寶、京東等)、金融(各手機行業、P2P借貸等)、醫療(智慧醫療)、交通
(一)Hybrid app混合開發模式
hone oid 定義 frame hybrid and ova 角度 分享 hybrid app是什麽? 這裏我們先看一下詞條上的定義 Hybrid App:Hybrid App is a mobile application that is coded in both
Hybrid APP 混合開發模式的選擇之路(二)
原文出處:http://www.cnblogs.com/yuanyingke/p/6060150.html 1、混合開發概述 Hybrid App主要以JS+Native兩者相互呼叫為主,從開發層面實現“一次開發,多處執行”的機制,成為真正適合跨平臺的開發。Hybr
Hybrid APP 混合開發模式的選擇之路(五:原生和H5的互動原理)
原文出處:http://www.cnblogs.com/dailc/p/5931322.html 在Hybrid APP中,原生與H5的互動方式在Android和iOS上的實現是有異同的,原因是Android、iOS的通訊機制有所區別,下面介紹原生和H5相互呼叫的方法
Hybrid APP 混合開發模式的選擇之路(四)
原文出處:http://www.cnblogs.com/dailc/p/5930238.html#hybrid_2 目前的主流應用程式有四大型別:Native App、Hybrid App、React Native App、Web App。本文分別對這幾種方案做一些分析
Hybrid APP混合開發的一些經驗和總結
後臺 機制 獲取 功能 前端 如果 導致 接口 編寫 寫在前面: 由於業務需要,接觸到一個Hybrid APP混合開發的項目。當時是第一次接觸混合開發,有一些經驗和總結,歡迎各位一起交流學習~ 1、混合開發概述 Hybrid App主要以JS+Native兩者
Hybrid APP混合模式應用開發的經驗和總結
寫在前面: 由於業務需要,接觸到一個Hybrid APP混合開發的專案。當時是第一次接觸混合開發,有一些經驗和總結,歡迎各位一起交流學習~ 1、混合開發概述 Hybrid App主要以JS+Native兩者相互呼叫為主,從
Hybrid App——混合模式移動應用
一、簡介 Hybrid App(混合模式移動應用)是指介於web-app、native-app這兩者之間的app,兼具“Native App良好使用者互動體驗的優勢”和“Web App跨平臺開發的優勢”。 “雲”時代的來臨正在改變A
霸屏天下APP系統開發模式
分享圖片 了解 系統開發 jpg 分享 .com 提現 傳媒 同時 霸屏天下APP系統開發模式 找131.2935.5821 微/電 霸屏天下APP軟件開發,霸屏天下系統模式開發,霸屏天下app軟件開發 互聯網+的商業思維就是引流客戶數量,讓客戶有黏性,滿足客戶的需求,了解
Vue+原生App混合開發
專案的大致需求就是做一個App,裡面整合各種功能供使用者使用,其中涉及到很多Vue的使用方法,單獨總結太麻煩,所以通過這幾篇筆記來梳理一下。原型圖如下: 路由配置 主介面會用到一些原生App方法,比如驗證使用者身份等,故由原生App完成,進去的每個模組則全部都是HTML頁面(有一種後端工作好
適合APP的開發模式——敏捷開發
最適合App的開發模式——敏捷開發 傳統的軟體開發模式需要經歷問題評估、計劃解決方案、設計系統架構、開發程式碼、測試、部署和使用系統、維護解決方案等過程,如下圖↓ 採用傳統軟體開發模式的最大問題是開發週期過長,迭代速度慢。移動網際網路行業發展速度快,需求不斷變化
各種軟體開發模式簡介
轉自:http://www.cnblogs.com/liang--liang/p/3613815.html 1. 邊做邊改模型(Build-and-Fix Model) 好吧,其實現在許多產品實際都是使用的“邊做邊改”模型來開發的,特別是很多小公司產品週期壓縮的太
Vue+原生App混合開發手記#2 融雲即時通訊
最近開發的一個醫藥專案中要求加入即時通訊,最後選擇了融雲IM即時通訊服務,融雲即時通訊包含Android SDK,iOS SDK以及Web SDK,為了節省開發時間,使用了Web SDK,這樣在Android平臺和iOS平臺上都能表現一致。這是部分介面的效果, 分為兩類使用者,一類是醫生,接受患者的
軟體開發模式簡介
1. 邊做邊改模型(Build-and-Fix Model) 好吧,其實現在許多產品實際都是使用的“邊做邊改”模型來開發的,特別是很多小公司產品週期壓縮的太短。在這種模型中,既沒有規格說明,也沒有經過設計,軟體隨著客戶的需要一次又一次地不斷被修改。 在這個模型中,開發人員拿到專案立即
App混合開發之WebView進行H5頁面基本操作
現在淘寶、京東、聚划算、甚至於一些銀行的App都是利用原生加H5混合開發技術進行開發的,混合開發越來越成為App開發主流技術。WebView是android內嵌的Web頁面訪問元件,通過它可以輕鬆實
app混合開發之新增除錯控制檯vconsole
當內嵌在app內的h5頁面出現錯誤時,無法像在電腦一樣按f12除錯,檢視報錯資訊,這時候就可以用上vconsole簡單的用法是:下載 vConsole 的最新版本或者使用 npm 安裝:npm install vconsole/*index.html */ <!--
[iOS]關於 App 混合(Hybrid)開發的優化,包括H5、Weex等(本篇博客主要針對 iOS 應用講解,但該思想同樣適用於Android)
color 數據 後臺 lib 新版 生成 下載地址 代碼 版本 我們知道混合開發,可以節省很多成本(時間成本,經濟成本等等),所以有很多公司比較鐘愛這種開發形式,今天所講的優化方式,也是我在我們公司的應用中實際用了的,而且我寫的這個優化的 SDK 已經開源到 gith
Hybrid App(混合開發) 移動端開發除錯
1、下載專案,npm install安裝依賴 本地執行 npm run dev(根據具體packjson配 置而定) 2、區域網訪問:http://172.20.9.35:8080/ 3、手機端訪問:在我的、設定裡,點選關於vv裡的logo 5下 出現隱藏設定 除錯地址裡填 區域網訪
混合開發(Hybrid App)之 Ionic【一】-- 認識Ionic,搭建開發環境,建立專案
寫在前面 目前市面存在的移動開發方式有原生應用、混合應用、原生應用三種,對於這種方式可以做以下對比。 認識ionic ionic 是一個用來開發混合手機應用的,開源的,免費的程式碼庫,具有以下特點。 1.ionic 基於Angular語法,簡單易學。 2.io
Hybrid App: 瞭解JavaScript如何與Native實現混合開發
一、簡介 Hybrid Development混合開發是目前移動端開發異常火熱的新興技術,它能夠實現跨平臺開發,極大地節約了人力和資源成本。跨平臺開發催生了很多新的開源框架,就目前而言,在混合開發中比較流行的有FaceBook開源React Native,有Goggle開源的Flutter。React Nat