本文將講解幾種app的型別、app與h5的通訊原理、如何區分頁面用原生開發還是h5開發。

01

app的基本型別

app大致分為4種類型：

1、native app

定義：指的是本地化應用，純原生開發的app，簡稱NA

優點：原生的UI體驗比較好，點開app不需要網路請求就可以直接展示UI，有獨立的軟體入口進入。

缺點：開發週期長，因為不同的手機作業系統需要獨立開發，一般分為IOS和安卓兩種版本開發。產品迭代慢，ios版本需要提交到app store稽核。新版本不能同步更新老版本，解決線上bug週期長，因為解決完後還需要使用者重新下載才能看到沒有bug的新版本。

2、web app

定義：指的是純h5開發的應用

優點：比較靈活，開發週期短，更新迭代快，只需要發個版本，線上就能直接看到

缺點：需要相容較多的瀏覽器，且沒有獨立的軟體入口，但是隨著技術的發展，以後支援也是有可能的。

3、hybird app

定義：指的是native和h5結合起來的混合型app，這是目前用的比較多的一種模式

優點：既能發揮原生體驗好的優勢，又能發揮h5更新迭代快的優點。

缺點：native和h5之間需要通訊

4、js app

定義：指的是js+原生渲染的app，這是近幾年流行一種app，js框架代表有：react native，這是一種跨平臺開發框架，使用這個框架，只需要開發一份程式碼，就能相容ios和安卓系統，js app一般也會內嵌h5。

優點：跨平臺，開發週期縮短，只需要維護一份程式碼就能相容ios和安卓系統，如果只是改變了js層面的程式碼，支援程式碼熱更新，不需要走app store稽核。

缺點：如果js app裡面內嵌了h5，一樣需要通訊

小結：native app模式現在基本沒什麼公司在使用了，js app模式有越來越多的公司使用，也是未來的趨勢。如果你是負責某個app的產品經理，首先要了解這款app用的是哪種模式：

1）假如是hybird app，並且是要給native提需求，就需要注意ios和安卓的原生控制元件可能不一樣，可以提前到官網看下這2種系統的控制元件。如果是給h5提需求，那可以先了解下h5的 web 控制元件，以免造成不支援的情況。

2）假如是js app，react native封裝了2個系統共用的核心控制元件，當然如果想用安卓或者ios獨有的控制元件也是可以的。可到react native官網檢視支援的控制元件。

02

native與h5的通訊原理

native與h5的通訊模式有好幾種，下面介紹最常用的JsBridge模式。

native在啟動時，會開啟一個叫做webview的元件，可以把它當作是一個內嵌在native中的瀏覽器(h5頁面將會在這裡展示)，然後執行一個js檔案，建立一個native與h5通訊的橋樑：JsBridge。native和h5可以在該橋樑下通訊。native和h5溝通好介面協議後，互相呼叫時，直接呼叫溝通好的通訊名就可以了。

假設native下載功能的通訊名定義是：download。當點選音樂下載時，h5將呼叫JsBridge的通訊方法名download，並且傳遞音樂資訊，JsBridge就會通知native，native發現通訊名是download，就會執行下載，下載完畢後，返回下載狀態給h5，h5收到訊息後，就顯示下載狀態。

小結：native和h5之間只要溝通好協議，都可以互相傳遞資訊。

03

用native還是h5?

在混合型開發模式中，當產品經理提一個需求時，怎麼知道是用native合適還是h5合適？native的使用者體驗比較好，不需要網路請求就可以直接展示出來。一個app的基本框架，比如導航、一級tab頁，很少會變化的UI頁面，建議用native實現。h5比較靈活，更新快，所以活動頁、商品列表頁等經常發生變化的建議用h5實現。