HTML5 + CSS + JavaScript 開發 跨平臺重用代碼?

1、每個框架幾乎都包含以下特性：使用 HTML5 + CSS + JavaScript 開發、跨平臺重用代碼、豐富的UI庫、提供訪問設備原生API的 JavaScript API 包裝器、解決原生開發中機型適配的難題、提供打包、部署的工具或服務、都需要學習自身封裝的 JavaScript API；

2、篩選框架的要求：性能：運行速度快、UI：提供接近原生的UI體驗、插件多，文檔豐富，開發效率高，容易擴展和維護、滿足業務需求；

3、Cordova優點：開源免費，社區生態成熟，插件豐富、支持離線場景應用、開發工具選擇空間大，缺點：只提供基礎訪問設備的接口，需要自己搭配其他UI框架和JavaScript框架來搭配；

? ?UI框架:Famous 、為任意屏幕創建流暢、復雜的UI、免費和開源的JavaScript渲染引擎。著名引擎的獨特之處在于其JavaScript渲染引擎和3D物理引擎；

??Ionic優點：基于 Cordova、漂亮的界面，追求性能，專注原生，免費開源、Angular JS MVVM 開發理念，數據雙向綁定、繼承自 Cordova，可以使用 Cordova 的插件；缺點：Angular JS 學習路線陡峭、Ionic 框架相比于原生的 Cordova 有所差異，Cordova 某些官方插件可能不適用于Ionic；

? AppCan優點：提供一體化解決方案，方便環境搭建、開發、調試、發布、框架自帶UI包，包含常用控件樣式、框架對UI、動畫渲染進行過優化，反應速度快、支持本地打包、云端打包、基于密鑰的代碼加密；缺點：不開源，無法修改、優化底層代碼、分大眾版和企業版，大眾版免費，但功能有缺失、暫不支持自行開發控件/，無法調取android原生功能、框架自帶功能過多，導致應用安裝包偏大、文檔偏少、部分系統無法使用IDE進行調試、只能在服務器端發布，無法在本地發布、IOS發布，需要將證書上傳至服務器；

? Dcloud優點：國內廠商，中文文檔、對HTML5的性能、工具、能力都做了深入擴展，提供 IDE 、云服務等幫助節省時間、MUI 更貼近國內App使用習慣，提供模塊的詳細例子，如登錄，個人中心；缺點：部分操作需要具備原生開發經驗，如離線打包App、新產品仍然有bug，還需改進；

APICloud優點：不懂原生開發，不懂后臺語言就可完成APP；缺點：更新速度快，版本不夠穩定、面向不懂App開發人群，不適合程序員和科技公司，過度依賴會降低技術水平、涉嫌抄襲DCloud大量代碼

React Native：能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。僅需學習一次，編寫任何平臺。(Learn once, write anywhere)；缺點：初次學習成本高，必須在不同平臺下寫兩套代碼，依賴暴露的接口。

??

??

jquery mobile和bootstrap都是較好的框架
　　jQuery Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。
　　Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。

1.1 IONICapp

IONIC是目前最有潛力的一款HTML5手機應用開發框架。經過SASS構建應用程序，它提供了不少UI組件來幫助開發者開發強大的應用。它使用JavaScript MVVM框架和AngularJS來加強應用。提供數據的雙向綁定，使用它成為Web和移動開發者的共同選擇。即將發布的AngularJS 2.0將會專一于移動開發，相信IONIC必定會取得不錯的成就?？蚣?/p>

IONIC的開發團隊將盡快開發出一種經過IONIC creator提供開發者快速建立IONIC應用的方式。咱們將很快就會看到一個支持拖拉功能的可視化開發工具，幾分鐘內開發一個app將成為可能。ide

1.2 Mobile Angular UI工具

Mobile Angular UI是使用bootstrap 3和AngularJS的響應式移動開發HTML5框架。post

Mobile Angular UI的關鍵字有：學習

Bootstrap 3

AngularJS

Bootstrap 3 Mobile組件，好比switches, overlays和sidebars，這些都是bootstrap中沒有的。

AngularJS modules，好比angular-route, angular-touch和angular-animate

響應式媒體查詢是將bootstrap做為單獨的文件，你只須要包含你所須要的東西。Mobile Angular UIu并不包含任何jQuery依賴，你須要作的只是經過一些AngularJS指令建立友好的用戶體驗。

詳細了解能夠看一看the Mobile Angular UI demo page，上面有Mobile Angular UI的實踐，若是你想了解的更深刻一些，我建議你讀一讀getting started with Mobile Angular UI。

1.3 Intel XDK

Intel XDK是Inter開發的一款跨平臺開發工具，咱們能夠很容易的經過Intel XDK開發應用，你須要作的只是下載他們的應用開發工具，有Linux、Windows和Mac版，它還提供了不少個開發框架，好比Twitter bootstrap，jQuery Mobile和Topcoat。

1.4 AppceleratorTitanium

Appcelerator’s Titanium不一樣于其它框架的是，它是一個開源的框架。

Titanium是混合式移動應用開發的一站式解決方案，你只須要下載Titanium studio就能夠解決全部的事情，Titanium SDK包含了不少手機平臺的APIs和后端云服務。

Titanium使用Alloy，Alloy是一個快速開發的手機應用MVC框架，模塊式開發能夠大大減少開發時間，提升代碼復用。

Titanium studio還提供了一些code模板。

1.5 Sencha Touch

Sencha Touch一樣也是HTML5手機應用跨平臺開發框架，運行iOS/Android/Blackberry。它已經誕生不少年了，如今已經成為很經常使用的混合式編程開發框架。

Sencha Touch可讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理，所有基于最新的HTML5和CSS3的WEB標準，全面兼容Android和Apple iOS設備。

下面是Sencha官方給出的幾點特性

基于最新的WEB標準——HTML5，CSS3，JavaScript。整個庫在壓縮和gzip后大約80KB，經過禁用一些組件還會使它更小。

支持世界上最好的設備。Beta版兼容Android和iOS，Android上的開發人員還可使用一些專為Android定制的主題。

加強的觸摸事件。在touchstart、touchend等標準事件基礎上，增長了一組自定義事件數據集成，如tap、swipe、pinch、rotate等。

數據集成。提供了強大的數據包，經過

Ajax

、

JSONp

、

YQL

等方式綁定到組件模板，寫入本地離線存儲。

1.6 Kendo UI

Telerik’s Kendo UI是一個強大的框架用于快速HTML5 UI開發?；谧钚碌腍TML5、CSS3和JavaScript標準。

Kendo UI

包含了開發現代

JavaScript

開發所須要的全部一切，包括：強大的數據源，通用的拖拉

(Drag-and-Drop)

功能，模板，和

UI

控件。

1.7 PhoneGap

PhoneGap恐怕是最老的一個框架了，相信不少人都已經據說過甚至使用過它，可是PhoneGap是基于開源的Cordova商業版本。

第一段PhoneGap代碼是在2008年8月的iPhoneDevCamp上寫成的。建立它的一個主要動力是基于一個幾乎每個單獨的iPhone開發新手都要面對的簡單事實：Objective-C是一個對Web開發人員來講很是陌生的環境，而且Web開發人員的數量遠遠多于Objective-C開發人員的數量。

問題是，是否有人能夠開發一個框架，讓Web開發人員能夠利用他們全部的HTML、CSS和JavaScript知識，并且仍舊能夠同iPhone的重要本地應用程序(如攝像頭和通信錄)交互呢？

就在那一年，PhoneGap獲了獎并開始支持Android平臺，對人數不斷增加的移動開發人員變得愈來愈有用，這些人員須要在更多的平臺上得到代碼支持。

你們能夠到PhoneGap documentation官方文檔開始對PhoneGap的學習。

來源于網絡，僅供參考

1. PhoneGap

2. Ionic

3. React Native

4. Flutter

5. Xamarin

能夠無縫的對接jquery的恐怕只有zepto.js 了

zepto.js相比jquery更小，但是無論是dom選擇器還是函數方法幾乎95%以上相同，所以這種情況下，zepto.js是最好的選擇了

1. PhoneGap ；2. Ionic ；3. React Native ；4. Flutter ；5. Xamarin

1.?Ract Native（FaceBook出品 社區強大 JScore+原生組件渲染）

? 程序員寫react組件編譯成原生組件渲染，jscore執行js程序。要學習RN你要先學會react，react是率先提出虛擬DOM概念的，后續vue等框架開始模仿，正因為虛擬DOM的概念太過強大和超前，導致它不受平臺限制，從而衍生了RN，它的背后也是大廠支持facebook。說它涼了都是謠言，大家放心學習即可。它的原理是通過react的方式可開發APP，它可以把我們用JS寫的組件，編譯成原生組件，不是什么H5應用或是webapp。所以用戶體驗還是很不錯的，小公司追求效率可以選擇，但是RN畢竟是一個APP UI的解決方案，需要集成復雜SDK的話還需要會原生開發。目前它的生態已經非常完整完善，你不必擔心你的APP太過復雜它不能實現的問題，因為它可以和原生無縫銜接配合，隨時呼叫原生支援。那么它的性能如何呢？有的人對于性能問題糾結不放，實話說；它和遠程肯定還是有差距的，畢竟中間多個JS層，基于jscore運行的，但是一般APP用戶根本無法察覺其中的差距，沒有垃圾框架只有垃圾程序員，我們完全可以用技術彌補一些性能差距，所以不必在意那些微乎其微的性能差距，強烈建議學習和使用。

? 適用場景：可用于中大型APP開發，跟原生開發配合，RN主要用于開發業務，而原生用于擴展賦能，需要的人才質量高，招聘難度較大，性能問題不大，介于webview和原生之間，不適合太吃性能的APP開發。

2.?Uni-app（國產 零學習成本 社區強大 外包利器）

? 第二個要說的是國內很火的uniapp，編譯成原生組件結合webview渲染方式，V8和jscore執行js程序。號稱有370W開發者，在國內很火，它背后的公司是國內的dcloud，技術棧是基于vue的。react在國際上很火，但是在國內；不好意思vue已經是大哥了?？梢哉fdcloud把vue玩的很透，基本可以說是國內vue用的最6的公司，uniapp的優點是能夠一次編寫編譯APP和小程序端全覆蓋，對于國內程序真的是福音，它的優勢在于成本低（學習成本低、開發成本低），uniapp結合了weex的概念推出了nvue，它的原理在于能把web組件編譯成遠程組件，跟RN有些相似的想法。但是uniapp開源程度不夠，現在選擇它的都是一些小公司或是外包公司，uniapp提供了很多與原生/小程序交互的“橋”，目的在于讓你無腦開發即可，我們可以輕松開發例如微信支付、藍牙、分享、定位、推送等，而且uniapp上架商店是完全合規沒有風險的，有人說它是基于webview的，性能是個問題，我本人體驗了一下和親身用過uniapp開發，認為uniapp是做過很多優化的，比我們自己套個殼子用的webview用戶體驗要好很多（小公司不推薦套殼開發），高頻頁面可以用nvue開發，效果更好，如果我們前期開發為了快速上線，完全可以選擇uniapp，非常符合國內的國情，為國內程序員提供了很大的福利，vue技術棧的同學可以學習掌握。

3.?Flutter（Google出品 性能強勁 噱頭滿滿）

?適用場景：因為flutter跟原生基本無異，任何場景都很適合，成本偏高，人才招聘難度最大，適合CS程序員學習，BS程序員學習成本較高。

4.?Taro（京東出品 react/vue技術棧都可用）

? ?基于京東-凹凸實驗室，技術棧：vue/react，對React更友好一些，對Vue的支持是后出現的，能編譯成H5、小程序、APP（編譯成RN代碼）。Taro搞個小程序還是完全OK的。

5.??Electron?VScode的技術棧 桌面開發首選）

? 它是基于BS開發電腦桌面的框架，大名鼎鼎的VScode就是用它開發的（當然是微軟團隊開發的），現在已經成為前端人員開發桌面應用的首選沒有之一。