目前編寫(xiě)一款簡(jiǎn)單的手機(jī)應(yīng)用APP一般用什么編程語(yǔ)言？

編寫(xiě)手機(jī)App，用什么語(yǔ)言？

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)東興,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792

從簡(jiǎn)單到復(fù)雜，可以分三級(jí)：

簡(jiǎn)單方案：HTML5

其實(shí)就是把網(wǎng)頁(yè)封裝成App。編程語(yǔ)言就是網(wǎng)頁(yè)三件套：HTML+CSS+Javascript

有多種工具和框架，如Cordova, uni等等。

這種方式實(shí)現(xiàn)“App”最容易，且跨平臺(tái)，對(duì)于iOS和Android做一套就行了。代價(jià)是功能弱，性能低，換句話說(shuō)就是“卡”。

中等方案：原生跨平臺(tái)框架

這類方案在iOS和Android之上自行實(shí)現(xiàn)一套原生框架。通用的Flutter, ReactNative都是流行的原生跨平臺(tái)框架。適用于 游戲 的Cocos2D，Corona SDK也可以算在這一級(jí)里。

這類方案實(shí)現(xiàn)App難度中等，因?yàn)榭缙脚_(tái)，一次開(kāi)發(fā)，iOS和Android都能運(yùn)行。功能和性能也是中等，比不上原生App，但比HTML5的又好很多。

復(fù)雜方案：原生開(kāi)發(fā)

直接在iOS和Android上各自開(kāi)發(fā)一套原生App。

iOS可以使用Objective C或Swift。

Android可以使用Java或Kotlin。

還是來(lái)一個(gè)圖表吧，雖然簡(jiǎn)單，卻很明了：

推薦用Flutter，簡(jiǎn)單。

以前自己用android原生寫(xiě)過(guò)7天酒店簽到程序，不過(guò)當(dāng)時(shí)的安卓還是比較難寫(xiě)的，不像現(xiàn)在越來(lái)越容易上手。

Flutter

Flutter是一個(gè)由谷歌開(kāi)發(fā)的開(kāi)源移動(dòng)應(yīng)用軟件開(kāi)發(fā)工具包，用于為Android、iOS、 Windows、Mac、Linux、Google Fuchsia開(kāi)發(fā)應(yīng)用。

Flutter應(yīng)用是使用Dart語(yǔ)言編寫(xiě)的，雖然是新的一種語(yǔ)言，但是難度不算大，上網(wǎng)搜下相關(guān)教程學(xué)習(xí)下，應(yīng)該就能很快上手。

Flutter效果

這里是我上個(gè)月仿照教程弄的一個(gè)簡(jiǎn)單APP，效果圖如下：

點(diǎn)擊"Next"就切換下一張，點(diǎn)擊"Pre"就切換前一張，點(diǎn)擊“Reset”就全部滑落下來(lái)。

我女兒最喜歡中間的Reset效果，哈哈。

希望這個(gè)答案能幫到你。

現(xiàn)在Flutter正式版已經(jīng)出來(lái)了，原生性能，安卓iOS多平臺(tái)支持，谷歌大廠背書(shū)，大家可以比較放心的學(xué)習(xí)。編程語(yǔ)言用的是Dart，可以看做是加了語(yǔ)法糖版本的Java，學(xué)習(xí)起來(lái)也比較容易，如果想做手機(jī)app，可以考慮使用它。

如果只是自己做著玩的話推薦用H5開(kāi)發(fā)，開(kāi)發(fā)工具HBuilder或者HBuilderX。

先科普下什么是IOS和Android吧。

IOS只是操作系統(tǒng)而已，是蘋(píng)果的操作系統(tǒng)。

開(kāi)發(fā)IOS上運(yùn)行的APP的話，現(xiàn)在流行的語(yǔ)言是Object-C和Swift。

Android也是操作系統(tǒng)，是谷歌基于Linux內(nèi)核開(kāi)發(fā)出來(lái)的手機(jī)操作系統(tǒng)。

開(kāi)發(fā)Android上運(yùn)行的APP的話，現(xiàn)在流行的語(yǔ)言我覺(jué)得仍然還是JAVA。

如果想要真的做一款A(yù)PP的話，不僅僅會(huì)一門(mén)語(yǔ)言就夠了，涉及的東西比較多，如下是我給你的學(xué)習(xí)推薦路線。

學(xué)習(xí)路線：

1：先學(xué)習(xí)js，然后學(xué)習(xí)下html 、css。

學(xué)習(xí)這些可以上菜鳥(niǎo)教程或者W3School網(wǎng)站學(xué)習(xí)。

開(kāi)發(fā)工具使用vscode或者Notepad++都可以的。

2：了解Mui常用組件（官網(wǎng)：），

熟悉常用API(官網(wǎng)：)。

3：服務(wù)端的開(kāi)發(fā)，要么用java開(kāi)發(fā)，要么用.net webapi開(kāi)發(fā)，推薦理由，java目前是主流，.net webapi簡(jiǎn)單容易。

java 開(kāi)發(fā)工具IntelliJ IDEA，.net 開(kāi)發(fā)工具 vs。

4：數(shù)據(jù)存儲(chǔ)使用mysql。

補(bǔ)充說(shuō)明：如果是想做專業(yè)開(kāi)發(fā)APP的話還是建議用java開(kāi)發(fā)客戶端，ios APP則用swift開(kāi)發(fā)。

當(dāng)然現(xiàn)在為了一套代碼多個(gè)平臺(tái)，使用H5開(kāi)發(fā)專業(yè)APP的也有。

會(huì)了就可以正式擼代碼實(shí)現(xiàn)自己簡(jiǎn)單的APP了。

回答完畢，謝謝。我是只說(shuō)代碼的大餅。

那當(dāng)然首選是h5套殼了。關(guān)于語(yǔ)言方面，我建議還是用PHP吧。隨著進(jìn)一步學(xué)習(xí)，可以學(xué)習(xí)uinapp一鍵多端。H5、小程序、App、小程序支持多個(gè)平臺(tái)上架、微信抖音支付寶百度，希望可以幫助你

目前有三種app開(kāi)發(fā)方式：原生app、混合app、webapp。

原生app：安卓需要java語(yǔ)言，ios需要 objec t-c，wp需要的.net語(yǔ)言。這種app用戶體驗(yàn)最好，性能也是最好的，開(kāi)發(fā)成本高，開(kāi)發(fā)周期長(zhǎng)，一款app需要開(kāi)發(fā)多個(gè)語(yǔ)言版本；

混合app：需要h5，javascript，了解每個(gè)混合框架，比如appcan、hbulider、phonegap等等，以及封裝的中間件。這種開(kāi)發(fā)方式的用戶體驗(yàn)、性能沒(méi)有原生的好，但是他的開(kāi)發(fā)周期短，開(kāi)發(fā)成本低，對(duì)開(kāi)發(fā)人員技能掌握比較高，開(kāi)發(fā)一套程序可以兼容到多個(gè)設(shè)備上；

webapp：需要h5、javascript語(yǔ)言，不能調(diào)用底層設(shè)備，用戶體驗(yàn)效果次之，開(kāi)發(fā)簡(jiǎn)單，開(kāi)發(fā)成本低，開(kāi)發(fā)周期短，可以兼容多個(gè)設(shè)備。

綜上所述三種開(kāi)發(fā)各有優(yōu)缺點(diǎn)，要根據(jù)具體的項(xiàng)目需求來(lái)選擇適合自己的開(kāi)發(fā)語(yǔ)言和開(kāi)發(fā)場(chǎng)景。

uniapp了解下，多端應(yīng)用。app的話要考慮安卓和蘋(píng)果，但學(xué)了二種學(xué)習(xí)成本比較高。用uniapp就解決了。

現(xiàn)在中小型企業(yè)都在逐漸采用跨平臺(tái)開(kāi)發(fā)的模式 效率高 成本低 作為個(gè)人更是開(kāi)發(fā)不二的選擇 你問(wèn)的iOS和安卓是原生開(kāi)發(fā) 需要不同的開(kāi)發(fā)語(yǔ)言和框架 學(xué)習(xí)成本也很高 既然你說(shuō)你是小白 如果采用原生開(kāi)發(fā) 可能得大概花一年半載才能開(kāi)始上手

采用跨平臺(tái)開(kāi)發(fā) 只需要學(xué)習(xí)一下html css JavaScript 然后選擇跨平臺(tái)開(kāi)發(fā)框架 比如react flutter uniapp 都可以 跨平臺(tái)就是指你這一套代碼編寫(xiě)的app可以到不同平臺(tái)運(yùn)行 比如iOS安卓都OK 但其實(shí)很多還可以編譯到各類小程序平臺(tái)運(yùn)行 所以很方便

我這里推薦uniapp 一個(gè)基于vue的跨端開(kāi)發(fā)框架 我自己也用這個(gè)開(kāi)發(fā)了很多項(xiàng)目 確實(shí)很快 也提供了原生渲染能力 不做 游戲 等軟件 基本沒(méi)啥問(wèn)題 社區(qū)插件市場(chǎng)也很熱鬧 基本有問(wèn)題可以很快解決 希望可以幫到你。

按照開(kāi)發(fā)方式可分為原生開(kāi)發(fā)、混合開(kāi)發(fā)、webapp開(kāi)發(fā)，不同的開(kāi)發(fā)方式學(xué)習(xí)的編程語(yǔ)言不一樣，下面我們來(lái)一個(gè)一個(gè)分析一下：

一、原生開(kāi)發(fā)

原生開(kāi)發(fā)的編程語(yǔ)言主要為針對(duì)IOS運(yùn)行環(huán)境的為編程語(yǔ)言為Swift或Object c，安卓環(huán)境為Java或Kotlin，WP環(huán)境為NET。原生開(kāi)發(fā)的運(yùn)行效率最高，用戶體驗(yàn)最好，但是需要學(xué)習(xí)不同平臺(tái)的編程語(yǔ)言，學(xué)習(xí)門(mén)檻較高。

二、混合開(kāi)發(fā)（偽原生開(kāi)發(fā)）

混合開(kāi)發(fā)技術(shù)主要采用一套特別的渲染引擎來(lái)渲染UI界面和交互，按照渲染引擎可分為html與dart，其編程語(yǔ)言主要是Javascript或Typescript、Dart。

目前基于html渲染的開(kāi)發(fā)框架有react native、weex、uniapp，基于dart的開(kāi)發(fā)框架只有flutter。

混合開(kāi)發(fā)由于調(diào)用了原生的控件來(lái)渲染UI，所以加載和體驗(yàn)與原生差不多，學(xué)習(xí)成本比較低，只要會(huì)js，選擇一個(gè)框架開(kāi)發(fā)就行了，或者學(xué)習(xí)dart語(yǔ)言，進(jìn)行flutter開(kāi)發(fā)。

三、webapp開(kāi)發(fā)

webapp開(kāi)發(fā)主要利用原生環(huán)境中的瀏覽器控件來(lái)裝載服務(wù)器上的html頁(yè)面，實(shí)際這個(gè)app就是一個(gè)自定義的瀏覽器app，所以只要會(huì)html，就會(huì)開(kāi)發(fā)webapp，由于app內(nèi)部加載的是遠(yuǎn)程的網(wǎng)頁(yè)，所以加載速度和體驗(yàn)最差。

以上是我個(gè)人的總結(jié)，有不對(duì)的歡迎指出，謝謝。

本人用c#，除了單片機(jī)用c，cad CATIA，多媒體主要Adobe，它干完所有，不需要性能的視圖混合dom代碼。

跨平臺(tái)桌面開(kāi)發(fā)，Electron還是WebView2 （中篇）

這一周繼續(xù)聊跨平臺(tái)桌面開(kāi)發(fā)這個(gè)事情。

在這篇文章中，我暫時(shí)會(huì)放下Electron與WebView2的一個(gè)對(duì)比，而聊一聊跨平臺(tái)這個(gè)對(duì)于程序員群體來(lái)說(shuō)不陌生的詞。

一個(gè)趨勢(shì)是：跨平臺(tái)開(kāi)發(fā)幾乎是在各個(gè)技術(shù)方向都會(huì)持續(xù)發(fā)展的

跨平臺(tái)這個(gè)詞，對(duì)于程序員來(lái)說(shuō)，應(yīng)該是不陌生的。因?yàn)檫@個(gè)概念不只在某一端存在，后端，前端，移動(dòng)端，桌面端幾乎所有方向都對(duì)跨平臺(tái)有需求。

在后端，Java是跨平臺(tái)的，當(dāng)你用Java來(lái)編寫(xiě)后端服務(wù)時(shí)，并不需要考慮操作系統(tǒng)，因?yàn)樗鼛缀踔С种髁鞯牟僮飨到y(tǒng)。現(xiàn)在，編寫(xiě)一個(gè)后端服務(wù)，選用Java仍是主流。雖然可能它的跨平臺(tái)特性已經(jīng)不是程序員最在意的點(diǎn)了。

而在移動(dòng)端，類似React Native，F(xiàn)lutter也是非常有名的跨平臺(tái)移動(dòng)開(kāi)發(fā)，它們與移動(dòng)原生開(kāi)發(fā)方式之間一直是競(jìng)爭(zhēng)與共存。

而前端因?yàn)橐劳杏跒g覽器，天然就是跨平臺(tái)的。事實(shí)上，很多應(yīng)用或服務(wù)早期紛紛選擇從原生應(yīng)用遷移至前端WEB方式的一個(gè)非常重要的原因就在于它是跨平臺(tái)的。

桌面操作系統(tǒng)很長(zhǎng)一段時(shí)間一直是Windows一家獨(dú)大，所以桌面開(kāi)發(fā)一直是Windows獨(dú)占，直至現(xiàn)在為止，很多專業(yè)級(jí)的軟件仍然是Windows獨(dú)占的。

而Linux桌面操作系統(tǒng)與MacOS桌面操作系統(tǒng)，早些年幾乎可以忽略不計(jì)，壓根不需要考慮這兩種系統(tǒng)。但隨著近些年它們的慢慢流行，特別是蘋(píng)果的MacOS的以其杰出的工藝，流暢的體驗(yàn)，疊加蘋(píng)果手機(jī)的流行，其市場(chǎng)份額增長(zhǎng)非常之快，在特定的諸如編程，設(shè)計(jì)等行業(yè)人群中使用范圍較廣，這使得開(kāi)發(fā)支持MacOS系統(tǒng)這個(gè)點(diǎn)變得越來(lái)越重要。

所以，在桌面開(kāi)發(fā)領(lǐng)域，跨平臺(tái)的需求也越來(lái)越高。

這也是Electron及早期的NW.js能迅速發(fā)展起來(lái)并得到非常廣應(yīng)用的原因所在。

無(wú)論是哪一端，跨平臺(tái)技術(shù)之所以頻繁出現(xiàn)與不斷發(fā)展，其根本原因就在于編程的一個(gè)重要痛點(diǎn)在于：

為了讓同一個(gè)服務(wù)能在所有設(shè)備上運(yùn)行，程序員不得不編寫(xiě)與維護(hù)非常多不同版本的程序

每一個(gè)程序或軟件后面的服務(wù)，都有一個(gè)非常迫切的需求，就是期望它的用戶無(wú)論何時(shí)，無(wú)論何地，無(wú)論使用任何設(shè)備，都能方便友好的使用這個(gè)服務(wù)。

也是因?yàn)檫@個(gè)原因，Web發(fā)展起來(lái)了，因?yàn)閃eb的優(yōu)勢(shì)就在這，只要你的設(shè)備上有瀏覽器，就能訪問(wèn)。

但Web畢竟性能有限，且瀏覽器這種形式并不利于用戶忠誠(chéng)度的培養(yǎng)，它存在天然的弱點(diǎn)。一些簡(jiǎn)單的操作服務(wù)使用Web并無(wú)問(wèn)題，但稍微有點(diǎn)要求的，Web可能就并不是非常適合。

所以，一種趨勢(shì)不可避免地流行起來(lái)：

對(duì)不同設(shè)備或系統(tǒng)進(jìn)行抽象，基于某一種特定的編程語(yǔ)言，編寫(xiě)出能與原生程序相媲美的，又能跨平臺(tái)的技術(shù)便層出不窮了

對(duì)吧，Java是使用JVM來(lái)抽象不同的操作系統(tǒng)，React Native則是使用虛擬DOM以及轉(zhuǎn)換成原生控件的方式來(lái)實(shí)現(xiàn)跨平臺(tái)，而Electron則是通過(guò)性能較好的Chrome內(nèi)核+NodeJS原生調(diào)用能力的搭配來(lái)實(shí)現(xiàn)跨平臺(tái)桌面開(kāi)發(fā)。

總而言之，這種跨平臺(tái)的技術(shù)不會(huì)消亡，只會(huì)有新的技術(shù)層出不窮，而它們與原生開(kāi)發(fā)一定是相互競(jìng)爭(zhēng)，配合與共存的。相互之間無(wú)法取代。

那再回到跨平臺(tái)技術(shù)上來(lái)說(shuō)，一個(gè)良好的跨平臺(tái)開(kāi)發(fā)的技術(shù)或框架，重點(diǎn)是什么。

或者換種方式說(shuō)，哪些特性使得它更易于流行起來(lái)？

我個(gè)人認(rèn)為有以下的幾個(gè)點(diǎn)：

跨平臺(tái)開(kāi)發(fā)技術(shù)能不能流行起來(lái)的一個(gè)非常重要的點(diǎn)就在于，使用了什么樣的編程語(yǔ)言。

以移動(dòng)端跨平臺(tái)開(kāi)發(fā)技術(shù)來(lái)說(shuō)明，一個(gè)React Native，一個(gè)Flutter，這兩個(gè)是比較知名主流的跨平臺(tái)移動(dòng)開(kāi)發(fā)技術(shù)。React Native使用的是前端React技術(shù)，而Flutter則是Google的D語(yǔ)言。

顯而易見(jiàn)的是，雖然Flutter是使用skia引擎在底層重繪一套UI，其性能相比React Native這種模式更佳，但React Native更易于被接受。

在流行度上，React Native始終比Flutter更流行，一個(gè)最重要的原因也在于：

使用已熟知的前端編程語(yǔ)言，比起重新學(xué)習(xí)一個(gè)D語(yǔ)言更易于被接受，維護(hù)成本更可控。

這個(gè)問(wèn)題在跨平臺(tái)桌面開(kāi)發(fā)中也是類似，跨平臺(tái)桌面開(kāi)發(fā)技術(shù)也不是Electron最開(kāi)始出現(xiàn)，比如著名的QT很早就有了，但比起Electron這種使用前端編程技術(shù)來(lái)說(shuō)，顯然在編程語(yǔ)言的門(mén)檻上和程序員群體上都存在困難，這也是Electron能后來(lái)居上的原因所在。

因?yàn)椋蠖鄶?shù)程序員群體，相比較另外學(xué)習(xí)一門(mén)什么語(yǔ)言去做什么，使用自己熟悉的語(yǔ)言來(lái)做什么是更容易，意愿也更高。

而從公司或團(tuán)隊(duì)的考量上看，選擇偏門(mén)的小眾語(yǔ)言存在成本上的顧慮，比如人員招聘是否容易？

跨平臺(tái)技術(shù)在嘗試解決不同平臺(tái)不一致，它或多或少會(huì)損耗性能。這也決定了幾乎沒(méi)有任何一個(gè)跨平臺(tái)技術(shù)能取代原生開(kāi)發(fā)。

這是一個(gè)取舍的問(wèn)題，對(duì)于一個(gè)程序來(lái)說(shuō)，究竟性能有多重要。對(duì)于比較看重性能的程序來(lái)說(shuō)，原生開(kāi)發(fā)可能是最優(yōu)選擇。

但跨平臺(tái)的性能損耗也有高低之分，并不在同一水平線上。

其實(shí)，無(wú)論是Electron，或是WebView2，都是基于瀏覽器內(nèi)核+前端技術(shù)的跨平臺(tái)桌面解決方案，這也是為什么要把它們放在一起聊的原因。

Electron是先行者（當(dāng)然，嚴(yán)格說(shuō)來(lái)，NW.js出現(xiàn)的更早，但今天它的流行度已遠(yuǎn)遠(yuǎn)落后于Electron了），而WebView2則是后來(lái)者。

那做為后來(lái)者的WebView2究竟做了哪些改進(jìn)？它又有多大的能力來(lái)挑戰(zhàn)Electron呢？

下一篇，繼續(xù)聊。

跨平臺(tái)技術(shù)；H5和Flutter誰(shuí)是未來(lái)？

前言

為什么跨平臺(tái)是發(fā)展趨勢(shì)？

同一個(gè)應(yīng)用，各個(gè)“端”獨(dú)立開(kāi)發(fā)，不僅開(kāi)發(fā)周期長(zhǎng)，而且人員成本高。同時(shí)，作為技術(shù)人員，也不應(yīng)該滿足于這種重復(fù)、低能的工作狀態(tài)。在這樣的形勢(shì)下，跨平臺(tái)的技術(shù)方案也受到越來(lái)越多人和企業(yè)的關(guān)注。

本篇文章我將從原理、優(yōu)缺點(diǎn)等方面為大家分享跨平臺(tái)技術(shù)

一. H5

說(shuō)到跨平臺(tái)，沒(méi)人不知道H5。不管是在Mac、Windows、Linux、iOS、Android還是其他平臺(tái)，只要給一個(gè)瀏覽器，連“月球”上它都能跑。

1.瀏覽器架構(gòu)

下面，我們來(lái)看看讓H5如此橫行霸道的瀏覽器的架構(gòu)：

瀏覽器由以上7個(gè)部分組成，而“渲染引擎”是性能優(yōu)化的重中之重，一起了解其中的渲染原理。

2.渲染引擎原理

不同的瀏覽器內(nèi)核不同，渲染過(guò)程會(huì)不太一樣，但主要流程還是一致的。

分為下面6步驟：

從以上6步，我們可以總結(jié)渲染優(yōu)化的要點(diǎn)：

以上就是瀏覽器端的內(nèi)容。但H5作為跨平臺(tái)技術(shù)的載體，是如何與不同平臺(tái)的App進(jìn)行交互的呢？這時(shí)候JSBridge就該出場(chǎng)了。

3.JSBridge原理

JSBridge，顧名思義，是JS和Native之間的橋梁，用來(lái)進(jìn)行JS和Native之間的通信。

通信分為以下兩個(gè)維度：

那么App內(nèi)加載H5的過(guò)程是什么樣的呢？

4.App打開(kāi)H5過(guò)程

打開(kāi)H5分為4個(gè)階段：

這四步，對(duì)應(yīng)的過(guò)程如上圖所以，我們可以針對(duì)性的做性能優(yōu)化。

5.優(yōu)缺點(diǎn)分析

下面，我們進(jìn)行H5的優(yōu)缺點(diǎn)分析：

優(yōu)點(diǎn)

缺點(diǎn)

雖然H5目前還存在不足，但隨著PWA、WebAssembly等技術(shù)的進(jìn)步，相信H5在未來(lái)能夠得到越來(lái)也好的發(fā)展。

二.小程序

2018年是微信小程序飛速發(fā)展的一年，19年，各大廠商快速跟進(jìn)，已經(jīng)有了很大的影響力。下面，我們以微信小程序?yàn)槔治鲂〕绦虻募夹g(shù)架構(gòu)。

小程序跟H5一樣，也是基于Webview實(shí)現(xiàn)。但它包含View視圖層、App Service邏輯層兩部分，分別獨(dú)立運(yùn)行在各自的WebView線程中。

1.View

可以理解為h5的頁(yè)面，提供UI渲染。由WAWebview.js來(lái)提供底層的功能,具體如下：

每個(gè)窗口都有一個(gè)獨(dú)立的WebView進(jìn)程，因此微信限制不能打開(kāi)超過(guò)5個(gè)層級(jí)的頁(yè)面來(lái)保障用戶體驗(yàn)。

2. App Service

提供邏輯處理、數(shù)據(jù)請(qǐng)求、接口調(diào)用。由WAService.js來(lái)提供底層的功能,具體如下：

運(yùn)行環(huán)境：

僅有一個(gè)WebView進(jìn)程

3.View App Service通信

視圖層和邏輯層通過(guò)系統(tǒng)層的JSBridage進(jìn)行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁(yè)面更新，視圖層將觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。

4. 優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

缺點(diǎn)

既然WebView性能不佳，那有沒(méi)有更好的方案呢？下面我們看看React Native。

三.React Native

RN的理念是在不同平臺(tái)上編寫(xiě)基于React的代碼，實(shí)現(xiàn)Learn once, write anywhere。

Virtual DOM在內(nèi)存中，可以通過(guò)不同的渲染引擎生成不同平臺(tái)下的UI，JS和Native之間通過(guò)Bridge通信

1.React Native 工作原理

在 React 框架中，JSX 源碼通過(guò) React 框架最終渲染到了瀏覽器的真實(shí) DOM 中，而在 React Native 框架中，JSX 源碼通過(guò) React Native 框架編譯后，與Native原生的UI組件進(jìn)行映射，用原生代替DOM元素來(lái)渲染，在UI渲染上非常接近Native App。

2.React Native 與Native平臺(tái)通信

3.優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

缺點(diǎn)

4.RN展望

雖然RN還存在不足，但RN新版本已經(jīng)做了如下改進(jìn)，并且RN團(tuán)隊(duì)也在積極準(zhǔn)備大版本重構(gòu)，能否成為開(kāi)發(fā)者們所信賴的跨平臺(tái)方案，讓我們拭目以待。

既然React Native在渲染方面還擺脫不了原生，那有沒(méi)有一種方案是直接操控GPU，自制引擎渲染呢，我們終于迎來(lái)了Flutter！

四.Flutter

Flutter是Google開(kāi)發(fā)的一套全新的跨平臺(tái)、開(kāi)源UI框架，支持iOS、Android系統(tǒng)開(kāi)發(fā)，并且是未來(lái)新操作系統(tǒng)Fuchsia的默認(rèn)開(kāi)發(fā)套件。渲染引擎依靠跨平臺(tái)的Skia圖形庫(kù)來(lái)實(shí)現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺(tái)、不同設(shè)備的體驗(yàn)一致性，邏輯處理使用支持AOT的Dart語(yǔ)言，執(zhí)行效率也比JavaScript高得多。

1.Flutter架構(gòu)原理

2.Dart優(yōu)勢(shì)

很多人會(huì)好奇，為什么Flutter要用Dart，而不是用JavaScript開(kāi)發(fā)，這里列下Dart的優(yōu)勢(shì)

3.優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)

缺點(diǎn)

web前端未來(lái)將會(huì)有什么樣的發(fā)展趨勢(shì)？

趨勢(shì)一：更加移動(dòng)優(yōu)先

響應(yīng)式設(shè)計(jì)顯然是目前Web前端開(kāi)發(fā)領(lǐng)域的主要趨勢(shì)之一，并且這一趨勢(shì)在未來(lái)還將持續(xù)一段時(shí)間。雖然現(xiàn)在的響應(yīng)式設(shè)計(jì)大部分還是以PC版優(yōu)先，然而如果有一天我們把PC版放到比移動(dòng)版次要的位置上，也沒(méi)有什么好奇怪的。因?yàn)椋壳霸S多Web前端開(kāi)發(fā)者已經(jīng)開(kāi)始轉(zhuǎn)向以移動(dòng)優(yōu)先方案來(lái)做他們的響應(yīng)式設(shè)計(jì)和開(kāi)發(fā)，這就象征著一個(gè)重大轉(zhuǎn)變，值得我們跟進(jìn)的。

趨勢(shì)二：更多使用快速原型開(kāi)發(fā)工具

眾多Web前端開(kāi)發(fā)者從2016年開(kāi)始嘗試使用快速原型開(kāi)發(fā)工具，而在2018年將是這種技術(shù)真正爆發(fā)的一年。“UXpin、Webflow、Invision以及其它許多快速原型開(kāi)發(fā)工具，讓設(shè)計(jì)師不用寫(xiě)一行代碼，就能為網(wǎng)站和服務(wù)快速創(chuàng)建低保真和高保真原型，便于設(shè)計(jì)師衡量它們的可用性和美觀性。” Web設(shè)計(jì)師Jamie Leeson says如是說(shuō)，“許多工具也允許你在瀏覽器中設(shè)計(jì)原型并從工具里真正啟動(dòng)網(wǎng)站自身。”

不管未來(lái)前端發(fā)展方向如何，可以肯定的是未來(lái)前端人才需求依舊很大。想學(xué)前端開(kāi)發(fā)專業(yè)的機(jī)構(gòu)也很多，你可以去線下試聽(tīng)課程了解一下，例如北大青鳥(niǎo)、南京中博軟件學(xué)院、南京課工場(chǎng)等等都有試聽(tīng)課程的！

2022 年將成為主導(dǎo)的頂級(jí)編程語(yǔ)言

編程語(yǔ)言是程序員（開(kāi)發(fā)人員）用來(lái)與計(jì)算機(jī)進(jìn)行通信的計(jì)算機(jī)語(yǔ)言。它是用任何特定語(yǔ)言（C、C++、Java、Python）編寫(xiě)的一組指令，用于執(zhí)行特定任務(wù)。編程語(yǔ)言主要用于開(kāi)發(fā)桌面應(yīng)用程序、網(wǎng)站和移動(dòng)應(yīng)用程序。以下是 2022 年最流行的頂級(jí)語(yǔ)言。

Python

Python 是由 Guido van Rossum 于 1980 年代后期在荷蘭構(gòu)建的。Python 最初是作為 Java 在行業(yè)中的競(jìng)爭(zhēng)對(duì)手而構(gòu)建的，后來(lái)逐漸流行起來(lái)。目前，Python 在研究人員和開(kāi)發(fā)人員社區(qū)中都非常受歡迎。Python 在 IEEE Spectrum 的語(yǔ)言排名中名列前茅，得分為滿分 100。此外，Python 也很受尊重，支持率高達(dá) 44.1%。

Python 幾乎適用于任何事物。Django 和 Flask 可用于 Web 開(kāi)發(fā)，而 Jupyter 和 Spyder 等科學(xué)工具則用于分析和研究目的。如果您喜歡自動(dòng)化，Selenium 可以幫助您！該語(yǔ)言的靈活性使 Python 幾乎可以在任何地方使用。到目前為止，這些是 Python 中比較流行的產(chǎn)品。Python 的巨大支持基礎(chǔ)（僅次于 JavaScript）產(chǎn)生了大量使用該語(yǔ)言的包、框架，甚至是成熟的開(kāi)源軟件。

總的來(lái)說(shuō)，Python 可能對(duì)數(shù)據(jù)科學(xué)和機(jī)器學(xué)習(xí)有最大的支持。雖然還有其他語(yǔ)言（如 R 和 MATLAB）提供競(jìng)爭(zhēng)，但 Python 是數(shù)據(jù)科學(xué)領(lǐng)域的嚴(yán)格統(tǒng)治者。機(jī)器學(xué)習(xí)中使用的大多數(shù)框架和庫(kù)都僅用 Python 編寫(xiě)，如果想要學(xué)習(xí)機(jī)器學(xué)習(xí)（或一般的數(shù)據(jù)科學(xué)），它可能是最好的語(yǔ)言。

JavaScript

JavaScript 在這一點(diǎn)上幾乎是行業(yè)領(lǐng)導(dǎo)者。JavaScript 最初于 1994 年作為 Netscape Navigator（當(dāng)時(shí)最好的瀏覽器之一）的腳本語(yǔ)言而構(gòu)建，它迅速崛起。直到 2008 年，Google 才在為 Google Chrome 構(gòu)建 V8 引擎時(shí)設(shè)計(jì)了現(xiàn)代 JavaScript。最初由 Netscape 構(gòu)建為 Java 的競(jìng)爭(zhēng)對(duì)手，JavaScript 現(xiàn)在在開(kāi)發(fā)領(lǐng)域擁有自己的空間。JavaScript 因其流行而被廣泛認(rèn)為是“互聯(lián)網(wǎng)語(yǔ)言”。JavaScript 在開(kāi)發(fā)者社區(qū)中的支持率最高——高達(dá) 67.7%。一般來(lái)說(shuō)，JavaScript 適用于任何類型的開(kāi)發(fā)活動(dòng)，如移動(dòng)應(yīng)用程序開(kāi)發(fā)、Web 開(kāi)發(fā)、桌面應(yīng)用程序開(kāi)發(fā)等。

JavaScript 有各種各樣的庫(kù)和框架，可以在開(kāi)發(fā)過(guò)程中使用。有用于前端開(kāi)發(fā)的 Angular、Vue 和 React，而 Node.js 是一種用于后端開(kāi)發(fā)的非常靈活的語(yǔ)言。Jest 和 Mocha 是兩個(gè)靈活的工具，可幫助設(shè)置單元測(cè)試以檢查功能是否按預(yù)期工作。當(dāng)然，如果您對(duì)其中任何一個(gè)都不太滿意，您可以在前端使用普通的 HTML、CSS 和 JavaScript——就這么簡(jiǎn)單！由于來(lái)自世界各地開(kāi)發(fā)人員的巨大支持，JavaScript 擁有任何語(yǔ)言都可以夸耀的最多數(shù)量的支持包。盡管如此，人們繼續(xù)構(gòu)建越來(lái)越多的包，以增加使用該語(yǔ)言的便利性。

Java

Java 由 James Gosling、Mike Sheridan 和 Patrick Naughton 于 1991 年構(gòu)建為“Oak”語(yǔ)言，是第一種在全球產(chǎn)生重大影響的語(yǔ)言。雖然新的編程語(yǔ)言使用與 C/C++ 相同的格式，但它融入了某些新思想，使其對(duì)更多人更具吸引力。Java 運(yùn)行的原則是“一次編寫(xiě)，隨處運(yùn)行”——這意味著具有不同硬件和操作系統(tǒng)配置的系統(tǒng)可以輕松運(yùn)行 Java 程序。

Java 也有各種各樣的庫(kù)和框架，它們?cè)诘讓邮褂?Java。Java 用于通過(guò) Spring 和 Hibernate 進(jìn)行應(yīng)用程序開(kāi)發(fā)。JUnit 幫助我們?yōu)?Java 項(xiàng)目設(shè)置單元測(cè)試。最重要的是，Java 被用于開(kāi)發(fā)原生 Android 應(yīng)用程序（Android SDK 本身由 Java 開(kāi)發(fā)工具包或 JDK 提供支持）。Java 可能是大多數(shù)人在大學(xué)或?qū)W校的計(jì)算機(jī)編程入門(mén)課程中被介紹的語(yǔ)言。Java 是用于向大眾教授面向?qū)ο缶幊痰恼Z(yǔ)言。

Java 在分析和研究領(lǐng)域也備受推崇。Java 唯一的問(wèn)題是目前該語(yǔ)言的支持包和項(xiàng)目很少。很少有社區(qū)參與——這是大多數(shù)主流語(yǔ)言都有的。盡管如此，Java 是一種非常容易掌握和學(xué)習(xí)的語(yǔ)言——這在一定程度上解釋了該語(yǔ)言的吸引力。但是，要掌握某種形式的語(yǔ)言確實(shí)需要一些時(shí)間。

C++

也許人們?cè)诒疚闹锌梢云诖淖盍钊苏痼@的答案之一是 C++。盡管是大多數(shù)人用來(lái)學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)和算法概念的語(yǔ)言，但該語(yǔ)言本身在實(shí)際世界中卻很少使用。C++ 最初由 Bjarne Stroustrup 于 1982 年創(chuàng)建，作為 C 編程語(yǔ)言的擴(kuò)展，在接下來(lái)的幾年中繼續(xù)聲名鵲起。

C++ 可用于分析、研究以及 游戲 內(nèi)開(kāi)發(fā)。流行的 游戲 開(kāi)發(fā)引擎——虛幻引擎——使用 C++ 作為腳本語(yǔ)言，用于構(gòu)建 游戲 時(shí)可以定義的所有功能。C++ 在軟件開(kāi)發(fā)中也有廣泛的用途。介于面向?qū)ο蠓椒ê兔嫦蚍椒ǚ椒ㄖg，C++ 可以靈活地使用它生成的軟件的性質(zhì)。在 TIOBE 指數(shù)中排名第 4 意味著 C++ 至今仍具有吸引力。C++也廣泛用于系統(tǒng)軟件開(kāi)發(fā)，比其他語(yǔ)言更容易理解。在操作系統(tǒng)等敏感領(lǐng)域使用 C++ 的主要原因是 C++ 程序的編譯時(shí)間非常短。

C++ 可能擁有所有語(yǔ)言中最大的學(xué)習(xí)社區(qū)。大多數(shù)學(xué)生會(huì)開(kāi)始他們的算法課程，用 C++ 構(gòu)建樹(shù)、鏈表、堆棧、隊(duì)列和許多其他數(shù)據(jù)結(jié)構(gòu)。當(dāng)然，只要注意細(xì)節(jié)，它就很容易上手和學(xué)習(xí)，也很容易掌握。

Typescript

TypeScript 是 JavaScript 的超集，具有與 JavaScript 幾乎相同的應(yīng)用程序。TypeScript 可用于 Web 開(kāi)發(fā)、移動(dòng)應(yīng)用程序開(kāi)發(fā)、桌面應(yīng)用程序開(kāi)發(fā)等。在 StackOverflow 的最受歡迎語(yǔ)言列表中，TypeScript 是第二受歡迎的語(yǔ)言，受到 67.1% 的開(kāi)發(fā)人員的喜愛(ài)（僅次于 Rust）。

TypeScript 主要是一種用于開(kāi)發(fā)的語(yǔ)言，因此它對(duì)科學(xué)界沒(méi)有太大吸引力。但是，由于 TypeScript 的新功能，可以預(yù)期它可能會(huì)激發(fā)更大程度的研究興趣。該語(yǔ)言的技能上限比 JavaScript 低得多——并且 JavaScript 的許多“難以理解”的行為已在 TypeScript 中得到簡(jiǎn)化。換句話說(shuō)，您將頭撞到墻上的機(jī)會(huì)略小。

Golang

新語(yǔ)言正在迅速崛起，新的競(jìng)爭(zhēng)者即將挑戰(zhàn) JavaScript 和 Python 擁有的寶座。由谷歌（兩者的名字中都有“Go”！）主要是為了推進(jìn)函數(shù)式編程的事業(yè)，Golang 在短時(shí)間內(nèi)建立了大量的追隨者。Golang 已經(jīng)成為 StackOverflow 第五大最適合學(xué)習(xí)的語(yǔ)言，受到 62.3% 的開(kāi)發(fā)人員的喜愛(ài)。

Golang 用于多個(gè)領(lǐng)域，用于開(kāi)發(fā)強(qiáng)大的軟件以及用于 Web 和移動(dòng)應(yīng)用程序的后端。目前，Golang 甚至支持一些基本的 Web 開(kāi)發(fā)。雖然它仍處于取代 JavaScript 作為網(wǎng)絡(luò)語(yǔ)言的階段，但它正在迅速成為支持下一階段網(wǎng)絡(luò)的語(yǔ)言。

Golang 比此列表中的其他語(yǔ)言更難學(xué)習(xí)。此外，Golang 是一種開(kāi)源語(yǔ)言，每次重大更新都會(huì)頻繁更改，因此保持更新是必要的。

Dart

Dart 是工業(yè)領(lǐng)域發(fā)展最快的語(yǔ)言之一。谷歌在語(yǔ)言領(lǐng)域的貢獻(xiàn)顯著增加，以與微軟的 TypeScript 日益流行的競(jìng)爭(zhēng)相抗衡。Dart 因其簡(jiǎn)單性而受到世界各地程序員的高度喜愛(ài)。

Dart 用于多平臺(tái)應(yīng)用程序開(kāi)發(fā)。與 JavaScript 一樣，Dart 用于構(gòu)建任何人都可以使用電子設(shè)備運(yùn)行的軟件。目前 Dart 最著名的用途是 Flutter 框架，F(xiàn)lutter 是一種用于移動(dòng)應(yīng)用程序開(kāi)發(fā)的語(yǔ)言。最近的谷歌趨勢(shì)表明，F(xiàn)lutter 盡管是一個(gè)較新的框架，但比 React Native 更受歡迎，后者是業(yè)界已經(jīng)建立的移動(dòng)應(yīng)用程序開(kāi)發(fā)框架。

Dart 比 JavaScript 更容易學(xué)習(xí)，并且能夠很好地簡(jiǎn)化甚至難以理解的案例。隨著市場(chǎng)上的 TypeScript 和 Dart 的出現(xiàn)，程序員在選擇一種他們真正想要學(xué)習(xí)的語(yǔ)言時(shí)會(huì)面臨多種選擇。

Flutter浪潮下的音視頻研發(fā)探索

文/陳爐軍

整理/LiveVideoStack

大家好，我是阿里巴巴閑魚(yú)事業(yè)部的陳爐軍，本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索，主要內(nèi)容是針對(duì)閑魚(yú)APP在當(dāng)下流行的跨平臺(tái)框架Flutter的大規(guī)模實(shí)踐，介紹其在音視頻領(lǐng)域碰到的一些困難以及解決方案。

分享內(nèi)容主要分為四個(gè)方面，首先會(huì)對(duì)Flutter有一個(gè)簡(jiǎn)單介紹以及選擇Flutter作為跨平臺(tái)框架的原因，其次會(huì)介紹Flutter中與音視頻關(guān)系非常大的外接紋理概念，以及對(duì)它做出的一些優(yōu)化。之后會(huì)對(duì)閑魚(yú)在音視頻實(shí)踐過(guò)程中碰到的一些Flutter問(wèn)題提出了一些解決方案——TPM音視頻框架。最后是閑魚(yú)Flutter多媒體開(kāi)源組件的介紹。

Flutter

Flutter是一個(gè)跨平臺(tái)框架，以往的做法是將音頻、視頻和網(wǎng)絡(luò)這些模塊都下沉到C++層或者ARM層，在其上封裝成一個(gè)音視頻的SDK，供UI層的PC、iOS和Android調(diào)用。

而Flutter做為一個(gè)UI層的跨平臺(tái)框架，顧名思義就是在UI層也實(shí)現(xiàn)了一個(gè)跨平臺(tái)開(kāi)發(fā)。可以預(yù)想的是未Flutter發(fā)展的好的話，會(huì)逐漸變?yōu)橐粋€(gè)從底層到UI層的一個(gè)全鏈路的跨平臺(tái)開(kāi)發(fā)，技術(shù)人員分別負(fù)責(zé)SDK和UI層的開(kāi)發(fā)。

在Flutter之前已經(jīng)有很多跨平臺(tái)UI解決方案，那為什么選擇Flutter呢？

我們主要考慮性能和跨平臺(tái)的能力。

以往的跨平臺(tái)方案比如Weex，ReactNative，Cordova等等因?yàn)榧軜?gòu)的原因無(wú)法滿足性能要求，尤其是在音視頻這種性能要求幾乎苛刻的場(chǎng)景。

而諸如Xamarin等，雖然性能可以和原生App一致，但是大部分邏輯還是需要分平臺(tái)實(shí)現(xiàn)。

我們可以看一下，為什么Flutter可以實(shí)現(xiàn)高性能：

原生的native組件渲染以IOS為例，蘋(píng)果的UIKit通過(guò)調(diào)用平臺(tái)自己的繪制框架QuaztCore來(lái)實(shí)現(xiàn)UI的繪制，圖形繪制也是調(diào)用底層的API,比如OpenGL、Metal等。

而Flutter也是和原生API邏輯一致，也是通過(guò)調(diào)用底層的繪制框架層SKIA實(shí)現(xiàn)UI層。這樣相當(dāng)于Flutter他自己實(shí)現(xiàn)了一套UI框架，提供了一種性能超越原生API的跨平臺(tái)可能性。

但是我們說(shuō)一個(gè)框架最終性能怎樣，其實(shí)取決于設(shè)計(jì)者和開(kāi)發(fā)者。至于現(xiàn)在到底是一個(gè)什么狀況：

在閑魚(yú)的實(shí)踐中，我們發(fā)現(xiàn)在正常的開(kāi)發(fā)沒(méi)有特意的去優(yōu)化UI代碼的情況下，在一些低端機(jī)上，F(xiàn)lutter界面的流暢性是比Native界面要好的。

雖然現(xiàn)在閑魚(yú)某些場(chǎng)景下會(huì)有卡頓閃退等情況，但是這是一個(gè)新事物發(fā)展過(guò)程中的必然問(wèn)題，我們相信未來(lái)性能肯定不會(huì)成為限制Flutter發(fā)展的瓶頸的。

在閑魚(yú)實(shí)踐Flutter的過(guò)程中，混合棧和音視頻是其中比較難解決的兩個(gè)問(wèn)題，混合棧是指一個(gè)APP在Flutter過(guò)程中不可能一口氣將所有業(yè)務(wù)全部重寫(xiě)為Flutter，所以這是一個(gè)逐步迭代的過(guò)程，這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚(yú)在混合棧上也有一些比較好的輸出，例如FlutterBoost。

外接紋理

在講音視頻之前需要簡(jiǎn)要介紹一下外接紋理的概念，我們將它稱之為是Flutter和Frame之間的橋梁。

Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是，GPU發(fā)出的VC信號(hào)在Flutter的UI線程，通過(guò)AOT編譯的機(jī)器碼結(jié)合當(dāng)前Dart Runtime，生成Layer Tree UI樹(shù)，Layer Tree上每一個(gè)葉子節(jié)點(diǎn)都代表了當(dāng)前屏幕上所需要渲染的每一個(gè)元素，包含了這些元素渲染所需要的內(nèi)容。將Layer Tree拋給GPU線程，在GPU線程內(nèi)調(diào)用Skia去完成整個(gè)UI的渲染過(guò)程。Layer Tree中有PictureLayer和TextureLayer兩個(gè)比較重要的節(jié)點(diǎn)。PictureLayer主要負(fù)責(zé)屏幕圖片的渲染，F(xiàn)lutter內(nèi)部實(shí)現(xiàn)了一套圖片解碼邏輯，在IO線程將圖片讀取或者從網(wǎng)絡(luò)上拉取之后，通過(guò)解碼能夠在IO線程上加載出紋理，交給GPU線程將圖片渲染到屏幕上。但是由于音視頻場(chǎng)景下系統(tǒng)API太過(guò)繁多，業(yè)務(wù)場(chǎng)景過(guò)于復(fù)雜。Flutter沒(méi)有一套邏輯去實(shí)現(xiàn)跨平臺(tái)的音視頻組件，所以說(shuō)Flutter提出了一種讓第三方開(kāi)發(fā)者來(lái)實(shí)現(xiàn)音視頻組件的方式，而這些音視頻組件的視頻渲染出口，就是TextureLayer。

在整個(gè)Layer Tree渲染的過(guò)程中，TextureLayer的數(shù)據(jù)紋理需要由外部第三方開(kāi)發(fā)者來(lái)指定，可以把視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里，由Flutter將這些數(shù)據(jù)渲染出來(lái)。

TextureLayer渲染過(guò)程：首先判斷Layer是否已經(jīng)初始化，如果沒(méi)有就創(chuàng)建一個(gè)Texture，然后將Texture Attach到一個(gè)SufaceTexture上。

這個(gè)SufaceTexture是音視頻的native代碼可以獲取到的對(duì)象，通過(guò)這個(gè)對(duì)象創(chuàng)建的Suface，我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼放到Suface中，然后Flutter端通過(guò)監(jiān)聽(tīng)SufaceTexture的數(shù)據(jù)更新就可以順利把剛才創(chuàng)建的數(shù)據(jù)更新到它的紋理中，然后再將紋理交給SKIA渲染到屏幕上。

然而我們?nèi)绻枰肍lutter實(shí)現(xiàn)美顏，濾鏡，人臉貼圖等等功能，就需要將視頻數(shù)據(jù)讀取出來(lái)，更新到紋理中，再將GPU紋理經(jīng)過(guò)美顏濾鏡處理后生成一個(gè)處理后的紋理。按Flutter提供的現(xiàn)有能力，必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫(xiě)入Surface中，這樣在Flutter中才能順利的更新到視頻數(shù)據(jù)，這樣做對(duì)系統(tǒng)性能的消耗很大。

通過(guò)對(duì)Flutter渲染過(guò)程分析，我們知道Flutter底層需要渲染的數(shù)據(jù)就是GPU紋理，而我們經(jīng)過(guò)美顏濾鏡處理完成以后的結(jié)果也是GPU紋理，如果可以將它直接交給Flutter渲染，那就可以避免GPU-CPU-GPU這樣的無(wú)用循環(huán)。這樣的方法是可行的，但是需要一個(gè)條件，就是OpenGL上下文共享。

OpenGL

在說(shuō)上下文之前，得提到一個(gè)和上線文息息相關(guān)的概念：線程。

Flutter引擎啟動(dòng)后會(huì)啟動(dòng)四個(gè)線程：

第一個(gè)線程是UI線程，這是Flutter自己定義的UI線程，主要負(fù)責(zé)GPU發(fā)出的VSync信號(hào)時(shí)候用當(dāng)前Dart編譯的機(jī)器碼和當(dāng)前運(yùn)行環(huán)境創(chuàng)建出Layer Tree。

還有就是IO線程和GPU線程。和大部分OpenGL處理解決方案中一樣，F(xiàn)lutter也采取一個(gè)線程責(zé)資源加載，一部分負(fù)責(zé)資源渲染這種思路。

兩個(gè)線程之間紋理共享有兩種方式。一種是EGLImage(IOS是 CVOpenGLESTextureCache)。一種是OpenGL Share Context。Flutter通過(guò)Share Context來(lái)實(shí)現(xiàn)紋理共享，將IO線程的Context和GPU線程的Context進(jìn)行Share，放到同一個(gè)Share Group下面，這樣兩個(gè)線程下資源是互相可見(jiàn)可以共享的。

Platform線程是主線程，F(xiàn)lutter中有一個(gè)很奇怪的設(shè)定，GPU線程和主線程共用一個(gè)Context。并且在主線程也有很多OpenGL 操作。

這樣的設(shè)計(jì)會(huì)給音視頻開(kāi)發(fā)帶來(lái)很多問(wèn)題，后面會(huì)詳細(xì)說(shuō)。

音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用的條件就是Flutter的上下文需要和平臺(tái)音視頻相關(guān)的OpenGL上下文處在一個(gè)Share Group下面。

由于Flutter主線程的Context就是GPU的Context，所以在音視頻端主線程中有一些OpenGL操作的話，很有可能使Flutter整個(gè)OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線程中。

通過(guò)上述這兩個(gè)條件的處理，我們就可以在沒(méi)有增加GPU消耗的前提下實(shí)現(xiàn)美顏和濾鏡等等功能。

TPM

在經(jīng)過(guò)demo驗(yàn)證之后，我們將這個(gè)方案應(yīng)用到閑魚(yú)音視頻組件中，但改造過(guò)程中發(fā)現(xiàn)了一些問(wèn)題。

上圖是攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的一段代碼，其中有兩個(gè)操作：首先是切進(jìn)程，將后面的OpenGL操作都切到cameraQueue中。然后是設(shè)置一次上下文。然后這種限制條件或者說(shuō)是潛規(guī)則往往在開(kāi)發(fā)過(guò)程中容易被忽略的。而這個(gè)條件一旦忽略后果就是出現(xiàn)一些莫名其妙的詭異問(wèn)題極難排查。因此我們就希望能抽象出一套框架，由框架本身實(shí)現(xiàn)線程的切換、上下文和模塊生命周期等的管理，開(kāi)發(fā)者接入框架以后只需要安心實(shí)現(xiàn)自己的算法，而不需要關(guān)心這些潛規(guī)則還有其他一些重復(fù)的邏輯操作。

在引入Flutter之前閑魚(yú)的音視頻架構(gòu)與大部分音視頻邏輯一樣采用分層架構(gòu)：

1：底層是一些獨(dú)立模塊

2：SDK層是對(duì)底層模塊的封裝

3：最上層是UI層。

引入Flutter之后，通過(guò)分析各個(gè)模塊的使用場(chǎng)景，我們可以得出一個(gè)假設(shè)或者說(shuō)是抽象：音視頻應(yīng)用在終端上可以歸納為視頻幀解碼之后視頻數(shù)據(jù)幀在各個(gè)模塊之間流動(dòng)的過(guò)程，基于這種假設(shè)去做Flutter音視頻框架的抽象。

咸魚(yú)Flutter多媒體開(kāi)源組件

整個(gè)Flutter音視頻框架抽象分為管線和數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文同一管理四部分。

管線，其實(shí)就是視頻幀流動(dòng)的管道。數(shù)據(jù)，音視頻中涉及到的數(shù)據(jù)包括紋理、Bit Map以及時(shí)間戳等。結(jié)合現(xiàn)有的應(yīng)用場(chǎng)景我們定義了管線流通數(shù)據(jù)以Texture為主數(shù)據(jù)，同時(shí)可以選擇性的添加Bit Map等作為輔助數(shù)據(jù)。這樣的數(shù)據(jù)定義方式，避免重復(fù)的創(chuàng)建和銷毀紋理帶來(lái)的性能開(kāi)銷以及多線程訪問(wèn)紋理帶來(lái)的一些問(wèn)題。也滿足一些特殊模塊對(duì)特殊數(shù)據(jù)的需求。同時(shí)也設(shè)計(jì)了紋理池來(lái)管理管線中的紋理數(shù)據(jù)。

模塊：如果把管線和數(shù)據(jù)比喻成血管和血液，那框架音視頻的場(chǎng)景就可以比喻成器官，我們根據(jù)模塊所在管線的位置抽象出采集、處理和輸出三個(gè)基類。這三個(gè)基類里實(shí)現(xiàn)了剛才說(shuō)的線程切換，上下文切換，格式轉(zhuǎn)換等等共同邏輯，各個(gè)功能模塊通過(guò)集成自這些基類，可以避免很多重復(fù)勞動(dòng)。

線程：每一個(gè)模塊初始化的時(shí)候，初始化函數(shù)就會(huì)去線程管理的模塊去獲取自己的線程，線程管理模塊可以決定給初始化函數(shù)分配新的線程或者已經(jīng)分配過(guò)其他模塊的線程。

這樣有三個(gè)好處：

一是可以根據(jù)需要去決定一個(gè)線程可以掛載多少模塊，做到線程間的負(fù)載均衡。第二，多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作是在當(dāng)前線程內(nèi)而不會(huì)跑到主線程去，徹底避免Flutter的OpenGL 環(huán)境被破壞。第三，多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。

從Flutter端修改Flutter引擎將Context取出后，根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊，每一個(gè)模塊在初始化的時(shí)候會(huì)獲取它的線程，獲取之后會(huì)調(diào)用上下文管理模塊獲取自己的上下文。這樣可以保證每一個(gè)模塊的上下文都是與Flutter的上下文進(jìn)行Share的，每個(gè)模塊之間資源都是共享可見(jiàn)的，F(xiàn)lutter和音視頻native之間也是互相共享可見(jiàn)的。

基于上述框架如果要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的場(chǎng)景，比如畫(huà)面實(shí)時(shí)預(yù)覽和濾鏡處理功能，

1：需要選擇功能模塊，功能模塊包括攝像頭模塊、濾鏡處理模塊和Flutter畫(huà)面渲染模塊，

2：需要配置模塊參數(shù)，比如采集分辨率、濾鏡參數(shù)和前后攝像頭設(shè)置等，

3：在創(chuàng)建視頻管線后使用已配置的參數(shù)創(chuàng)建模塊

4：最后管線搭載模塊，開(kāi)啟管線就可以實(shí)現(xiàn)這樣簡(jiǎn)單的功能。

上圖為整個(gè)功能實(shí)現(xiàn)的代碼和結(jié)構(gòu)圖。

結(jié)合上述音視頻框架，閑魚(yú)實(shí)現(xiàn)了Flutter多媒體開(kāi)源組件。

組要包含四個(gè)基本組件分別是：

1：視頻圖像拍攝組件

2：播放器組件

3：視頻圖像編輯組件

4：相冊(cè)選擇組件

現(xiàn)在這些組件正在走內(nèi)部開(kāi)源流程。預(yù)計(jì)9月份，相冊(cè)和播放器會(huì)實(shí)現(xiàn)開(kāi)源。

后續(xù)展望和規(guī)劃

1：實(shí)現(xiàn)開(kāi)頭所說(shuō)的從底層SDK到UI的全鏈路的跨端開(kāi)發(fā)。目前底層框架層和模塊層都是各個(gè)平臺(tái)各自實(shí)現(xiàn)，反而是Flutter的UI端進(jìn)行了跨平臺(tái)的統(tǒng)一，所以后續(xù)會(huì)將底層也按照音視頻常用做法把邏輯下沉到C++層，盡可能的實(shí)現(xiàn)全鏈路跨平臺(tái)。

2：第二部分內(nèi)容為開(kāi)源共建，閑魚(yú)開(kāi)源的內(nèi)容不僅包括拍攝、編輯組件，還包括了很多底層模塊，希望有開(kāi)發(fā)者在基于Flutter開(kāi)發(fā)音視頻應(yīng)用時(shí)可以充分利用閑魚(yú)開(kāi)源出的音視頻模塊能力，搭建APP框架，開(kāi)發(fā)者只要去負(fù)責(zé)實(shí)現(xiàn)特殊需求模塊就可以，盡可能的減少重復(fù)勞動(dòng)。

文章標(biāo)題：flutter流行程度,flutterflies
文章URL：http://chinadenli.net/article45/dsephhi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)