混合開發(fā)有三種方式
- js和html打包在app里,內(nèi)容在webview里顯示
- js代碼調(diào)用原生控件
- 我們現(xiàn)在的開發(fā)方式,原生代碼+webview,定義一些交互方式
第一種方式:ionic github 32.6k stars
PhoneGap是一個封裝了js調(diào)用原生系統(tǒng)api的框架,比如相機,定位。
PhoneGap后來給apache維護了,改名叫Cordova
Ionic對Cordova(PhoneGap)再次封裝,包含了打包,調(diào)試,一套UI(相當于Bootstrap)
語法:Ionic1基于Angular1 Ionic2基于Angular2
優(yōu)點:
- Web Android Ios可以用同一套代碼
- 可以熱更新
缺點:
- 本身還是基于webview,滑動,切換時還是有些卡頓
- Angular1和Angular2不兼容,Angular2幾乎重寫了,現(xiàn)在最新版本是Angular4,Ionic2優(yōu)化體驗還不夠好,使用Ionic1又會面臨以后升級大量代碼要重寫,這是Angular本身的坑,Google自己都沒多少項目使用Angular(Angular默認使用TypeScript,點贊, 但是基于模版,相比React有很多模版語法)
- 打出來的包比較大
第二種方式:React Native github 56.9k stars
這兩年很火的項目,語法基于React。有一套自己API,相當于這套API映射到原生的控件,所以最終調(diào)用的是原生控件,有接近原生控件的流暢度,
實現(xiàn)有兩種方式
- 整體是ReactNative開發(fā),部分ReactNative沒封裝的功能,比如友盟分享,需要分別調(diào)用Android和Ios的原生代碼。比如自定義控件,需要Android和Ios各自寫控件,然后ReactNative封裝。
- 整體是原生App,由于RN可以熱更新,一些經(jīng)常要改的頁面,比如活動頁可以調(diào)用RN。缺點是引入RN會讓App包變大很多,不建議使用
優(yōu)點
- 流暢度比webview好
- React和Angular一樣,實現(xiàn)了數(shù)據(jù)綁定,代碼量少,js代碼不需要編譯,修改了代碼,刷新下界面就更新了,開發(fā)比原生快,更可以復用大部分代碼
- 熱更新
- React語法舒服
- 社區(qū)活躍度比Ionic更好
缺點
- 上手難度大,需要學習React語法
- 三端代碼不可以用同一套。比如,前端用React 客戶端用ReactNative,React里標簽是<button>,ReactNative里標簽是<Button>,雖然業(yè)務(wù)邏輯的語法可以一樣,但是代碼不能完全復用。
而且Android和Ios的代碼也不能用同一套,因為RN的原理是RN的API映射到Android和Ios的API,比如有的API已經(jīng)封裝了可以映射到Ios控件,但是Android這邊的映射有缺失,那Android這邊只能用另外的API,兩端大概可以復用80%的代碼 - 流暢度還是不如原生,一方面js映射到原生控件有損失,一方面api沒有覆蓋所有原生控件,比如,Android這邊在界面切換的時候不是調(diào)用原生控件,而是用js實現(xiàn)的動畫,流暢度不好(可以改變界面切換動畫來規(guī)避)
- 對于自定義控件需要ios和Android各自寫一套,然后用RN分別調(diào)用
第三種方式:VasSonic QQ今年開源的框架 github 6k stars
通常混合開發(fā)的時候需要下載H5,這個過程比較慢。Ionic是規(guī)避了這一點,把H5和Js打包到本地,但是要通過ajax請求數(shù)據(jù)。VasSonic的策略是加快H5下載。
VasSonic在內(nèi)容請求方面用了三招:
- 動態(tài)緩存
- 增量更新
- 并行加載
通過對HTML內(nèi)容添加注釋來定義了一個自定義的格式,對HTML文檔進行分塊。動態(tài)緩存:指在頁面范圍內(nèi),對分塊后的同容進行更細化(全局、局部)的緩存。
增量更新:有緩存的情況下,只對分塊后的局部內(nèi)容進行增量更新。
并行加載:VasSonic使用終端應用層原生傳輸通道取代系統(tǒng)瀏覽器內(nèi)核自身資源傳輸通道來請求頁面主資源。就是通過VasSonic在WebView初始化過程中時,同步并行從服務(wù)器加載頁面,而不是webview初始化后再去請求。
優(yōu)點
- 原生+H5的方式和現(xiàn)在改動不大
- 加載頁面快
- 更新頁面最簡單
缺點
- H5返回的內(nèi)容有自定義格式,需要后臺和客戶端都加入這個框架,侵入性太高。
而且我們有很多第三方貸款平臺,他們的頁面沒做特殊處理,就體驗不到更快的加載速度(這一點Ionic和RN也一樣) - 還是基于webview,雖然加載快了,流暢度還是不如原生和RN
總結(jié)
- 流暢度 RN>Ionic=VasSonic
- 代碼復用 Ionic=VasSonic>RN
- 熱更新 VasSonic>Ionic=RN (之前有appstore不準RN熱更新的傳言,不知道以后Ios會不會改變審核規(guī)則..)
- 加載速度 RN=Ionic>VasSonic