1. 程式人生 > >(一)Hybrid app混合開發模式

(一)Hybrid app混合開發模式

hone oid 定義 frame hybrid and ova 角度 分享

hybrid app是什麽?

這裏我們先看一下詞條上的定義

Hybrid App:Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.

翻譯過來的意思是

1、明確主體是一款mobile app(即手機App)

2、使用瀏覽器支持及計算機語言編碼

3、可以發布在各個手機平臺的應用商店裏

4、可安裝運行

這裏我個人的理解是首先它是一款App,作為一款App應該有的功能就是可以發布和安裝運行,也就是上面??的3和4,而它的組成是計算機編碼。

其次再理解字面意思,hybrid的意思是混合,與之相對應的是native app和web app,native的意思是原生,web的意思是網頁,而hybrid的意思自然是要兼顧二者之長,舉個栗子就像油電混合動力的汽車一樣。web app的好處是兼容性比較好,native app的好處是性能和用戶體驗性比較好,而hybrid app要兼容這兩者,但目前對於hybrid app開發來講這是個對立與統一的命題。

實現模式

native app構建一個全屏化的web瀏覽器,進入app默認打開主頁

用戶界面渲染構建采用web app模式,即瀏覽器支持語言 html + css + js編碼構建界面

發布構建采用native app模式,只是不同於原生模式的是引入的是經過自動化構建工具封裝的資源文件(一般在www文件夾下)

native app與web app的通信方式是通過JSAPI模式進行回調,比如Cordova、JSBridge以及其他框架下封裝的方式,但這個過程是大同小異的,這裏列舉Cordova的通信模式圖

技術分享圖片

從體驗上來講,hybrid肯定比不上native的,native具備與生俱來的性能優勢,但開發成本比較大,對於一個需要快速叠代成型並且占領市場的產品來說native開發顯得不太合適,而hybrid擁有在成本控制上的優勢,雖然媲美不上native,但卻擁有比較接近native的體驗,這是個比較折中的方案選擇,但對於產品長期生存來講,不斷提升用戶體驗才是最好的選擇。

分工合作

正如上面實現模式所講的,native原則上是為web開發提供了一套宿主環境,而這個宿主環境本質上是一個基於H5的webkit內核的native瀏覽器,而且這個瀏覽器提供了調用native方式的接口,相當於native開發為前端開發提供了系統級的API,因此從前端的角度看過去就是自己很熟悉的接口調用,只是不同的是這些系統級的API不是傳統的HTTP請求,而是在寄生在這個瀏覽器的公共變量裏,比如window對象。

目前工作上用到的通信方式是Cordova,Cordova整理的資源如下:

官網:https://cordova.apache.org/docs/en/8.x/guide/overview/index.html

GitHub資源:https://ionicframework.com/docs/native/(這個資源要看GitHub地址上的文檔說明)

(一)Hybrid app混合開發模式