在Flutter开发的App中添加运行小程序能力
站长
· 阅读数 13
前言
Flutter是一种流行的开源移动应用程序开发框架，它使用Dart编程语言，可以用于构建高性能、美观、响应迅速的应用程序。随着移动应用程序的需求不断增加，开发人员需要不断探索新的功能和技术，以满足用户的需求。其中之一就是增加小程序的能力，使得用户可以在应用程序内部运行小程序，这样可以为用户提供更加丰富的体验。
在本文中，我们将探讨如何在Flutter开发的应用程序中增加小程序的能力，包括设计和实现过程，以及如何使小程序在应用程序内部运行。
技术选型
在本项目中，我们将使用以下技术：
- Flutter：Flutter是一个流行的开源移动应用程序开发框架，它使用Dart编程语言，可以用于构建高性能、美观、响应迅速的应用程序。我们将使用Flutter开发应用程序的前端界面和与用户交互的功能。
- Swift和Java：我们将使用Swift和Java编写小程序的原生代码，以实现小程序的逻辑和功能。
- FinClip SDK：FinClip是一个支持在移动应用内嵌入小程序的云端开发平台，我们将使用FinClip SDK实现将小程序集成到应用程序中的功能。FinClip还提供了一系列丰富的API和工具，以方便我们快速开发和部署小程序。
通过以上技术的组合，我们将能够实现在Flutter开发的应用程序中嵌入小程序的功能，以提供更加丰富的体验和功能。话不多说，直接开干！！！
注意
要使用该功能，需要去FinClip注册自己的appkey，然后新建小程序，才可以使用。
安卓端集成小程序运行环境
完成安卓端集成小程序运行环境，我们需要完成以下几个步骤：
- 集成FinClip SDK。
- 在FinClip基础上，完成小程序运行环境的初始化，完成打开和关闭小程序的功能。
- 完成Flutter与原生安卓的通讯，使得Flutter可以调用我们开发好的原生功能。
1、集成FinClip SDK。
- 使用Androidstudio打开项目中的Android工程，然后打开工程目录下的build.gradle文件，注意，build.gradle文件有两个，我们先配置根目录下的（不是app目录下的哦），然后在allprojects增加如下配置。
allprojects {
repositories {
google()
mavenCentral()
maven {
url "https://gradle.finogeeks.club/repository/applet/"
credentials {
username "applet"
password "123321"
}
}
}
}
- 打开app下的build.gradle文件,在dependencies中增加如下配置
dependencies {
implementation fileTree(include: ['.jar'], dir: 'libs')
//主要是这个哈
implementation 'com.finogeeks.lib:finapplet:2.40.3'
implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'com.google.android.material:material:1.4.+'
implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
}
在app下的build.gradle中的android下增加如下配置
packagingOptions {
doNotStrip "/x86/libsdkcore.so"
doNotStrip "/x86_64/libsdkcore.so"
doNotStrip "/armeabi/libsdkcore.so"
doNotStrip "/armeabi-v7a/libsdkcore.so"
doNotStrip "/arm64-v8a/libsdkcore.so"
doNotStrip "/x86/libfin-yuvutil.so"
doNotStrip "/x86_64/libfin-yuvutil.so"
doNotStrip "/armeabi/libfin-yuvutil.so"
doNotStrip "/armeabi-v7a/libfin-yuvutil.so"
doNotStrip "/arm64-v8a/libfin-yuvutil.so"
}
至此，我们的sdk集成就完成，接下来就是开发小程序运行环境的功能了。
2、在FinClip基础上，完成小程序运行环境的初始化，完成打开和关闭小程序的功能。
- 在你的工程目录，有一个MainActivity的文件，在改文件的同级目录，创建Plugin文件夹，并且在文件夹中新建AppMiniProgramUtils类。
- 在AppMiniProgramUtils类中，创建名字为init的静态方法，并且接受一个类型为Application的参数，然后在此工具类中还需要实现小程序关闭和打开方法，具体代码如下。
public class AppMiniProgramUtils {
//初始化
public static void init(Application app){
FinAppConfig.UIConfig uiConfig=new FinAppConfig.UIConfig();
uiConfig.setLoadingLayoutCls(SmallAPPLoading.class);
FinAppConfig config = new FinAppConfig.Builder()
.setUiConfig(uiConfig)
.setSdkKey("")// SDK Key
.setSdkSecret("") // SDK Secret
.setApiUrl("https://api.finclip.com") // 服务器地址
.setEncryptionType("MD5")// 加密方式，国密:SM，md5: MD5（推荐）
.build();
// SDK初始化结果回调，用于接收SDK初始化状态
FinCallback<Object> callback = new FinCallback<Object>() {
@Override
public void onSuccess(Object result) {
Toast.makeText(app,"成功",Toast.LENGTH_LONG).show();
}
@Override
public void onError(int code, String error) {
Toast.makeText(app,"失败",Toast.LENGTH_LONG).show();
}
@Override
public void onProgress(int status, String error) {
}
};
//设置初始化代码
FinAppClient.INSTANCE.init(app, config, callback);
}
//打开小程序
static public void openMinniApp(String appId,String token,Context context){
FinAppClient.INSTANCE.getAppletApiManager().startApplet(context, IFinAppletRequest.Companion.fromAppId(appId),null);
}
//关闭小程序
static public void closeMinniApp(String appId){
FinAppClient.INSTANCE.getAppletApiManager().closeApplet(appId);
}
}
- 打开MainActivity，然后在MainActivity类中，重写onCreate方法，调用我们写的工具类方法，初始化小程序运行环境。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//初始化小程序运行环境
AppMiniProgramUtils.init(this.getApplication());
new Thread(new Runnable() {
@Override
public void run() {
//初始化通信通道
initMethodChannel();
}
}).start();
}
3、完成Flutter与原生安卓的通讯，使得Flutter可以调用我们开发好的原生功能。
这个功能官方文档和我原来的文章都有说明，所以不做过多赘述，直接上代码，不清楚的童鞋，可以看看代码中的注释
public void initMethodChannel(){
new MethodChannel(getFlutterEngine().getDartExecutor().getBinaryMessenger(), appMethodChannelName).setMethodCallHandler(
new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {
//判断是否关于小程序的通道
if(call.method.equals("miniApp")){
try{
String appid=call.argument("appid");
String token=call.argument("token");
String options=call.argument("options");
Log.e("miniApp",String.valueOf(call.method.equals("miniApp")));
Log.e("options",options);
//打开小程序
if(options.equals("open")){
AppMiniProgramUtils.openMinniApp(appid,token,MainActivity.this);
}
//关闭小程序
if(options.equals("close")){
AppMiniProgramUtils.closeMinniApp(appid);
}
}catch (Exception e){
Toast.makeText(MainActivity.this,"小程序参数获取失败",Toast.LENGTH_LONG).show();
}
}
}
}
);
}
于是我们，我们在Flutter中调用小程序打开方法，就能得到如下效果
IOS端集成小程序运行环境
- 集成FinClip SDK。
- 在FinClip基础上，完成小程序运行环境的初始化，完成打开和关闭小程序的功能。
- 完成Flutter与原生安卓的通讯，使得Flutter可以调用我们开发好的原生功能。
1、集成FinClip SDK。
- 使用IOS打开项目中的IOS工程，然后打开工程目录下的PODFILE文件，增加如下配置，添加FinApplet
use_frameworks!
use_modular_headers!
# Add FinApplet pod
//重要
pod 'FinApplet'
flutter_install_all_ios_pods File.dirname(File.realpath( __FILE__ ))
end
- 在Object-c和swift的桥接文件中，增加如下配置
#include <FinApplet/FinApplet.h>
- 然后我们在iOS目录执行命令pod install，至此我们的sdk集成就完成了
2、在FinClip基础上，完成小程序运行环境的初始化，完成打开和关闭小程序的功能。
- 新建一个AppMiniProgramUtils类，代码如下
import Foundation
class AppMiniProgramUtils {
static func initUtlis() {
do{
let storeConfig = FATStoreConfig()
storeConfig.sdkKey = ""
storeConfig.sdkSecret = ""
storeConfig.apiServer = "https://api.finclip.com"
let config = FATConfig.init(storeConfigs: [storeConfig])
try FATClient.shared().initWith(config,uiConfig: nil)
}catch{
print(error);
}
}
//打开指定小程序
static func openMiniApp(appId:String,token:String,pageObj:FlutterViewController){
let request = FATAppletRequest()
//填写你的app key
request.appletId = ""
request.apiServer = "https://api.finclip.com"
request.transitionStyle = .up
FATClient.shared().startApplet(with: request, inParentViewController:pageObj) { (result, error) in
print("打开小程序: (error)")
} closeCompletion: {
print("关闭小程序")
}
}
}
在AppDelegate文件中，完成初始化、完成和flutter的交互代码即可，代码如下
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
var controller: FlutterViewController?
var yrtChannel:FlutterMethodChannel?
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
//初始化小程序sdk
let appDelegate = UIApplication.shared.delegate as! FlutterAppDelegate
let flutterViewController = appDelegate.window.rootViewController as! FlutterViewController
AppMiniProgramUtils.initUtlis();
//初始化和Flutter的通讯
self.controller = window?.rootViewController as? FlutterViewController;
//初始化通道
self.yrtChannel = FlutterMethodChannel.init(name: "samples.flutter.io/tt",binaryMessenger:self.controller as! FlutterBinaryMessenger);
self.yrtChannel?.setMethodCallHandler(
{(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
if(call.method=="miniApp"){
do{
let callArguments = call.arguments as![String:Any]
let options=String(describing: callArguments["options"]!)
let appid=String(describing: callArguments["appid"]!)
let token=String(describing: callArguments["token"]!)
if(options=="open"){
AppMiniProgramUtils.openMiniApp(appId:appid, token:token, pageObj: flutterViewController)
}
}catch{
print("参数错误");
}
}
}
);
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
写在最后
至此，我们借助FinClip，即为Flutter app提供了一个小程序的运行环境，个人觉得比较适合大型的业务系统开发，可以做到业务分离，便于维护。每一个大功能都是独立的小程序应用。