新項(xiàng)目要求重新選擇一個(gè)移動(dòng)端框架，查了些資料做分析。

開發(fā)模式

當(dāng)前app主流開發(fā)模式有

Native? App（原生）

Web App? （網(wǎng)頁(yè)）

Hybrid App（混合）

這個(gè)圖說(shuō)的還是很清楚的

?

總結(jié)一下：

混合開發(fā)靈活性好，兼容性強(qiáng)，功能更完備，所以當(dāng)前項(xiàng)目考慮使用 混合開發(fā)模式。

?

Hybrid App混合開發(fā)

關(guān)于混合開發(fā)，下面幾篇文章說(shuō)的還是比較清楚的。

混合應(yīng)用開發(fā)定義和常見問(wèn)題：

https://blog.csdn.net/bihansheng2010/article/details/100886979

APP混合模式開發(fā)方案:

https://www.jianshu.com/p/aeac270cb7d1

目前主流的幾種開發(fā)App方式介紹?:

https://www.jianshu.com/p/a7a77eb16a2a

?

當(dāng)前主流框架：(分析來(lái)源：APP混合模式開發(fā)方案（2018年）)

?PhoneGap（cordova）?（當(dāng)前比較主流的H5框架）

AppCan（簡(jiǎn)單，付費(fèi)，相對(duì)較少）

APICloud?（官方號(hào)稱7天做出一個(gè)App，能實(shí)現(xiàn)功能，但是實(shí)際上組件比較少）

React Native（之前非常火，但是學(xué)習(xí)成本高，ios和android代碼并非通用）

AppMobi（聽說(shuō)很厲害，但是國(guó)外項(xiàng)目，文檔少）

Flutter?（跨平臺(tái)ui框架，新語(yǔ)言dart，不支持熱更新）

?

對(duì)比分析

經(jīng)過(guò)討論，我們選擇其中的 Cordova、React Native、Flutter 作為備選

對(duì)比分析：https://www.jianshu.com/p/900bf9cbd005

Flutter和RN對(duì)比：https://www.jianshu.com/p/51c4f7f6e446

?總結(jié)

框架名稱	核心邏輯	優(yōu)勢(shì)	劣勢(shì)
Cordova	Cordova通過(guò)對(duì)HTML、CSS、JS封裝為原生APP （h5技術(shù)）	1、iOS和Android基本上可以共用代碼，一次編碼，到處運(yùn)行 2、純web思維，開發(fā)速度快， 簡(jiǎn)單方便，所有UI組件都是有html模擬，可以統(tǒng)一 使用。 3、可實(shí)現(xiàn)在線更新，允許動(dòng)態(tài)加載web js 4、文檔多，開發(fā)者多，遇到問(wèn)題容易解決，技術(shù)成熟 ?	1、占用內(nèi)存高一些，性能體驗(yàn)上，和原生存在差距 2、web技術(shù)無(wú)法解決一切問(wèn)題，對(duì)于比較耗能的地方無(wú)法利用native的思維實(shí)現(xiàn)優(yōu)勢(shì)互補(bǔ)，如高體驗(yàn)的交互，動(dòng)畫等。 3、html解析依賴瀏覽器，存在兼容性問(wèn)題
React Native	JavaScript運(yùn)行業(yè)務(wù)代碼，JS Bridge調(diào)用平臺(tái)組件，原生控件進(jìn)行渲染 ?	1、雖然不能做到一次編碼到處運(yùn)行，但是基本上即使是兩套代碼， 也是相同的jsx語(yǔ)法， 使用js進(jìn)行開發(fā)。 2、更貼近于原生開發(fā)，用戶體驗(yàn)高于html， 開發(fā)效率較高 3、Flexbox布局據(jù)說(shuō)比native的自適應(yīng)布局更加簡(jiǎn)單高效 4、可實(shí)現(xiàn)在線更新（？？？）	1、對(duì)開發(fā)人員要求較高，當(dāng)官方封裝的 控件、API無(wú)法滿足需求時(shí)就必然需要懂一些native的東西去擴(kuò)展，擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web，也遠(yuǎn)遠(yuǎn)不如直接寫Native Code。 2、多平臺(tái)需要些多套代碼。
Flutter ?	自己實(shí)現(xiàn)了一套UI框架， 直接在系統(tǒng)底層渲染系統(tǒng)上層UI	1、高生產(chǎn)效率。一套代碼可以開發(fā)出Android和iOS應(yīng)用； 2、Dart語(yǔ)言使得同樣的功能只需要很少的代碼； 3、迭代更加方便， hot reload功能； 4、創(chuàng)建優(yōu)雅的、高度可定制的用戶界面。Flutter內(nèi)置了對(duì)Material Design和Cupertino（iOS-favor）的UI組件庫(kù)；提供了可定制 的UI組件，不再受制于OEM控件的限制； 5、借助可移植的GPU加速的渲染引擎以及高性能本地ARM代碼運(yùn)行 時(shí)以達(dá)到跨平臺(tái)的高質(zhì)量用戶體驗(yàn)。 ?	Flutter采用Dart語(yǔ)言開發(fā)，屬于小眾語(yǔ)言，需要一切都要重新 學(xué)習(xí)。 Flutter現(xiàn)在還處在Beta階段，第三方庫(kù)很少。

?

選擇誰(shuí)？

選框架需要先明確需求。比如：

1、支持業(yè)務(wù)好，可靠穩(wěn)定

2、靈活，可擴(kuò)展，快速響應(yīng)，方便更新

3、用戶體驗(yàn)好。

側(cè)重點(diǎn)不同，對(duì)框架的取舍也應(yīng)該不同。

老板說(shuō)：我都要！

哭

?

我們項(xiàng)目最終選擇了Cordova。

原因：

1、cordova 支持熱更新，更靈活，便于及時(shí)響應(yīng)需求，快速修復(fù)bug。（這是主要原因）

2、項(xiàng)目成員都有H5開發(fā)經(jīng)驗(yàn)，并且有人用過(guò)Cordova的，沒(méi)有但是沒(méi)有人用過(guò)React Native 和 Flutter。（cordova 上手快，學(xué)習(xí)成本低）

3、該項(xiàng)目是內(nèi)部項(xiàng)目，對(duì)體驗(yàn)要求相對(duì)低。（當(dāng)前手機(jī)性能和網(wǎng)絡(luò)性能都比較好了，性能差距也沒(méi)那么明顯）

?

ps：

網(wǎng)上有這樣一種說(shuō)法：

公司主營(yíng)項(xiàng)目最好用native實(shí)現(xiàn)核心功能，配合H5做擴(kuò)展。保證穩(wěn)定和用戶體驗(yàn)。

內(nèi)部項(xiàng)目用新技術(shù)，之前的RN，現(xiàn)在Flutter。快速響應(yīng)需求，積累新技術(shù)。

我覺(jué)得還是一定有道理的。雖然最終沒(méi)有選這flutter，但是查資料過(guò)程中發(fā)現(xiàn)flutter的優(yōu)勢(shì)還是比較多的。如果能實(shí)現(xiàn)在線熱更新，就完美了（不做熱更新是為了防止蘋果封殺？）

總結(jié)

以上是生活随笔為你收集整理的移动端框架选型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。