H5（HTML5）是HTML最新的版本，它加強了在移動端的支援，有更好的體驗、優(yōu)化更適合移動端的Web應用程序。混合開發(fā)指的是在一個native的應用容器中，通過嵌入webview，將H5頁面作為應用的一部分或者是全部，達到類似native應用的體驗。下面為大家詳細介紹H5進行混合app開發(fā)的原理。

## 1.前言

移動端開發(fā)中，App應用成為主流，而對于不依賴于硬件和系統融合的應用（如：社交、新聞、直播等），代碼形式非常類似的WebView內嵌頁面也成為了越來越多的選項。此時使用H5進行混合開發(fā)可以發(fā)揮特別的優(yōu)勢。

## 2. H5進行混合app開發(fā)原理

混合App開發(fā)，就是將Html5應用或網站包裝為App可安裝的形式，并在應用市場進行發(fā)布。在混合App開發(fā)中，H5頁面是以WebVh5打包appiosiew的方式展現的，WebView是Android系統提供的一個可直接嵌入頁面的組件。WebView的好處是，可以通過非常簡單的方式將H5頁面嵌入到移動應用中并展現給用戶，多數情況下實現的是集成HTML+CSS+JS三項技術的功能的包裝。在WebView中，可以通過WebChromeClient與Js通信，完成頁面功能的事件處理。

三項技術：

– Html5：HyperText Markup Language，也就是大家常聽到的HTML。

– CSS：Cascading Style Sheets，是一種用于描述HTML等文檔元素外觀的語言。

– JS：JavaScript是一種面向對象的、動態(tài)的解釋型計算機語言。

## 3.實現步驟

### 3.1 構建app內框架

針對Hyrbid App，則需要在Native應用（如IOS）上嵌入一個瀏覽器界面以調出具備業(yè)務邏輯運算能力的Webview。具體如何呷成需要用app框架方案，比如ReactNative，Ionic等。

### 3.2 頁面管理

無論使用ReactNative還是其他框架，可以考慮采用單頁面的方式進行頁面之間的切換。前端也可以自主維護一套類似于路由的方案。

### 3.3 Native API調用

H5需要在Native App內調用某些原生的功能，這就存在一些安全性和可行性的問題。有專門的插件方案和原生橋接庫的解決方法。常見的如Phonegap、Cordova、JPush Phonegap plugins，百度等。

舉個栗子：

我們現在用的`windh5封裝蘋果app顯示不兼容ow.location.replace`是屬于JS里面的內部方法，它負責內部的頁面跳轉，但如果我們要訪問到內部的native能力，就需要調用額外定義的API，比如第三方分享調用、拍照上傳和調用原生地圖等，這就需要調用到原生的能力了。很多案例使用JS將這些API封裝到橋接庫里面，這樣調用的時候只需要執(zhí)行如下代碼：

“`js

window.hackUtilsAPI.share({});

“`

或者實際項目當中一些各種原生業(yè)務 JS 的業(yè)務復雜和難度就會大大降低。實現通信連接的方案有很多，主流的有：

1. Cocos2d-x自帶的jsb庫

2. WebView與native的的通訊方案

3. Phonegap的相關插件：PhoneGap在Javascript API與原生 API之間提供了一個橋接層，讓HTML/CSS/JavaScript的應用程序能夠訪問手機的一些硬件設備和其他原生API的能力，如：Camera、Network、Acceleromete。

### 3.4 總體架構

H5與殼程序，以WebView應用為橋，兩端通過協商好的方法進行數據交互，并得到原來的顯著跨平臺的能力。

## 4. 混合App優(yōu)缺點

### 4.1 優(yōu)點

– 跨平臺：H5頁面只需要編寫一次，重新進行封裝移植后即可同步在各個平臺上面運行。

– 開發(fā)效率高：采用簡單的html+js開發(fā)，不用像原生開發(fā)那樣熟練掌握各種語言，所以開發(fā)效率提高很多。

– 更新方便：H5頁面可以分離出去，單獨發(fā)布，方便修改和發(fā)布，節(jié)省了重復編譯和重新發(fā)布整個App的時間和流程。而原生更新完需要等待市場審核，并上線更新。

– 用戶變現：使用H5頁面進行混合開發(fā)時，可以通過增加廣告或與項目的合作賺錢，發(fā)揮H5頁面自身變現的優(yōu)勢。

– 兼容性較好：HTML5 的語法編寫很多兼容性的方便處理，而且瀏覽器普及度也非常的高，可兼容性一般不會有問題。

### 4.2 缺點

– 用戶體驗和性能不如原生：H5頁面在WebView內

進行展示，與native程序進行比較出現各種問題，比如滑動卡頓，CPU占用率高，啟動速度慢等。

– 編寫難度較大：相比原生來說編寫難度較大，前期難度很大。

– 安全性差：H5頁面的開源和發(fā)布過程導致安全性差。

– 打包時開銷增加：混合app需要在原生語言的基礎上嵌入一些其他庫以供使用，造成app包體積增大。

## 5. 總結

H5進行混合app開發(fā)，相比原生開發(fā)具有一系列的優(yōu)勢和劣勢。在實際操作中，我們需要對當前項目需求做出完善的分析和需求，來選擇最優(yōu)的開發(fā)方式和工具。H5進行混合app開發(fā)雖然整體難度大，但適用范圍廣，開發(fā)效率高，適合一些輕度交互和動畫類的應用，可以減小視頻體量，同時業(yè)務邏輯不復雜的項目。總