Flutter開發(fā)--視頻播放器

目前Flutter平臺(tái)主流的兩個(gè)播放器是video_player和fijkplayer

創(chuàng)新互聯(lián)建站是一家專業(yè)提供高昌企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為高昌眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

pub

github

1、Flutter平臺(tái)官方插件，作者是國(guó)外的，有問題溝通比較困難，只能通過(guò)提交issue

2、硬解碼

4、UI封裝： better_player

基于video_player和Chewie的高級(jí)視頻播放器。它解決了許多典型的用例，并且易于運(yùn)行。

5、播放器寬高比例與視頻內(nèi)容寬高比例不一致時(shí)，會(huì)出現(xiàn)圖像壓縮變形的問題

6、調(diào)用原生內(nèi)核播放器：iOS--AVPlayer， Android--ExoPlayer

7、對(duì)于分段源 m3u8 的播放不友好，如果一個(gè)切片播放超時(shí)，會(huì)導(dǎo)致整個(gè)播放都失敗

8、better_player可以緩存視頻，但不能自定義緩存的地址，只能指定key，和緩存的最大內(nèi)存量（還未研究超出最大的話是不能緩存新的，還是刪除最舊的）

9、better_player不能完全自定義UI，只能修改類中的一些開放屬性，比如說(shuō)icon圖標(biāo)，文字顏色啥的

10、無(wú)網(wǎng)絡(luò)有緩存時(shí)，封面可以正常展示

11、better_player播放失敗有手動(dòng)retry的設(shè)計(jì)

pub

github

1、fijkplayer 是一個(gè) Flutter 生態(tài)的媒體播放器，是對(duì) ijkplayer 的 Flutter 封裝，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作為播放器內(nèi)核，ijkplayer 使用 ffmpeg 進(jìn)行音視頻解封裝和解碼，同時(shí)添加了 Android 和 iOS 平臺(tái)特有的硬件加速解碼能力。

2 、國(guó)內(nèi)有QQ群，但是活躍度也是不高。

3、可以緩存視頻，可以自定義緩存的地址，方便后續(xù)的內(nèi)存維護(hù)。

4、可以通過(guò)FijkPanelWidgetBuilder較大程度上自定義UI。

5、無(wú)網(wǎng)絡(luò)有緩存視頻時(shí)，無(wú)法展示封面，因?yàn)閮?nèi)部是通過(guò)imageProvider去加載網(wǎng)絡(luò)圖片的。

7、播放失敗無(wú)手動(dòng)retry的設(shè)計(jì)

1、兩種播放器都是通過(guò)外接紋理方案 (Texture)，將播放器視頻畫面渲染接入 flutter 中，性能上優(yōu)于 PlatformView 的接入方法。

如何自己實(shí)現(xiàn)？

下面以video_palyer的iOS源碼部分解釋：

iOS用CVPixelBufferRef將渲染出來(lái)的數(shù)據(jù)存在內(nèi)存中，F(xiàn)lutter engine會(huì)將Texture的數(shù)據(jù)在內(nèi)存中直接進(jìn)行映射無(wú)需通過(guò)Channel傳輸，然后Texture Widget就可以把你提供的這些數(shù)據(jù)顯示出來(lái)。在我們傳輸數(shù)據(jù)的時(shí)候會(huì)需要將其與 TextureID 綁定，綁定的過(guò)程通過(guò)BasicMessageChannel實(shí)現(xiàn)數(shù)據(jù)流的傳輸，以做到實(shí)時(shí)展示的效果

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

文/陳爐軍

整理/LiveVideoStack

大家好，我是阿里巴巴閑魚事業(yè)部的陳爐軍，本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索，主要內(nèi)容是針對(duì)閑魚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ì)閑魚在音視頻實(shí)踐過(guò)程中碰到的一些Flutter問題提出了一些解決方案——TPM音視頻框架。最后是閑魚Flutter多媒體開源組件的介紹。

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)開發(fā)。可以預(yù)想的是未Flutter發(fā)展的好的話，會(huì)逐漸變?yōu)橐粋€(gè)從底層到UI層的一個(gè)全鏈路的跨平臺(tái)開發(fā)，技術(shù)人員分別負(fù)責(zé)SDK和UI層的開發(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為例，蘋果的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ì)者和開發(fā)者。至于現(xiàn)在到底是一個(gè)什么狀況：

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

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

在閑魚實(shí)踐Flutter的過(guò)程中，混合棧和音視頻是其中比較難解決的兩個(gè)問題，混合棧是指一個(gè)APP在Flutter過(guò)程中不可能一口氣將所有業(yè)務(wù)全部重寫為Flutter，所以這是一個(gè)逐步迭代的過(guò)程，這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚在混合棧上也有一些比較好的輸出，例如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樹，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沒有一套邏輯去實(shí)現(xiàn)跨平臺(tái)的音視頻組件，所以說(shuō)Flutter提出了一種讓第三方開發(fā)者來(lái)實(shí)現(xiàn)音視頻組件的方式，而這些音視頻組件的視頻渲染出口，就是TextureLayer。

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

TextureLayer渲染過(guò)程：首先判斷Layer是否已經(jīng)初始化，如果沒有就創(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)聽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后再寫入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è)線程下資源是互相可見可以共享的。

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

這樣的設(shè)計(jì)會(huì)給音視頻開發(fā)帶來(lái)很多問題，后面會(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è)條件的處理，我們就可以在沒有增加GPU消耗的前提下實(shí)現(xiàn)美顏和濾鏡等等功能。

TPM

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

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

在引入Flutter之前閑魚的音視頻架構(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音視頻框架的抽象。

咸魚Flutter多媒體開源組件

整個(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)的性能開銷以及多線程訪問紋理帶來(lái)的一些問題。也滿足一些特殊模塊對(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è)模塊之間資源都是共享可見的，F(xiàn)lutter和音視頻native之間也是互相共享可見的。

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

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

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

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

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

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

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

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

1：視頻圖像拍攝組件

2：播放器組件

3：視頻圖像編輯組件

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

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

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

1：實(shí)現(xiàn)開頭所說(shuō)的從底層SDK到UI的全鏈路的跨端開發(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)容為開源共建，閑魚開源的內(nèi)容不僅包括拍攝、編輯組件，還包括了很多底層模塊，希望有開發(fā)者在基于Flutter開發(fā)音視頻應(yīng)用時(shí)可以充分利用閑魚開源出的音視頻模塊能力，搭建APP框架，開發(fā)者只要去負(fù)責(zé)實(shí)現(xiàn)特殊需求模塊就可以，盡可能的減少重復(fù)勞動(dòng)。

Flutter Dio源碼分析(四)--封裝

Flutter Dio源碼分析(一)--Dio介紹

Flutter Dio源碼分析(二)--HttpClient、Http、Dio對(duì)比

Flutter Dio源碼分析(三)--深度剖析

Flutter Dio源碼分析(四)--封裝

Flutter Dio源碼分析(一)--Dio介紹視頻教程

Flutter Dio源碼分析(二)--HttpClient、Http、Dio對(duì)比視頻教程

Flutter Dio源碼分析(三)--深度剖析視頻教程

Flutter Dio源碼分析(四)--封裝視頻教程

github倉(cāng)庫(kù)地址

本文會(huì)手把手教你該怎么去封裝一個(gè)類庫(kù)，平時(shí)在我們的工作中都是拿著別人的造好的輪子在使用，這篇文章將帶你怎么去自己造輪子，以后再碰到別的類庫(kù)需要對(duì)其進(jìn)行封裝的時(shí)候提供一個(gè)的思路和方法。

在前面的文章中，我們對(duì) Dio 的基本使用、請(qǐng)求庫(kù)對(duì)比、源碼分析，我們知道 Dio 的使用非常的簡(jiǎn)單，那為什么還需要進(jìn)行封裝呢？有兩點(diǎn)如下：

當(dāng)組件庫(kù)方法發(fā)生重要改變需要遷移的時(shí)候如果有多處地方用到，那么需要對(duì)使用到的每個(gè)文件都進(jìn)行修改，非常的繁瑣而且很容易出問題。

當(dāng)不需要 Dio 庫(kù)的時(shí)候，我們可以隨時(shí)方便切換到別的網(wǎng)絡(luò)請(qǐng)求庫(kù)，當(dāng)然 Dio 目前內(nèi)置支持使用第三方庫(kù)的適配器。

因?yàn)橐粋€(gè)應(yīng)用程序基本都是統(tǒng)一的配置方式，所以我們可以針對(duì) 攔截器 、 轉(zhuǎn)換器 、 緩存 、 統(tǒng)一處理錯(cuò)誤 、 代理配置 、 證書校驗(yàn) 等多個(gè)配置進(jìn)行統(tǒng)一管理。

因?yàn)槲覀兊膽?yīng)用程序在每個(gè)頁(yè)面中都會(huì)用到網(wǎng)絡(luò)請(qǐng)求，那么如果我們每次請(qǐng)求的時(shí)候都去實(shí)例化一個(gè) Dio ，無(wú)非是增加了系統(tǒng)不必要的開銷，而使用單例模式對(duì)象一旦創(chuàng)建每次訪問都是同一個(gè)對(duì)象，不需要再次實(shí)例化該類的對(duì)象。

這是通過(guò)靜態(tài)變量的私有構(gòu)造器來(lái)創(chuàng)建的單例模式

我們對(duì) 超時(shí)時(shí)間 、 響應(yīng)時(shí)間 、 BaseUrl 進(jìn)行統(tǒng)一設(shè)置

因?yàn)椴还苁?get() 還是 post() 請(qǐng)求， Dio 內(nèi)部最終都會(huì)調(diào)用 request 方法，只是傳入的 method 不一樣，所以我們這里定義一個(gè)枚舉類型在一個(gè)方法中進(jìn)行處理

我們已經(jīng)把 Restful API 風(fēng)格簡(jiǎn)化成了一個(gè)方法，通過(guò) DioMethod 來(lái)標(biāo)明不同的請(qǐng)求方式。在我們平時(shí)開發(fā)的過(guò)程中，需要在請(qǐng)求前、響應(yīng)前、錯(cuò)誤時(shí)對(duì)某一些接口做特殊的處理，那我們就需要用到攔截器。 Dio 為我們提供了自定義攔截器功能，很容易輕松的實(shí)現(xiàn)對(duì)請(qǐng)求、響應(yīng)、錯(cuò)誤時(shí)進(jìn)行攔截

我們發(fā)現(xiàn)雖然 Dio 框架已經(jīng)封裝了一個(gè) DioError 類庫(kù)，但如果需要對(duì)返回的錯(cuò)誤進(jìn)行統(tǒng)一彈窗處理或者路由跳轉(zhuǎn)等就只能自定義了

在我們發(fā)送請(qǐng)求的時(shí)候會(huì)碰到幾種情況，比如需要對(duì)非open開頭的接口自動(dòng)加上一些特定的參數(shù)，獲取需要在請(qǐng)求頭增加統(tǒng)一的 token

在我們請(qǐng)求接口前可以對(duì)響應(yīng)數(shù)據(jù)進(jìn)行一些基礎(chǔ)的處理，比如對(duì)響應(yīng)的結(jié)果進(jìn)行自定義封裝，還可以針對(duì)單獨(dú)的 url 做特殊處理等。

我們看了轉(zhuǎn)換器的介紹，發(fā)現(xiàn)和攔截器的功能差不多，那為什么還要存在轉(zhuǎn)換器，有兩點(diǎn)：

執(zhí)行流程： 請(qǐng)求攔截器 請(qǐng)求轉(zhuǎn)換器 發(fā)起請(qǐng)求 響應(yīng)轉(zhuǎn)換器 響應(yīng)攔截器 最終結(jié)果 。

只會(huì)被用于 'PUT'、 'POST'、 'PATCH'方法，因?yàn)橹挥羞@些方法才可以攜帶請(qǐng)求體(request body)

會(huì)被用于所有請(qǐng)求方法的返回?cái)?shù)據(jù)。

在開發(fā)過(guò)程中，客戶端和服務(wù)器打交道的時(shí)候，往往會(huì)用一個(gè) token 來(lái)做校驗(yàn)，因?yàn)槊總€(gè)公司處理刷新token的邏輯都不一樣，我這里舉一個(gè)簡(jiǎn)單的例子

為什么我們需要有取消請(qǐng)求的功能，如果當(dāng)我們的頁(yè)面在發(fā)送請(qǐng)求時(shí)，用戶主動(dòng)退出當(dāng)前界面或者app應(yīng)用程序退出的時(shí)候數(shù)據(jù)還沒有響應(yīng)，那我們就需要取消該網(wǎng)絡(luò)請(qǐng)求，防止不必要的錯(cuò)誤。

由 服務(wù)器生成 的 一小段文本信息 ，發(fā)送給瀏覽器，瀏覽器把 cookie 以kv形式保存到本地 某個(gè)目錄下的文本文件內(nèi)，下一次請(qǐng)求同一網(wǎng)站時(shí)會(huì)把該 cookie 發(fā)送給服務(wù)器。

cookie 的使用需要用到兩個(gè)第三方組件 dio_cookie_manager 和 cookie_jar

因?yàn)樵谖覀兤綍r(shí)的開發(fā)過(guò)程中，會(huì)碰到一種情況，在進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí)，我們希望能正常訪問到上次的數(shù)據(jù)，對(duì)于用戶的體驗(yàn)比較好，而不是展示一個(gè)空白的頁(yè)面，該緩存主要是 《Flutter實(shí)戰(zhàn)》網(wǎng)絡(luò)接口緩存 提供參考。

我們?cè)诔绦蛲顺龊髢?nèi)存緩存將會(huì)消失，所以我們用 shared_preferences 進(jìn)行磁盤緩存數(shù)據(jù)。

在我們用flutter進(jìn)行抓包的時(shí)候需要配置 Dio 代理。由 DefaultHttpClientAdapter 提供了一個(gè) onHttpClientCreate 回調(diào)來(lái)設(shè)置底層 HttpClient 的代理。

用于驗(yàn)證正在訪問的網(wǎng)站是否真實(shí)。提供安全性，因?yàn)樽C書和域名綁定，并且由根證書機(jī)構(gòu)簽名確認(rèn)。

日志打印主要是幫助我們開發(fā)時(shí)進(jìn)行輔助排錯(cuò)

【Flutter】利用Future封裝出js中的Promise

前端的同學(xué)對(duì) Promise 肯定都很熟悉，而 Future 便是 dart 中 Promise ，但方法名稱和使用方式還是有些許的差異的。

下面我們嘗試，利用 Future 封裝出js中我們熟悉的 Promise 。

使用示例

Promise.all , Promise.race , Promise.resolve , Promise.reject

Promise.allSettled 方法接受一組 Promise 實(shí)例作為參數(shù)，包裝成一個(gè)新的 Promise 實(shí)例。只有等到所有這些參數(shù)實(shí)例都返回結(jié)果，不管是 fulfilled 還是 rejected ，包裝實(shí)例才會(huì)結(jié)束。該方法由 ES2020 引入

Promise.any() 方法接受一組 Promise 實(shí)例作為參數(shù)，包裝成一個(gè)新的 Promise 實(shí)例。只要參數(shù)實(shí)例有一個(gè)變成 fulfilled 狀態(tài)，包裝實(shí)例就會(huì)變成 fulfilled 狀態(tài)；如果所有參數(shù)實(shí)例都變成 rejected 狀態(tài)，包裝實(shí)例就會(huì)變成 rejected 狀態(tài)。該方法目前是一個(gè)第三階段的 提案 。

Promise.any() 跟 Promise.race() 方法很像，只有一點(diǎn)不同，就是不會(huì)因?yàn)槟硞€(gè) Promise 變成 rejected 狀態(tài)而結(jié)束。

順便把 延遲函數(shù) 也封裝一下，畢竟毫秒延遲的使用頻率是最高的。

Flutter 網(wǎng)絡(luò)請(qǐng)求 Dio 攔截器詳解

昔日的小王憑借這他的小心謹(jǐn)慎和借助漂亮能干的女友 Dio 的輔助，終于干下了一番事業(yè)，成為中華大地響當(dāng)當(dāng)?shù)娜宋铮⊥跻沧兂衫贤酢Ｈ缃瘢贤跻呀?jīng)年近花甲，看似邁上了人生巔峰，卻也遇到了人生的煩惱——那就是他的兒子，新的小王。

小王和他爹當(dāng)年的小心謹(jǐn)慎不同，小王自海外留學(xué)回來(lái)，也不愿意接手老王的事業(yè)。反而迷戀起了互聯(lián)網(wǎng)，玩游戲、微博噴人、撩網(wǎng)紅等等。前兩項(xiàng)倒還好，但是后一項(xiàng)，讓老王心煩得很。這網(wǎng)紅哪能隨便撩的，萬(wàn)一弄出許多小小王來(lái)，多大家業(yè)都不夠分的啊！

關(guān)鍵時(shí)刻，還是老王的媳婦，曾經(jīng)被 金屋藏嬌 的Dio 想出了新的招術(shù)，再次讓老王佩服不已。老王媳婦Dio給小王搞了個(gè)攔截器，只要小王要在互聯(lián)網(wǎng)做什么，都會(huì)被她給先攔截下來(lái)，然后她再根據(jù)小王要做的事情決定是不是要替他發(fā)出去；或者是收到什么消息的時(shí)候，也會(huì)先看一遍，沒問題再給小王看。而且，最為關(guān)鍵的是，小王對(duì)這一切壓根都不知道！

老王媳婦一開始是這么干的，小王在互聯(lián)網(wǎng)有什么新的動(dòng)向直接向老王匯報(bào)。

這下小王在互聯(lián)網(wǎng)就完全被監(jiān)視了——而且他壓根不知道！只是，每次他說(shuō)要錢的時(shí)候，老王不再隨便給了！

但這個(gè)時(shí)候，小王還能在網(wǎng)上撩，畢竟上網(wǎng)在這個(gè)時(shí)代是不怎么要錢的。

老王媳婦 Dio 一看這種方式不行，就又心生一計(jì)，每次小王聊網(wǎng)紅的時(shí)候，直接狠心拒絕！

小王這下子懵圈了，難道是他的那些“土味情話”已經(jīng)失效了？每次發(fā)出去消息都遭受到了無(wú)情的打擊，讓他心灰意冷。漸漸地他就淡出了互聯(lián)網(wǎng)，至于現(xiàn)在在干什么，誰(shuí)也不知道。感覺又像是當(dāng)初老王金屋藏嬌一樣，現(xiàn)在的小王也逐漸被隱藏了起來(lái)。從此，互聯(lián)網(wǎng)只剩下小王和各個(gè)網(wǎng)紅的傳說(shuō)。

借著老王和小王的故事，我們講述了 Dio 的封裝和 Dio 的攔截器。其中攔截器可以應(yīng)用于很多實(shí)際場(chǎng)景：

注意，Dio 的實(shí)例可以同時(shí)添加多個(gè)攔截器，以便處理不同的情況。

Flutter發(fā)布Package(Pub.dev或私有Pub倉(cāng)庫(kù))

??因?yàn)槲覀兪褂肍lutter跨平臺(tái)技術(shù)開發(fā)App時(shí)，會(huì)有很多公用組件，因?yàn)镕lutter中一切皆為Widget，widget也比較細(xì)粒度，所以我們需要進(jìn)行封裝，用于一個(gè)項(xiàng)目或者公司不同項(xiàng)目中去~

??那么今天寫寫如何發(fā)布package或者插件到Pub.dev上，扯扯談O(∩_∩)O哈哈~

《Flutter的撥云見日》系列文章如下：

1、Flutter中指定字體(全局或者局部，自有字庫(kù)或第三方)

2、Flutter發(fā)布Package(Pub.dev或私有Pub倉(cāng)庫(kù))

首先，我們知道flutter有四種工程模式：Flutter Application、Flutter Module、Flutter Plugin和Flutter Package。

我們這里就主要講Package 純Dart插件的發(fā)布吧，都差不多。

創(chuàng)建工程后，就可以編寫你的公共組件，或者公用字體庫(kù)呀啥的， 都行。

在更改下你的pubspec.yaml文件，修改下你的versionCode，項(xiàng)目名稱，項(xiàng)目描述，作者等

如果上傳失敗試試????的命令：

在執(zhí)行該命令時(shí)，可能會(huì)中途調(diào)到網(wǎng)頁(yè)，要求你登錄google賬號(hào)，登錄授權(quán)，到時(shí)候登錄賬號(hào)并授權(quán)就可以了。

因?yàn)槲覀冎苯邮褂胒lutter packages pub publish是發(fā)布到Pub.dev上，并不是發(fā)布到私有倉(cāng)庫(kù)，該怎么辦呢？

其實(shí)呢，也很簡(jiǎn)單！像versionCode，項(xiàng)目名，等都和發(fā)布Pub.dev是一樣的。沒啥區(qū)別。

有兩種方式：

就是這么簡(jiǎn)單o( ＠ )o

相信大家引用Pub.dev上的第三方庫(kù)都會(huì)了哈，到處都是這里不講了

在使用flutter pub get就可以拉到私有倉(cāng)庫(kù)項(xiàng)目了

以上就差不多聊了聊package發(fā)布和獲取的事兒了，都很明了，大家可以試試，挺簡(jiǎn)單的。

PS: 寫文不易，覺得沒有浪費(fèi)你時(shí)間，請(qǐng)給個(gè)點(diǎn)贊~ ????

本文標(biāo)題：flutter網(wǎng)絡(luò)封裝,flutter 路由封裝
標(biāo)題路徑：http://chinadenli.net/article39/dseehsh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、面包屑導(dǎo)航、微信小程序、虛擬主機(jī)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(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)