flutter 插件的坑都在這里

首先聲明一點(diǎn),flutter的插件已經(jīng)有不少了,官方的插件,去這里找https://github.com/flutter/plugins
第三方的插件,去這里找https://pub.dev/, (這個(gè)網(wǎng)站有時(shí)候打不開,感覺應(yīng)該是服務(wù)器的問題,請耐心多刷新幾次嘍),

但是難免有時(shí)候還是要自己去寫插件,俗稱自定義插件,才能滿足自己項(xiàng)目的需要.
比方說,在原生工程里面是用 合作公司的SDK開發(fā)了一個(gè)視頻模塊 (SDK是封裝好的頭文件和一些.a靜態(tài)庫), 假如現(xiàn)在flutter工程里面也想要這個(gè)視頻模塊,那怎么辦,這個(gè)時(shí)候就需要寫插件了,寫視頻的插件了. 當(dāng)然各位有更好的辦法解決此需求,麻煩請告知我嘍~~

言歸正傳,我們還是回到怎么寫自定義插件.我決定從簡單到復(fù)雜來一一介紹

簡單的--->插件里面只調(diào)用到原生自帶的api,

當(dāng)我們新建一個(gè)插件工程的時(shí)候,官方就給我們提供了一個(gè)示例, 獲取手機(jī)的版本號(hào).這個(gè)示例就是屬于此類. 只用原生自帶的一些api,就可以完成.

點(diǎn)擊Android Studio 新建一個(gè)插件工程,


image.png

然后就是下一步,下一步的事情了,建完以后發(fā)現(xiàn)有問題,打不開原生工程 翻車了~~


image.png

注意觀察哦,沒有android,也沒有iOS相關(guān)的東西;還有一點(diǎn)就是 右鍵沒法用xcode打開了;


image.png

來來來,現(xiàn)在我們來看一下flutter 1.20 版本之前的版本建完以后是這樣的


image.png

右鍵是可以用xocode打開原生工程的


image.png

現(xiàn)在我們來填坑

我們還是按官方文檔來解決此坑吧,
官方地址:https://flutter.dev/docs/development/packages-and-plugins/developing-packages#plugin-platforms

其中這個(gè)地方有提到怎么創(chuàng)建插件工程


image.png

其中插件工程名為hello. 現(xiàn)在我們要?jiǎng)?chuàng)建一個(gè)工程PlugTest1,所以用下面的命令
1.打開終端,cd 到你要的位置,比喻我就放到桌面

cd Desktop/

2.把上面的語句改一下

flutter create --org com.example --template=plugin --platforms=android,ios -i objc plugTest1

其中 參數(shù) objc 表示iOS工程將會(huì)是用Objective-C語言來編寫代碼,對應(yīng)安卓的是java;
同理如果把objc 換成swift,表示iOS工程將會(huì)是用swift語言來編寫代碼,對應(yīng)安卓的是kotlin;

3.接著運(yùn)行

flutter run

就會(huì)正常的跑起來.至此新建一個(gè)插件工程的坑填完(此坑是flutter 升級(jí)為1.20后才會(huì)出現(xiàn)的).
如下圖的路徑,就能找到插件實(shí)現(xiàn)的核心代碼(iOS Android)


image.png
回到正題

此簡單插件實(shí)現(xiàn),只調(diào)用到原生自帶的api
iOS


image.png

Android

image.png

中等---->還會(huì)用到一些第三方的文件或者說是用到了第三方庫

例如我之前寫的一篇文章,關(guān)于實(shí)現(xiàn)udp掃描的插件,http://www.reibang.com/p/803660ad39de
就是屬于此類,有興趣的可以看看上面鏈接的那篇文章.
不過在此 我還是從零開始帶著大家看看,首先用上面的方法新建一個(gè)叫 plugUdp的插件

cd Desktop/

flutter create --org com.example --template=plugin --platforms=android,ios -i objc plugUdp

flutter run

建完之后是這樣的,可以正常運(yùn)行起來


image.png

這里我以iOS為例,同樣的右鍵,用xcode打開原工程


image.png

想在xcode里面找到PlugUdpPlugin.h,PlugUdpPlugin.m還是不容易的,路徑比較深的,這里我為了方便大家,把路徑的圖留下來了


image.png
回到正題

寫udp插件,我是用到了GCDAsyncSocket這個(gè)庫在iOS里面處理socket相關(guān)的比較容易,他有幾個(gè)文件,我們現(xiàn)在要把它放在哪里呢,


image.png

經(jīng)過多番測試是放在Classes里面是可以的.可以正常用起來

image.png

但是flutter 升級(jí)為1.20后,又不行了

我們來填坑 (重點(diǎn)就在這里,后面復(fù)雜一點(diǎn)的配置也是以此為基礎(chǔ)的)

1.回到android studio下plugUdp插件工程, 在iOS文件夾下面新建一個(gè)文件夾,比喻Frameworks,把需要的文件放在Frameworks文件夾里面


image.png

2.配置podspec文件,把.h .m文件路徑配置進(jìn)去


sg

3.打開終端,cd到工程目錄下的plugUdp/example/ios下,里面有podfile文件

cd /Users/XXXXXX/Desktop/plugUdp/example/ios

4.在終端 安裝一下

pod install

5.再右鍵用xcode打開原生工程


image.png

你會(huì)發(fā)現(xiàn)多了一個(gè)叫Frameworks的文件夾,并且里面有相應(yīng)的文件.
在PlugUdpPlugin.h 試著引入頭文件,是正常,并且使用它,
在PlugUdpPlugin.m調(diào)用它里面的方法,也是正常的.


image.png

此到大功告成, 坑已填完.

有難度--->插件里面用到 第三方封裝好的sdk,(有framework,有.h頭文件,有.a靜態(tài)庫等)

怎么在插件里面導(dǎo)入第三方封裝好的Framework,并且能正常使用它,還有些難度的.說得更清楚一些就是怎么配置podspec文件.
關(guān)于怎么配置podspec文件 我們再來一個(gè)實(shí)例

1.新建一個(gè)plugvideo的插件(前面已經(jīng)多次用到了,不再贅述),用android studio打開插件工程;
2.在ios文件夾下,新建一個(gè)frameworks文件夾,再把.a /.framework文件放進(jìn)去,把.h /.m文件放到Classes文件夾(如下圖第一圖)
3.配置podspec(如下圖第一圖)
4.找到plugvideo插件工程目錄下的podfile文件,進(jìn)行pod install(前面有提到,可以回頭看上面)
5.右鍵用xcode打開原生工程,
6.驗(yàn)證一下是否正常(如下圖第二圖)


image.png
img01.png

最后附上podspec配置遵循的規(guī)則

Pod::Spec.new do |s|
s.name         = "XXXSDK"
s.version      = "1.0.0"
s.summary      = "這是一個(gè)SDK"
s.description  = "這是一個(gè)SDK 一定要比summary長."
s.homepage     = "https://github.com/xxxx/XXXSDK"
s.license      = { :type => "MIT", :file => "LICENSE" }
s.author       = { "作者" => "123456@qq.com" }
s.platform     = :ios, "8.0"
 
#  When using multiple platforms ios部署版本
# s.ios.deployment_target = "5.0"
# s.osx.deployment_target = "10.7"
 
#1 git commit -m =>"13287dd",講pod版本與git倉庫中的某一次提交綁定
#s.source = { :git => "https://github.com/xxxx/XXXSDK", :commit => "13287dd" }
#2 將這個(gè)Pod版本與Git倉庫中某個(gè)版本的comit綁定 
#s.source = { :git => "https://github.com/xxxx/XXXSDK", :tag => 1.0.0 }
#3 將這個(gè)Pod版本與Git倉庫中相同版本的comit綁定
#s.source = { :git => "https://github.com/xxxx/XXXSDK", :tag => s.version }
s.source       = { :git => "https://github.com/xxxx/XXXSDK.git", :tag => "v#{s.version}" }
s.source_files  = "XXXSDK", "XXXSDK/openSource/*.{h,m}"
s.vendored_frameworks = 'XXXSDK/lib/XXXSDK.framework'
s.resources          = "XXXSDK/resource/resource.bundle"
s.framework  = "UIKit"
#s.resource    = "XXXSDK/resource/resource.jpg"
#s.frameworks = "SomeFramework", "AnotherFramework"
#引用libxml2.lib和libz.lib叉谜、tbd ，去掉頭尾的lib
# s.library   = "z"
# s.libraries = "z", "xml2"
#s.vendored_libraries = 'XXXSDK/lib/XXXSDK.a'
s.requires_arc = true
# s.xcconfig = { "HEADER_SEARCH_PATHS" => "$(SDKROOT)/usr/include/libxml2" }
# s.dependency "JSONKit", "~> 1.4" s.dependency = 'AFNetworking', '~> 2.3' s.dependency = 'SDWebImage'
# 創(chuàng)建子庫
#s.subspec 'Components' do |ss|
#ss.source_files = 'YDKit/Components/*/.{h,m}'
#end
end
 
 
 
###以下是上面代碼的功能注解
 
s.name： 
名稱
pod search 搜索的關(guān)鍵詞,一定要和.podspec的名稱一樣,否則報(bào)錯(cuò)
s.version： 
版本號(hào)
s.ios.deployment_target: 
支持的pod最低版本
s.summary: 
簡介
s.homepage: 
項(xiàng)目主頁地址
s.license: 
開源協(xié)議(創(chuàng)建github庫的時(shí)候選擇的)
s.author: 
作者信息(這里隨便謝謝也可以通過)
s.social_media_url: 
社交網(wǎng)址
s.source: 
項(xiàng)目的地址
s.source_files: 
需要包含的源文件
s.resource: 
資源文件,單個(gè)
s.resources: 
資源文件(含bundle)
s.vendored_frameworks: 
包含的framework,也就是我們自己制作的pod
s.requires_arc: 
是否支持ARC
s.dependency： 
依賴庫循未，不能依賴未發(fā)布的庫.如AFNetWorking
s.description: 
描述,字?jǐn)?shù)要比s.summary長
s.screenshots: 
截圖
s.exclude_files: 
隱藏的文件
s.public_header_files: 
公開的頭文件
s.framework: 
所需的framework,單個(gè)
s.frameworks: 
所需的framework,多個(gè)用逗號(hào)隔開
s.library 
引用的靜態(tài)庫
s.libraries 
引用的靜態(tài)庫,多個(gè)用逗號(hào)隔開
s.vendored_libraries: 
引用自己生成的.a
s.vendored_frameworks: 
引用自己生成的.framework,多個(gè)用逗號(hào)隔開
s.dependency: 
依賴的庫
s.ios.deployment_target 
iOS部署版本

結(jié)尾

關(guān)于插件這塊,因?yàn)樯婕暗臇|西比較多,所以本來就是有點(diǎn)復(fù)雜.遇到坑后,就感覺更難了,這個(gè)時(shí)候,就需要耐心啦.就像看這篇文章一樣,要有耐心把它看完,一邊看,一邊動(dòng)手做,多練幾次,相信會(huì)有收獲的~ 祝君好運(yùn)~~~
如果覺得有點(diǎn)幫助,請點(diǎn)贊加關(guān)注哦~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末麻昼，一起剝皮案震驚了整個(gè)濱河市塞关，隨后出現(xiàn)的幾起案子蜒犯，更是在濱河造成了極大的恐慌，老刑警劉巖硫戈，帶你破解...
    沈念sama閱讀 211,265評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件锰什，死亡現(xiàn)場離奇詭異，居然都是意外死亡丁逝，警方通過查閱死者的電腦和手機(jī)汁胆，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來霜幼，“玉大人嫩码，你說我怎么就攤上這事∽锛龋” “怎么了铸题？”我有些...
    開封第一講書人閱讀 156,852評論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長琢感。 經(jīng)常有香客問我丢间，道長，這世上最難降的妖魔是什么驹针？ 我笑而不...
    開封第一講書人閱讀 56,408評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任烘挫，我火速辦了婚禮，結(jié)果婚禮上柬甥，老公的妹妹穿的比我還像新娘饮六。我一直安慰自己，他們只是感情好苛蒲，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布卤橄。 她就那樣靜靜地躺著，像睡著了一般撤防。 火紅的嫁衣襯著肌膚如雪虽风。 梳的紋絲不亂的頭發(fā)上棒口，一...
    開封第一講書人閱讀 49,772評論 1贊 290
  • 城市分裂傳說
    那天寄月，我揣著相機(jī)與錄音，去河邊找鬼无牵。 笑死漾肮，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的茎毁。 我是一名探鬼主播克懊，決...
    沈念sama閱讀 38,921評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼忱辅，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了谭溉？” 一聲冷哼從身側(cè)響起墙懂，我...
    開封第一講書人閱讀 37,688評論 0贊 266
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎扮念，沒想到半個(gè)月后损搬，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,130評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡柜与，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年巧勤，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弄匕。...
    茶點(diǎn)故事閱讀 38,617評論 1贊 340
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡颅悉，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出迁匠，到底是詐尸還是另有隱情剩瓶，我是刑警寧澤，帶...
    沈念sama閱讀 34,276評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布柒瓣，位于F島的核電站儒搭，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏芙贫。R本人自食惡果不足惜搂鲫，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望磺平。 院中可真熱鬧魂仍，春花似錦、人聲如沸拣挪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽菠劝。三九已至赊舶，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間赶诊，已是汗流浹背笼平。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留舔痪，地道東北人寓调。 一個(gè)月前我還...
    沈念sama閱讀 46,315評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像锄码，于是被迫代替她去往敵國和親夺英。 傳聞我的和親對象是個(gè)殘疾皇子晌涕，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2贊 348