移動(dòng)端混合開發(fā)框架分析

1、移動(dòng)端架構(gòu)分析目錄 TOC o 1-5 h z 移動(dòng)端架構(gòu)撕1 HYPERLINK l bookmark58 o Current Document 1 移動(dòng)端常見開發(fā)模式5 HYPERLINK l bookmark61 o Current Document 純 Native app 5 HYPERLINK l bookmark65 o Current Document 主流框架5 HYPERLINK l bookmark69 o Current Document 優(yōu)勢(shì)6 HYPERLINK l bookmark72 o Current Document 劣勢(shì)6 HYPERLINK l book

2、mark75 o Current Document 主流應(yīng)用6 HYPERLINK l bookmark78 o Current Document L2Hybrid app 6 HYPERLINK l bookmark82 o Current Document 多View混合型7 HYPERLINK l bookmark85 o Current Document 主流框架7 HYPERLINK l bookmark89 o Current Document 優(yōu)勢(shì)7 HYPERLINK l bookmark93 o Current Document 劣勢(shì)7 HYPERLINK l bookmar

3、k97 o Current Document 主流應(yīng)用7 HYPERLINK l bookmark100 o Current Document 發(fā)展趨勢(shì)7 HYPERLINK l bookmark103 o Current Document Web 主體型8 HYPERLINK l bookmark129 o Current Document 主流框架平臺(tái)8 HYPERLINK l bookmark133 o Current Document 優(yōu)勢(shì)9 HYPERLINK l bookmark137 o Current Document 劣勢(shì)9 HYPERLINK l bookmark120 o

4、 Current Document 主流應(yīng)用10 HYPERLINK l bookmark123 o Current Document 發(fā)展趨勢(shì)10 HYPERLINK l bookmark126 o Current Document 1.2.3單View混合型 10 HYPERLINK l bookmark148 o Current Document 主流框架10 HYPERLINK l bookmark151 o Current Document 優(yōu)勢(shì)10 HYPERLINK l bookmark158 o Current Document 劣勢(shì)10 HYPERLINK l bookmar

5、k166 o Current Document 主流應(yīng)用10 HYPERLINK l bookmark144 o Current Document Web App 10主流框架11 HYPERLINK l bookmark112 o Current Document 優(yōu)勢(shì)11 HYPERLINK l bookmark116 o Current Document 劣勢(shì)11 HYPERLINK l bookmark141 o Current Document 主流應(yīng)用11四種主要開發(fā)模式對(duì)比112移動(dòng)前端主流框架分析12 HYPERLINK l bookmark169 o Current Docu

6、ment Web 和 Native 混合 12 HYPERLINK l bookmark172 o Current Document WindVane+Hybrid + Native 12 HYPERLINK l bookmark181 o Current Document 簡(jiǎn)介12 HYPERLINK l bookmark185 o Current Document 框架實(shí)現(xiàn)12 HYPERLINK l bookmark188 o Current Document 架構(gòu)圖13AppCan 13簡(jiǎn)介13 HYPERLINK l bookmark197 o Current Document 框架

7、實(shí)現(xiàn) 13 HYPERLINK l bookmark200 o Current Document 架構(gòu)圖142.2 跨平臺(tái)原生應(yīng)用15BeeFramework 15簡(jiǎn)介15 HYPERLINK l bookmark209 o Current Document 框架實(shí)現(xiàn)15 HYPERLINK l bookmark212 o Current Document 架構(gòu)圖16Native Script 17簡(jiǎn)介17 HYPERLINK l bookmark221 o Current Document 框架實(shí)現(xiàn)17結(jié)構(gòu)圖18React Native 18簡(jiǎn)介18 HYPERLINK l bookmark

8、178 o Current Document 框架實(shí)現(xiàn)18架構(gòu)圖203數(shù)夢(mèng)移動(dòng)端開發(fā)框架選擇 錯(cuò)誤！未定義書簽。開發(fā)模式選擇20為什么不選擇Native 20 HYPERLINK l bookmark227 o Current Document 玩什么不選擇WebApp或Web主體型Hybird21 HYPERLINK l bookmark230 o Current Document 選擇多頁(yè)面混合型Hybird 21 HYPERLINK l bookmark233 o Current Document 選擇類WindVane框架21 HYPERLINK l bookmark236 o Cur

9、rent Document 玩什么不選擇 React Native 21 HYPERLINK l bookmark239 o Current Document 玩什么選擇類WindVane框架21Native HybridWebweb諾言：Htm!受限制 TUlweoview頁(yè)面放于服務(wù)器1移動(dòng)端常見開發(fā)模式目前主流應(yīng)用程序大體分為三類：Native App、Hybrid App、Web App。原生語(yǔ)言：Object C (IOJava( Android) 頁(yè)面存放于本地濕舍請(qǐng)言:ObiectCffOS)+ Htm 受限制于U Iwe bvi如純 Native AppNative APP指的

10、是使用原生程式編寫運(yùn)行的第三方應(yīng)用程序，一般依托于操作系統(tǒng)如 iOS、Android、WP，有很強(qiáng)的交互，是一個(gè)完整的App，可拓展性強(qiáng)。需要用戶下載安 裝使用。也叫本地app。Native App因?yàn)槲挥谄脚_(tái)層上方，向下訪問和兼容的能力會(huì)比較好一些，可以支持在 線或離線，消息推送或本地資源訪問，攝像撥號(hào)功能的調(diào)取。但是由于設(shè)備碎片化，App 的開發(fā)成本要高很多，維持多個(gè)版本的更新升級(jí)比較麻煩，用戶的安裝門檻也比較高。但是 比較樂觀的是，AppStore培養(yǎng)了一種比較好的用戶付費(fèi)模式，所以在Apple的生態(tài)圈里， 開發(fā)者的盈利模式是一種明朗狀態(tài)，其他market也在往這條路上靠攏。主流框架iO

11、S：(11 Cocoa 環(huán)境+Foundation 和 UIKit 框架(2 使用Objective-C和Swift做為主要開發(fā)語(yǔ)言(兼容C/C+)Android：(1 Java虛擬機(jī)環(huán)境(2 使用Java作為主要開發(fā)語(yǔ)言(支持C/C+)WindowsPhone :(1 WindowsRunTime 框架(WP10)(2使用原生C+、C#和 Silverlight做為主要開發(fā)語(yǔ)言1.1.2優(yōu)勢(shì)(1 打造完美的用戶體驗(yàn)(2 性能穩(wěn)定(3 操作速度快，上手流暢(4 訪問本地資源(通訊錄，相冊(cè))(5 設(shè)計(jì)出色的動(dòng)效，轉(zhuǎn)場(chǎng)(6 擁有系統(tǒng)級(jí)別的貼心通知或提醒(7用戶留存率高1.1.3劣勢(shì)(1 開發(fā)成本高

12、，可移植性差，需要維護(hù)iOS、Android、WP等多個(gè)平臺(tái)(不同平 臺(tái)有不同的開發(fā)語(yǔ)言和界面適配)(2 維護(hù)成本高(例如一款A(yù)pp已更新至V5版本，但仍有用戶在使用V2，V3， V4版本，需要更多的開發(fā)人員維護(hù)之前的版本)(3 更新緩慢，根據(jù)不同平臺(tái)，提交-審核-上線等等不同的流程，需要經(jīng)過(guò)的流程 較復(fù)雜1.1.4主流應(yīng)用夠快云庫(kù)、微信電話本、美圖秀秀等中量級(jí)應(yīng)用。HybridAppHybrid APP指的是半原生半Web的混合類App。需要下載安裝，部分頁(yè)面看上去類 似Native App，但只有很少的UI Web View，訪問的內(nèi)容是Web。Hybrid App主要以JS+Native

13、兩者相互調(diào)用為主，從開發(fā)層面實(shí)現(xiàn)一次開發(fā)，多 處運(yùn)行”的機(jī)制，成為真正適合跨平臺(tái)的開發(fā)。Hybrid App同時(shí)使用網(wǎng)頁(yè)語(yǔ)言與程序語(yǔ)言開發(fā)，通過(guò)應(yīng)用商店區(qū)分移動(dòng)操作系統(tǒng)分發(fā)， 用戶需要安裝使用的移動(dòng)應(yīng)用?？傮w特性更接近Native App但是和Web App區(qū)別較大。 只是因?yàn)橥瑫r(shí)使用了網(wǎng)頁(yè)語(yǔ)言編碼，所以開發(fā)成本和難度比Native App要小很多。因此說(shuō)， Hybrid App兼具了 Native App的所有優(yōu)勢(shì)，也兼具了 Web App使用HTML5跨平臺(tái)開 發(fā)低成本的優(yōu)勢(shì)。Hybrid App按網(wǎng)頁(yè)語(yǔ)言與程序語(yǔ)言的混合，通常分為三種類型：多View混合型，單View混合型，Web主體型

14、。1.2.1多View混合型即Native View和Web View獨(dú)立展示,Native View與WebView交替的場(chǎng)景出現(xiàn)。 這種應(yīng)用混合邏輯相對(duì)簡(jiǎn)單。即在需要的時(shí)候?qū)ebView當(dāng)成一個(gè)獨(dú)立的View(Activity) 運(yùn)行起來(lái)，在WebView內(nèi)完成相關(guān)的展示操作。這種移動(dòng)應(yīng)用主體通常是Native App， Web技術(shù)只是起到補(bǔ)充作用。開發(fā)難度和Native App基本相當(dāng)。主流框架Native部分使用操作系統(tǒng)原生框架+JSBridge。Web融合部分國(guó)內(nèi)阿里系使用最廣的框架WindVane+HybridAPI等(后續(xù)章節(jié)詳細(xì) 介紹優(yōu)勢(shì)(1 高效、擴(kuò)展性強(qiáng)、支持多團(tuán)隊(duì)并行開

15、發(fā)(2 銜接Android/iOS原生導(dǎo)航交互，完美的用戶體驗(yàn)(3 業(yè)務(wù)實(shí)現(xiàn)更靈活，復(fù)雜業(yè)務(wù)可通過(guò)Native實(shí)現(xiàn)，頻繁變化或簡(jiǎn)單業(yè)務(wù)通過(guò)Web 實(shí)現(xiàn)，更好的滿足移動(dòng)端業(yè)務(wù)多樣性、快速迭代要求(4 輕量級(jí)的框架，框架侵入性弱，各個(gè)業(yè)務(wù)高度獨(dú)立，第三方業(yè)務(wù)快速接入(5 使用JS Bridge來(lái)實(shí)現(xiàn)HTML5頁(yè)面與原生框架的數(shù)據(jù)交互：JSNative，性 能和安全性更佳(6 擴(kuò)展豐富，能實(shí)現(xiàn)超級(jí)App劣勢(shì)(1 技術(shù)要求高，需要開發(fā)人員同時(shí)懂Native和WebApp開發(fā)(2 重量級(jí)架構(gòu)，架構(gòu)搭建需要較長(zhǎng)時(shí)間(3 開源社區(qū)相關(guān)框架少，成熟框架如WindVane等不開源主流應(yīng)用目前使用最常用的開發(fā)模式

16、，市場(chǎng)上能見到的超級(jí)App基本都是用這種開發(fā)模式，如 微信、支付寶、淘寶等；其他如釘釘、新聞客戶端等移動(dòng)端App發(fā)展趨勢(shì)2014-2015最新發(fā)展趨勢(shì)，同時(shí)在Web和Native融合的基礎(chǔ)上加入ReactNative或NativeScript等跨平臺(tái)構(gòu)建原生應(yīng)用框架(見后續(xù)介紹。Web主體型即移動(dòng)應(yīng)用的主體是Web View，主要以網(wǎng)頁(yè)語(yǔ)言編寫，穿插Native功能的Hybrid App開發(fā)類型。這種類型開發(fā)的移動(dòng)應(yīng)用體驗(yàn)相對(duì)而言存在缺陷，但整體開發(fā)難度大幅降 低，并且基本可以實(shí)現(xiàn)跨平臺(tái)。Web主體型的移動(dòng)應(yīng)用用戶體驗(yàn)的好壞，主要取決于底層 中間件的交互與跨平臺(tái)的能力。國(guó)外的appMobi、P

17、honeGap和國(guó)內(nèi)的WeX5、AppCan 和Rexsee都屬于Web主體型移動(dòng)應(yīng)用中間件。其中Rexsee不支持跨平臺(tái)開發(fā)appMobi 和PhoneGap除基礎(chǔ)的底層能力更多是通過(guò)插件（Plugins）擴(kuò)展的機(jī)制實(shí)現(xiàn)Hybrid。 AppCan除了插件機(jī)制，還提供了大量的單View混合型的接口來(lái)完善和彌補(bǔ)Web主體型 Hybrid App體驗(yàn)差的問題，接近Native App的體驗(yàn)。而WeX5則在揉合PhoneGap和 Bootstrap等主流技術(shù)的基礎(chǔ)上，對(duì)性能進(jìn)一步做了深度優(yōu)化，不但完全具備Native App 對(duì)本地資源的調(diào)用能力，性能體驗(yàn)也不輸原生；WeX5所開發(fā)出來(lái)的app具備

18、完全的跨端 運(yùn)行能力，可以無(wú)需任何修改直接運(yùn)行在各種前端環(huán)境上。主流框架平臺(tái)1、AppceleratorAppcelerator 的 Titanium 開發(fā)平臺(tái)使開發(fā)者可以通過(guò) HTML、PHP、JavaScript、 Ruby、Python等Web編程語(yǔ)言開發(fā)手機(jī)、平板和桌面的原生App。其優(yōu)勢(shì)在于它可以讓 用戶輕松地訪問超過(guò)300個(gè)API以及定位信息。此外，Appcelerator提供針對(duì)特定行為或事件定制的統(tǒng)計(jì)。App的數(shù)據(jù)既可儲(chǔ)存在云 端，也可儲(chǔ)存在設(shè)備上。2、APICloudAPICloud是一款云端一體的移動(dòng)開發(fā)平臺(tái)，信仰云端一體的理念，重新定義 了移動(dòng)應(yīng)用開發(fā)。APICloud為

19、開發(fā)者從云和端兩個(gè)方向提供API，簡(jiǎn)化移動(dòng)應(yīng)用 開發(fā)技術(shù)，讓移動(dòng)應(yīng)用的開發(fā)周期從一個(gè)月縮短到7天。APICloud由云API和端 API兩部分組成，可以幫助開發(fā)者快速實(shí)現(xiàn)移動(dòng)應(yīng)用的開發(fā)、測(cè)試、發(fā)布、管理和運(yùn)營(yíng)的 全生命周期管理。3、PhoneGapPhoneGap是一個(gè)免費(fèi)且開源的開發(fā)環(huán)境，使開發(fā)者可以開發(fā)出在Android、Palm、 黑莓、iPhone、iTouch及iPad等設(shè)備上運(yùn)行的App。其使用的是HTML和JavaScript 等標(biāo)準(zhǔn)的Web開發(fā)語(yǔ)言。開發(fā)者使用PhoneGap進(jìn)行開發(fā)，可調(diào)用加速計(jì)、GPS/定位、照相機(jī)、聲音等功能。PhoneGap還提供Adobe AIR Ap

20、p以及在線的培訓(xùn)課程，幫助開發(fā)者了解原生API 并在他們自己的平臺(tái)上開發(fā)移動(dòng)App。4、KinveyKinvey同樣是一個(gè)為移動(dòng)應(yīng)用開發(fā)者提供后臺(tái)創(chuàng)建服務(wù)的平臺(tái)。Kinvey強(qiáng)調(diào)加速移動(dòng) 應(yīng)用開發(fā)與銷售的即取即用理念。Kinvey的中間層與數(shù)據(jù)層均托管在多個(gè)云服務(wù)提供 商處，包括Rackspace、Amazon與Microsoft。所有通過(guò)Kinvey存儲(chǔ)的數(shù)據(jù)都會(huì)有四 種方式備份：Amazon EC2、Windows Azure、Rackspace 以及 Kinvey 自己的服務(wù)器， 假如其中一兩個(gè)出現(xiàn)了故障，用戶的數(shù)據(jù)依然安然無(wú)恙。5、ExMobiExMobi通過(guò)全面的數(shù)據(jù)集成技術(shù)和豐富的

21、跨平臺(tái)客戶端展現(xiàn)能力，將業(yè)務(wù)系統(tǒng)快速、 安全、高效的移植于移動(dòng)終端。ExMobi從開發(fā)(IDE環(huán)境 集成(IT系統(tǒng)對(duì)接、云服務(wù) 打包(各個(gè)操作系統(tǒng)的應(yīng)用打包、發(fā)布(應(yīng)用的運(yùn)行)管理(日志管理，更新管理)上提 供了一套完整的解決方案。并通過(guò)專業(yè)的培訓(xùn)和支撐渠道為開發(fā)者提供可持續(xù)的學(xué)習(xí)和交流 空間，掃除開發(fā)障礙。優(yōu)勢(shì)(1可跨平臺(tái)，兼容iOS、Android、WP等多個(gè)平臺(tái)(2 易用性，會(huì)Web開發(fā)即可轉(zhuǎn)型App開發(fā)(3可利用成熟javascript框架(4 程序升級(jí)簡(jiǎn)單(5 維護(hù)難度低劣勢(shì)(1 運(yùn)行速度慢(2 不適合部分程序，如復(fù)雜的動(dòng)畫、3D功能、音頻視頻以及復(fù)雜的界面邏輯等(3 調(diào)用平臺(tái)資源差

22、，功能受限平臺(tái)實(shí)現(xiàn)(4 資源占用大，如內(nèi)存、CPU、網(wǎng)絡(luò)帶寬等(5 調(diào)試難度大(6 不利于多人協(xié)作開發(fā)主流應(yīng)用12306客戶端、中國(guó)工商銀行客戶端等功能較單一的輕量級(jí)應(yīng)用。發(fā)展趨勢(shì)雖然跨平臺(tái)復(fù)用代碼是一個(gè)火熱的話題，但是基于Html5的PhoneGap等Hybrid 框架沒有被大多數(shù)人接受(運(yùn)行速度慢、交互差是主要原因)，目前更多的方案是Web和 Native多View混合或用各種辦法產(chǎn)生原生的UI界面(如BeeFramework、NativeScript、 ReactNative 等)。1.2.3單View混合型即在同一個(gè)View內(nèi)，同時(shí)包括Native View和Web View?；ハ嘀g

23、是覆蓋(層疊)的 關(guān)系。這種Hybrid App的開發(fā)成本較高，開發(fā)難度較大，但是體驗(yàn)較好。如百度搜索為代 表的單View混合型移動(dòng)應(yīng)用，既可以實(shí)現(xiàn)充分的靈活性，又能實(shí)現(xiàn)較好的用戶體驗(yàn)。主流框架基本沒有特別成型的框架，主要為部分App做Web嵌套，完成廣告、宣傳等功能。Native 部分同 NativeApp。Web 部分同 WebApp。優(yōu)勢(shì)(1 能解決廣告、宣傳等模塊變化過(guò)快問題，滿足市場(chǎng)需求(2 有NativeApp的大部分優(yōu)點(diǎn)劣勢(shì)(1 開發(fā)難度大，Native和Web代碼混合，技術(shù)難度基本等同Native開發(fā)(2 維護(hù)難度大等Native常見的缺點(diǎn)主流應(yīng)用目前純粹使用單View混合型的

24、App較少(部分App的部分頁(yè)面會(huì)用這種開發(fā)模式)， 主要應(yīng)用場(chǎng)景如App中添加廣告、宣傳等。WebAppWeb App指采用Html5語(yǔ)言寫出的App，不需要下載安裝。類似于現(xiàn)在所說(shuō)的輕應(yīng)用。生存在瀏覽器中的應(yīng)用，基本上可以說(shuō)是觸屏版的網(wǎng)頁(yè)應(yīng)用。1.3.1 主流框架jQueryMobile、AngularJS 等。1.3.2優(yōu)勢(shì)（1）開發(fā)成本低（2）更新快（3）更新無(wú)需通知用戶，不需要手動(dòng)升級(jí)（4）能夠跨多個(gè)平臺(tái)和終端1.3.3劣勢(shì)（1）臨時(shí)性的入口（2）無(wú)法獲取系統(tǒng)級(jí)別的通知，提醒，動(dòng)效等等（3）用戶留存率低（4）設(shè)計(jì)受限制諸多（5）體驗(yàn)較差1.3.4主流應(yīng)用微信公眾號(hào)/訂閱號(hào)應(yīng)用、支付寶

25、服務(wù)窗應(yīng)用等輕量級(jí)應(yīng)用。1.4四種主要開發(fā)模式對(duì)比Web App 網(wǎng)頁(yè)應(yīng)用Hybrid AppWeb主體型Hybrid App 多View混合型Native App 原生應(yīng)用開發(fā)成本低中Native部分成本宥Web部分成本低高維護(hù)更新簡(jiǎn)單簡(jiǎn)單Native部分復(fù)雜Web部分簡(jiǎn)單復(fù)雜儺僉差中優(yōu)優(yōu)性能慢慢較快快原生界面模擬模擬部分模擬原生官方市場(chǎng)認(rèn)可不認(rèn)可認(rèn)可認(rèn)可認(rèn)可安裝不需要需要需要需要跨平臺(tái)優(yōu)優(yōu)Web部分跨平臺(tái)優(yōu)差A(yù)pp級(jí)別輕量級(jí)輕量級(jí)超級(jí)App，支持App 中嵌套 MicroApp重量級(jí)適應(yīng)性一般中，對(duì)復(fù)雜應(yīng)用 支持較差優(yōu)一般2.1 Web 和 Native 混合WindVane+Hybrid

26、+Native簡(jiǎn)介WindVane是阿里內(nèi)部一種移動(dòng)端Web和Native混合框架，主要為解決多平臺(tái)統(tǒng)一 交互體驗(yàn)、動(dòng)態(tài)部署（插件化）等問題，降低開發(fā)成本，提升前端開發(fā)效率。WindVane 是對(duì)Native代碼的一種擴(kuò)展，基礎(chǔ)服務(wù)仍然以Native代碼為主。框架實(shí)現(xiàn)可定制化UI組件資源本地緩存，資源預(yù)置打包服務(wù)Web與本地功能模塊通信交互Web調(diào)用本地功能的JSBridge通信服務(wù)Hybrid API jstmall jstaobao jsal i pay jsEwindvane bridgealipay bridge -windvane nativealipay nativetaobao

27、native天貓客戶端淘寶客戶端支付寶錢包2.1.2 AppCan簡(jiǎn)介AppCan移動(dòng)應(yīng)用快速開發(fā)平臺(tái)是基于HTML5技術(shù)的跨平臺(tái)快速開發(fā)解決方案開發(fā) 者使用HTML5+CSS3+JavaScript技術(shù)可以快速的開發(fā)與本地應(yīng)用相媲美的移動(dòng)應(yīng)用，同時(shí) 支持 iOS、Android、Symbian、Windows Phone 四大智能操作系統(tǒng).AppCan-SDK 是 AppCan平臺(tái)專為開發(fā)者提供的IDE開發(fā)環(huán)境，集成了:1、移動(dòng)UI框架2、手機(jī)設(shè)備API 3、 調(diào)試模擬器4、離線打包服務(wù)5、應(yīng)用云端管理使移動(dòng)開發(fā)更加方便快捷.與Phonegap支持單一 webview使用div為單位開發(fā)移動(dòng)

28、應(yīng)用不同。AppCan支持多 窗口機(jī)制，讓開發(fā)者可以像最傳統(tǒng)的網(wǎng)頁(yè)開發(fā)一樣，通過(guò)頁(yè)面鏈接的方式靈活的開發(fā)移動(dòng)應(yīng) 用。基于這種機(jī)制，開發(fā)者可以開發(fā)出大型的移動(dòng)應(yīng)用，而不是只能開發(fā)簡(jiǎn)易類型的移動(dòng)應(yīng) 用。AppCan提供強(qiáng)大的設(shè)備調(diào)用能力，電話、短信、相機(jī)、LBS、傳感器、數(shù)據(jù)庫(kù)等常用 的手機(jī)功能，開發(fā)者可以通過(guò)JS接口調(diào)用，輕松構(gòu)建移動(dòng)應(yīng)用。AppCan是Web占主體型Native為輔的開發(fā)框架?？蚣軐?shí)現(xiàn)HTML5 :支持HTML5開發(fā)，CSS3實(shí)現(xiàn)布局優(yōu)化及交互提升原生體驗(yàn)：引入部分原生UI控件與交互支持（如Action Sheet等）開發(fā)工具：基于Eclipse的開發(fā)工具，集成UI控件與應(yīng)用管

29、理 模擬器：提供應(yīng)用全功能模擬器，方便開發(fā)調(diào)試UI框架：提供強(qiáng)大的UI框架，更加易于實(shí)現(xiàn)頁(yè)面布局與父互設(shè)備API :支持各種手機(jī)設(shè)備調(diào)用，如電話、相機(jī)、傳感器、定位等 本地打包：無(wú)需配置環(huán)境，無(wú)需編譯，本地一鍵打包云端打包：提供云端打包服務(wù)，提供更加個(gè)性化的選擇多窗口機(jī)制：常見應(yīng)用只支持單一窗口，多窗口可以有效提高交互體驗(yàn) 插件機(jī)制：支持第三方原生插件，支持JS插件支付支持：相比國(guó)外中間件更具本土優(yōu)勢(shì)，Not Paypal but ZhiFuBao 代碼加密：基于密鑰的加密方式，無(wú)法破解，像混編一樣保P htm l代碼 統(tǒng)計(jì)分析：應(yīng)用分平臺(tái)安裝數(shù)統(tǒng)計(jì)，應(yīng)用啟動(dòng)和使用情況統(tǒng)計(jì)開放平臺(tái)：更具本土優(yōu)

30、勢(shì)，已經(jīng)對(duì)接Sina、QQ、百度等開放平臺(tái) 技術(shù)支持：技術(shù)支持及時(shí)響應(yīng)，重視開發(fā)者建議和反饋架構(gòu)圖生態(tài)結(jié)構(gòu)：移動(dòng)端框架:2.2跨平臺(tái)原生應(yīng)用BeeFramework簡(jiǎn)介Bee Framework是一款iOS快速開發(fā)框架允許開發(fā)者使用Objective-C和XML/CSS 來(lái)進(jìn)行iPhone和iPad開發(fā)，由Gavin Kwoe和QFish開發(fā)并維護(hù)。其早期原型曾經(jīng)被 應(yīng)用在QQ空間和QQ游戲大廳等多款精品APP中。Bee Framework包含豐富的組件和 工具。Bee Framework解決了 iOS開發(fā)者長(zhǎng)期困擾的各種問題，諸如:分層架構(gòu)如何設(shè)計(jì)， 層與層之間消息傳遞與處理，網(wǎng)絡(luò)操作及緩存

31、，異步及多線程，以及適配產(chǎn)品多變的UI布 局需求?？蚣軐?shí)現(xiàn)代碼注入借助于OC語(yǔ)言特性，Bee將核心邏輯注入到NSObject基類中去，在使用Bee時(shí)， 大多數(shù)情況下可以不必修改現(xiàn)有類繼承關(guān)系，這樣設(shè)計(jì)是把雙刃劍，也有可能與您現(xiàn)有方法 名沖突。基于MVC 模型典型的MVC架構(gòu)，清楚的分為View、Controller. Model三個(gè)層次，業(yè)務(wù)數(shù)據(jù)、業(yè)務(wù)邏輯、界面展現(xiàn)、交互邏輯完全分離。事件驅(qū)動(dòng)對(duì)于Controllers Model均與狀態(tài)無(wú)關(guān)（Stateless），因此由三種Event驅(qū)動(dòng):Message、Request、Notification。對(duì)于View ,我們拋棄掉了老舊的Delega

32、te （語(yǔ)言級(jí)實(shí)現(xiàn)方式）, 引入新概念UISignal （框架級(jí)實(shí)現(xiàn)方式）用來(lái)驅(qū)動(dòng)界面交互事件或狀態(tài)改變。UlSignalUISignal 擁有極強(qiáng)的路由能力，可以在UIView UIView UIViewController UINavigationController UIViewController 之間完成復(fù)雜且高效的的 UI 信號(hào)路 由。架構(gòu)圖Business ModelBusiness ControllerSkeletonCocoaTouchVendor librariesUI BindingThemeUILayoutYour appStandardTemplatesUI Quer

33、yUI EventUI AnimationUl ElementUI ContainerUI TemplateResourceNetworkCacheLocalizationFoundationNativeScript簡(jiǎn)介一個(gè)開源的框架，可以使用JavaScript開發(fā)跨平臺(tái)、真正原生的iOS, Android和 Windows移動(dòng)App。開發(fā)人員使用NativeScript提供的庫(kù)來(lái)構(gòu)建應(yīng)用UI，其抽象了各種 原生平臺(tái)之間的不同。框架實(shí)現(xiàn)NativeScript 運(yùn)行時(shí)NativeScript 使用 JavaScript 虛擬機(jī)，在 Android 上采用 Google V8 JavaScri

34、pt 引 擎，iOS上采用JavaScriptCore引擎。通過(guò)JS解析引擎，在JavaScript和原生語(yǔ)言之間 的轉(zhuǎn)換，建立跨平臺(tái)橋梁。JavaScript虛擬機(jī)管理V8知道Android是什么 同理JavaScriptCore也知道iOS是什么)，因?yàn)镹ativeScript 在運(yùn)行時(shí)進(jìn)行了注入，因?yàn)閂8擁有一堆讓你配置JavaScript環(huán)境的API。在JavaScript 中您可以使用自定義的C+代碼來(lái)分析CPU使用率，管理的JavaScript垃圾收集，等等 一大堆API面對(duì)這些API的是幾個(gè)Context”類，可以讓你操縱全局變量，從而有可能為 NativeScript注入一個(gè)全

35、局的android對(duì)象。這實(shí)際上使用了與Node.js的相同運(yùn)行機(jī)制， 使全局API可用-如require() - NativeScript使用它注入可以讓你訪問本地代碼的API。 JavaScriptCore的也有類似的機(jī)制。Metadata (元數(shù)據(jù))對(duì)于NativeScript，反射是讓NativeScript可以調(diào)用每個(gè)平臺(tái)上的API的基石。因?yàn)?從性能角度來(lái)看重構(gòu)這些API是很困難的，NativeScript會(huì)提前做掉這些，并在 Android/iOS預(yù)編繹過(guò)程中嵌入預(yù)先生成的元數(shù)據(jù)。調(diào)用本地代碼NativeScript如何調(diào)用本機(jī)代碼的答案就在于JavaScript虛擬機(jī)的API。

36、我們上次使 用V8的API是注入全局變量。這一次我們將著眼于在JavaScript回調(diào)中調(diào)用給定的C+ + 代碼。例如，JavaScript 函數(shù)調(diào)用的代碼 new android.text.format.Time()，V8 會(huì)產(chǎn)生一個(gè) 回調(diào)。也就是說(shuō)V8有一個(gè)回調(diào)，讓NativeScript攔截函數(shù)調(diào)用，然后用自定義的C +代 碼執(zhí)行一些動(dòng)作，并返回一個(gè)新的結(jié)果。在Android中的情況下，NativeScript運(yùn)行的C+代碼不能直接訪問Java API，如 android.text.format.Time。然而，Android 的 JNI，或 Java 本地接口，提供了 C+ 和 Jav

37、a之間的橋接能力，所以NativeScript使用JNI完成轉(zhuǎn)發(fā)。在iOS中這個(gè)橋梁是不必要 的，因?yàn)镃+代碼可以直接調(diào)用Objective-C的API。結(jié)構(gòu)圖NativeScript ModulesReact Native簡(jiǎn)介React Native使你能夠使用基于JavaScript和React 一致的開發(fā)體驗(yàn)在本地平臺(tái) 上構(gòu)建世界一流的應(yīng)用程序體驗(yàn)。React Native把重點(diǎn)放在所有開發(fā)人員關(guān)心的平臺(tái)的開 發(fā)效率上開發(fā)者只需學(xué)習(xí)一種語(yǔ)言就能輕易為任何平臺(tái)高效地編寫代碼。Facebook 在多個(gè)應(yīng)用程序產(chǎn)品中使用了 React Native，并將繼續(xù)為React Native投資?？蚣?/p>

38、實(shí)現(xiàn)原生的iOS組件可使用標(biāo)準(zhǔn)平臺(tái)組件，比如iOS平臺(tái)上的UITabBar和UINavigationController。 這可以讓你的應(yīng)用程序擁有和原生平臺(tái)一致的外觀和體驗(yàn)，并保持較高的品質(zhì)。使用相應(yīng)的 React組件，如iOS標(biāo)簽欄和iOS導(dǎo)航器，這些組件可以輕松并入你的應(yīng)用程序中。異步執(zhí)行JavaScript應(yīng)用代碼和原生平臺(tái)之間所有的操作都是異步執(zhí)行，并且原生模塊也可以 使用額外線程。這意味著我們可以解碼主線程圖像，并將其在后臺(tái)保存至磁盤，在不阻塞UI 的情況下進(jìn)行文本和布局的估量計(jì)算，等等。因此，React Native應(yīng)用程序的流暢度和響 應(yīng)性都非常好。通信也是完全可序列化的，當(dāng)運(yùn)

39、行完整的應(yīng)用程序時(shí)，這允許我們使用 Chrome Developer Tools來(lái)調(diào)試JavaScript，或者在模擬器中，或者在真機(jī)上。觸摸處理iOS有一個(gè)非常強(qiáng)大的系統(tǒng)稱為Responder Chain,可以用來(lái)響應(yīng)復(fù)雜視圖層級(jí)中的 事件，但是在Web中并沒有類似功能的工具。React Native可實(shí)現(xiàn)類似的響應(yīng)系統(tǒng)并提 供高水平的組件，比如TouchableHighlight,無(wú)需額外配置即可與滾動(dòng)視圖和其他元素適 度整合。彈性框和樣式布局視圖應(yīng)該是簡(jiǎn)單的，所以我們將Web平臺(tái)上的彈性框模塊引入了 React Native。 彈性框可用來(lái)搭建最常用的UI布局比如代用邊緣和填充的堆疊和嵌

40、入。React Native還 支持常見的Web樣式，比如fontWeight和StyleSheet抽象，它們提供了一種優(yōu)化機(jī) 制來(lái)宣稱你所有的樣式和布局在組件中的應(yīng)用是正確的，且組件把它們應(yīng)用到了內(nèi)網(wǎng)中。PolyfillsReact Native的重點(diǎn)是改變視圖代碼編寫的方式。接下來(lái)，我們注意網(wǎng)絡(luò)中普遍的并 把那些API放在適當(dāng)?shù)牡胤??？梢允褂胣pm安裝JavaScript庫(kù)，這些庫(kù)用于融入到 React Native 中的頂級(jí)功能比如 XMLHttpRequest，window.requestAnimationFrame 及navigator.geolocation。我們正在擴(kuò)大可用的API，并致力于為開源社區(qū)做出貢獻(xiàn)?？蓴U(kuò)展性使用React Native無(wú)需編寫一行原生代碼即可創(chuàng)建出一款不錯(cuò)的應(yīng)用程序，并且 React Native可通過(guò)自定義原生視圖和模塊來(lái)進(jìn)行擴(kuò)展-也就是說(shuō)你可以重用你已經(jīng)構(gòu)建 的任何內(nèi)容，并且可導(dǎo)入和使用你最喜歡的原生庫(kù)。