說在前面：

? ? ? ?本屌是一名 Android APP開發者，從大學畢業開始一直都是與原生app打交道，前幾年Android在市場上大火，需求也是很多，本屌混的也順風順水，好不得意。

? ? ? 然而最近幾年隨著小程序，web，APP端各種端大行其道，又恰逢互聯網寒冬，各個公司都在節約成本，以前一個項目Android，IOS都會有相應的開發人員，現在公司都要求人員會跨平臺開發，以前2個人干的多端活，現在1個人干多端，只會原生app開發那一套已經行不通了，本屌心里那個慌啊，各位看官心里慌不慌？多端統一開發已是大勢所趨，趁著現在還能動（已經三十而立了），趕緊多學一些吧。。。

? ?公司最近的項目要求在Android，IOS，小程序上同時運行，前端開發人員僅本屌一人，為了完成任務，將最近前端所涉及的技術框架都做了一個調查，也進行了實踐，現在將自己的歷程分享出來，供大家參考，由于能力有限，歡迎大家對錯誤的地方進行指正。

一、原生開發與跨平臺開發技術

原生開發

原生開發就是用原生sdk api（Android或IOS）進行開發，Android使用Java或Kotlin，IOS使用Objective-C或Swift。

原生開發優勢：

1.速度快、性能高，可實現復雜的動畫，整體用戶體驗好；

2.可以訪問平臺的全部功能，包括硬件（藍牙，GPS，拍照，攝像等）

主要缺點

1.平臺特定，開發成本高，不同平臺需要維護不同代碼

2.動態化弱，有新功能需及時發版

?總結一下，純原生開發主要面臨動態化和開發成本兩個問題，而針對這兩個問題，誕生了一些跨平臺的動態化框架。

跨平臺開發

市場上跨平臺方案比較多，主要分為三類

1.H5+原生（uni-app,appcan，Cordova,Ionic等）

2.JavaScript開發+原生渲染（React Native、Weex）

3.自繪UI+原生（flutter）

? ? ?h5+原生的開發模式為混合開發?，采用混合模式開發的APP我們稱之為混合應用或Hybrid APP?，如果一個應用的大多數功能都是H5實現的話，我們稱其為Web APP 。

? ? ? 混合應用的優點是動態內容是H5，web技術棧，社區及資源豐富，缺點是性能不好，對于復雜用戶界面或動畫，webview不堪重任。

下面列舉自己在項目中選型所涉及的幾個跨平臺框架

先來一張自己總結的表格，供大家參考：

下面詳情講解一下：

一、flutter （可跨Android和IOS）

? ? ? ?Flutter 是 Google推出并開源的移動應用開發框架，主打跨平臺、高保真、高性能。開發者可以通過 Dart語言開發 App，一套代碼同時運行在 iOS 和 Android平臺。 Flutter提供了豐富的組件、接口，開發者可以很快地為 Flutter添加 native擴展。

優勢：

1.跨平臺自繪引擎，性能強大，流暢：對比weex和react native，性能的強大是很明顯的，基于dom樹渲染原生組件，很難與直接在原生視圖上繪圖比肩性能，Google作為一個輪子大廠，直接在兩個平臺上重寫了各自的UIKit，對接到平臺底層，減少UI層的多層轉換，UI性能可以比肩原生，這個優勢在滑動和播放動畫時尤為明顯

2.采用Dart語言開發：開發效率高，高性能，快速內存分配，類型安全

3.已發布正式版本，google投入資源大，后期會做大做強。

缺點：

1.部分場景仍需原生開發。

注：通過對flutter的學習，感覺還是很不錯的，dart學習成本很低，幾乎可以不用怎么學，通過實踐，2周時間足夠可以開始動手擼代碼。

二、React Native（可跨Android和IOS）

? ? ? ?使用Javascript語言，類似于HTML的JSX，以及CSS來開發移動應用，將虛擬DOM映射為原生控件，因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域。

其優勢和缺點網上文章很多，這里就不做敘述。談談自己在實踐中遇到的問題：

1.學習成本太高，對沒有React前端技術的同學來說，上手是很不容易的，本屌搭建環境都用了2天時間

2.開發過程中總遇到一些莫名其妙的問題，可能是學藝不精，最終一個星期后終于放棄該方案。

3.據查詢的資料顯示，很多公司由于各種原因已經放棄React Native ，而且很多大神也表示放棄RN是業內的共識，至于共識的原因哪位同學知道，可以分享一下。

三、Taro（可跨H5，小程序，React Native）

京東 - 凹凸實驗室打造的一套遵循 React 語法規范的多端統一開發框架，github上已超過16K的star。詳情參考?https://github.com/NervJS/taro

? ?taro多端統一開發框架，支持用 React 的開發方式編寫一次代碼，生成能運行在微信/百度/支付寶/字節跳動小程序、H5、React Native 等的應用。

觀點：

由于Taro編寫出來的工程，如果打包成IOS和Android 需要先將程序生成React Native ，然后再有RN來打包IOS和Android。由于RN的一些經歷，本屌未嘗試，直接放棄該方案。有同學嘗試過的可以分享一下過程。

四、uni-app(可跨Android、IOS、H5、各種小程序)

uni-app?是一個使用?Vue.js?開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺,可參看官網?https://uniapp.dcloud.io/

由于公司的項目需要Android，IOS和小程序共存，最終選擇該方案，目前已完成項目，下面說說自己的看法

1. 學習成本很低，雖然之前沒接觸過vue，但是上手很快，1天時間看vue語法，1天時間了解uniapp并對其創建-打包整個過程進行熟悉，然后第三天可以開始擼代碼，一個多星期就完成公司的項目，一款涉及30多個頁面的應用。

2.提供云打包和本地打包，對沒有蘋果電腦的人是福音，可以使用云打包進行蘋果ipa制作，當然前提是上傳代碼到云端，如果代碼怕泄露那就本地打包

3.uni-app里面集成了5+plus，nvue和weex功能，所以對熟悉weex的同學也能滿足

4.項目運行性能良好，由于應用是一些常規應用，整體和原生體驗相差不大

5.國產開源，群比較活躍，遇到問題可以直接咨詢群管理

當然缺點也有：

1.對于大量圖片展示、tab滑動上卡頓有些明顯

2.對地圖方面支持力度不夠，有很多bug，對于定位，地圖選擇位置，圖層繪制簡單的氣泡這些基本功能都提供的有接口，使用起來還是很方便的

3.存在部分bug，比如手機震動，提供的接口不起效果，但是可以使用5+ 代碼進行實現。

最后：

? ? ?現階段只懂原生開發已經很難立足市場，現在都是多端開發。跨端可以考慮flutter和uni-app這兩個框架，前者是原生渲染速度快，可跨Android和IOS兩端開發。后者是web渲染，可以跨Android，IOS，小程序，h5多端，缺點是性能問題。但對常規應用，性能表現還不錯。剛用uniapp完成公司的項目，性能表現挺好。

? ?七分精力在原生，三分精力留給跨平臺，最后希望各位提出意見，一起溝通學習。