flutter 外掛開發

hczhhm發表於2024-07-04

先引用一段官方的介紹說明:

https://docs.flutter.cn/packages-and-plugins/developing-packages

Package 包含以下幾種類別:

純 Dart 庫 (Dart packages)
用 Dart 編寫的傳統 package,比如 path。其中一些可能包含 Flutter 的特定功能,因此依賴於 Flutter 框架,其使用範圍僅限於 Flutter,比如 fluro。

原生外掛 (Plugin packages)
使用 Dart 編寫的,按需使用 Java 或 Kotlin、Objective-C 或 Swift 分別在 Android 和/或 iOS 平臺實現的 package。

外掛 package 可以針對 Android(使用 Kotlin 或 Java)、 iOS(使用 Swift 或 Objective-C)、Web、macOS、Windows 或 Linux,又或者它們的各種組合方式,進行編寫。

今天主要學習一下原生外掛 (Plugin packages)的開發。

建立外掛專案:

下面是官方給出的建立例子:建立一個 組織名稱為com.example,支援android,ios,linux,macos,windows平臺的 指定android開發語言為kotlin ios開發語言為Objective-c 專案名稱為hello的外掛

flutter create --org com.example --template=plugin --platforms=android,ios,linux,macos,windows -a kotlin -i objc hello

--org後面跟的是組織名稱,--platforms=後面跟的是支援的平臺,可以透過-a -i 來指定安卓和ios平臺的開發語言

根據我們的需求需要建立一個名稱為 mypl,組織名為com.hczhhm, 支援安卓和ios平臺的外掛,這裡選擇

Java做安卓的開發語言,swift作為ios的開發語言:

flutter create --org com.hczhhm --template=plugin --platforms=android,ios -i swift -a java mypl

建立完成後目錄如下:

用VSCode開啟

最外層pubspec.yaml檔案裡 有個homepage報錯,需要填寫你外掛在github上的主頁,可以先註釋掉,等外掛完成上傳後再新增

一. ios 外掛開發

下面我們先講怎麼開發ios的外掛程式碼,後面再講安卓的。

下面內容來自官方說明:

使用 Xcode 編輯 iOS 平臺程式碼之前,首先確保程式碼至少被構建過一次(即從 IDE/編輯器執行示例程式,或在終端中執行以下命令: cd hello/example; flutter build ios --no-codesign --config-

only)。

在我這就是

cd mypl/example

然後執行:

flutter build ios --no-codesign --config-only

這個時候會安裝 依賴包 構建專案。 完成後用xcode開啟 mypl/example/ios 專案:

在VSCode裡用 Open in Xcode開啟 或者直接開啟mypl/example/ios目錄下的 Runner.xcworkspace 檔案

開啟後先用跑一遍模擬器,如果可以跑成功就可以進行後續開發了。

ios開發的程式碼位置在:

Pods/Development Pods/mypl/../../example/ios/.symlinks/plugins/mypl/ios/Classes 下

下面新增兩個簡單的方法,把流程跑一遍

1.先在ios程式碼裡新增兩個方法識別符號:test1,test2,並學著返回資料

2.在 mypl_method_channel.dart 中新增兩個方法的呼叫程式碼:

3.在mypl_platform_interface.dart 中新增方法未實現時丟擲的錯誤提示

4.在mypl.dart 中呼叫方法

5.在main.dart 呼叫外掛方法

6.執行專案,可以見到新增的程式碼效果,因為圖片太大了,這裡就不放了

7.新增第三方SDK,具體配置請參考微信文件:https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html
因為微信SDK文件預設用oc進行開發,我這裡把之前建立的ios外掛支援swift的刪了,重新建立成支援oc的專案了,請大家注意。 下面以ios為例:在 mypl/example/ios/Podfile 中新增 pod 'WechatOpenSDK-XCFramework', '~> 2.0.4'

  1. mypl/ios/mypl.podspec s.dependency 'Flutter' 下面新增 s.dependency 'WechatOpenSDK-XCFramework', '2.0.4''

9.新增完成後 cd mypl/example/ios ,然後 pod install 安裝sdk

10.引入標頭檔案,然後在Xcode上執行一下專案,如果可以跑起來,就說明第三方庫引入成功

二.安卓外掛開發

1.構建專案

下面說明來自官方文件

在 Android Studio 中編輯 Android 平臺的程式碼之前,請先確保程式碼至少已經構建過一次(換句話說,在 IDE 或編輯器中執行一次示例應用,或者在終端中執行指令 cd hello/example; flutter build apk --config-only)。

在我這裡就是 cd mypl/example 然後執行 flutter build apk --config-only

2.開啟專案,同步Gradle

專案需要同步Gradle檔案,這個過程會非常緩慢,如果想快一些,可以先開啟梯子,再進行下面的開啟專案操作,同步完再關閉梯子。不想用梯子可以直接開啟專案,如果嫌時間慢,又不想使用梯子,可以在網上找配置使用國內源的方法。

以下說明來自官方文件:

1.啟動 Android Studio;

2.在 Android Studio 的歡迎選單 (Welcome to Android Studio) 對話方塊中選擇開啟現有的 Android Studio 專案 (Open an existing Android Studio Project),或在選單中選擇 File > Open,然後選擇 mypl/example/android/build.gradle 檔案;

3.在Gradle Sync 對話方塊中,選擇 OK;

4.在“Android Gradle Plugin Update”對話方塊中,選擇“Don't remind me again for this project”。

外掛中與 Android 系統徐相關的程式碼在 hello/java/com.example.hello/HelloPlugin 這個檔案裡

官方說明裡的hello對應我這裡的mypl。

我是使用 Open in Android Studio 方法開啟的

開啟後雙擊 build.gradle 來到 build.gradle中,看到 Gradle project sync in progress 正在同步Gradle檔案,不用梯子可能需要等十幾到半個小時分鐘,如果嫌時間慢,又不想使用梯子,可以在網上找配置使用國內源的方法。

同步成功後就可以進行開發了。

3.外掛開發目錄位於mypl/java/com.hczhhm.mypl/

因為之前刪除了專案,重建建立了支援 objective-c 和java的專案,所以 test1和test2方法需要重新建立,流程參考ios專案裡flutter程式碼的編寫,flutter編寫完成後,下面我們只要編寫java程式碼實現就好了

以上是簡單的安卓外掛方法建立呼叫流程。

4.下面對安卓進行微信SDK匯入,具體配置請參考微信文件:https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/Android.html

開啟 mypl/build.gradle 在最下面新增:

dependencies {
    api 'com.tencent.mm.opensdk:wechat-sdk-android:+'
}

儲存後,點選右上角 Sync Now 同步Gradle檔案

同步完成後,在MyplPlugin檔案中呼叫微信Sdk方法測試一下,我這邊程式碼裡的 this 報錯,使用IDEA自動修復後,可以正常執行,表示sdk整合成功。

至此外掛開發的第一步完成了,後面有時間我會繼續更新微信Sdk整合的後續開發過程。如果本文存在問題,希望各位大神可以幫忙指出,在此表示感謝。

參考文章:https://docs.flutter.cn/packages-and-plugins/developing-packages
https://www.cnblogs.com/876013676ch/p/10187258.html

相關文章