在flutter中接入unisdk实现小程序

前言

随着小程序技术的成熟，现在很多APP中都有了小程序的存在，本文将实现Flutter Android侧的接入以及Demo 小程序的展示

项目环境

• 系统：windows10
• Flutter 3.22.1
• UniSDK：4.15

初始化

创建flutter项目

flutter create uni-demo

创建uniapp项目

新建一个uniapp演示项目

flutter项目调整

1.导入uniapp sdk依赖

//必须配置
def mfph = [
    //宿主包名
    "apk.applicationId" : "xxx.xxx.xxxxx",
]
android {
	defaultConfig {
		targetSdkVersion 26
		ndk {
            abiFilters 'x86','armeabi-v7a',"arm64-v8a" //不支持armeabi
        }
		manifestPlaceholders = mfph
	}
	//此处配置必须添加 否则无法正确运行
    aaptOptions {
        additionalParameters '--auto-add-overlay'
        //noCompress 'foo', 'bar'
        ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"
    }
}
//导入aar需要的配置
repositories {
    flatDir {
        dirs 'libs'
    }
}

dependencies {
	//导入SDK相关依赖jar、aar
	implementation fileTree(include: ['*.jar'], dir: 'libs')
	implementation fileTree(include: ['*.aar'], dir: 'libs')
	//必须添加的依赖
	implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.alibaba:fastjson:1.2.83'
    implementation 'com.facebook.fresco:fresco:1.13.0'
    implementation 'com.facebook.fresco:animated-gif:1.13.0'
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    implementation 'androidx.webkit:webkit:1.3.0'
}

2.导入依赖jar、aar

在android/app目录下创建libs目录

按照官网以下解释将需要用到的aar文件拷贝到闯将libs文件中

uniMPSDK/SDK/Libs 依赖库说明

Libs文件夹中的依赖库是不用全部都集成到宿主项目中。可根据功能增删修改。具体可阅读 模块配置在线文档 参考修改添加等操作。

除视频、地图、分享、支付、登录、直播pusher等SDK，只集成基础模块如下:

uniMPSDK-V2-release.aar  //必须集成，uni小程序sdk引擎需要
uniapp-v8-release.aar //必须集成，uni-app引擎需要
breakpad-build-release.aar //必须集成，breakpad用于采集系统崩溃日志
sqlite-release.aar
base_oaid_sdk.aar //可选集成，用来获取设备的oaid唯一标示 注意(3.3.8版本的SDK及以下版本请集成oaid_sdk_1.0.25.aar)
messaging-release.aar
iBeacon-release.aar
fingerprint-release.aar
contacts-release.aar
Bluetooth-release.aar
android-gif-drawable-release@1.2.23.aar //必须集成

实现unisdk的初始化

由于unisdk并不支持flutter直接调用，所以我们使用MethodChannel进行与安卓原生的交互

在flutter中初始化一个MethodChannel

final MethodChannel platform = const MethodChannel('com.example/umi');

在andorid MainActivity.kt文件中通过设置一个 MethodChannel 来处理来自 Flutter 的方法调用

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.example/umi"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(
            flutterEngine.dartExecutor.binaryMessenger,
            CHANNEL
        ).setMethodCallHandler { call, result ->
            if (call.method == "umiSdkinit") {
                // 处理方法调用
                val response = umiSdkinit()
                result.success(response)
            }else {
                result.notImplemented()
            }
        }
    }

    private fun umiSdkinit(): String {
        Log.i("unimp", "onCreate----")
        val style = DCUniMPCapsuleButtonStyle()
        style.setBackgroundColor("#fff");
        val config = DCSDKInitConfig.Builder()
            .setCapsule(true)
            .setCapsuleButtonStyle(style)
            .setMenuDefFontSize("16px")
            .setMenuDefFontColor("#000")
            .setMenuDefFontWeight("normal")
            .setEnableBackground(true) //开启后台运行
            .build()
        DCUniMPSDK.getInstance().initialize(this, config, object : IDCUniMPPreInitCallback {
            override fun onInitFinished(isSuccess: Boolean) {
                Log.i("unimp", "onInitFinished: $isSuccess")
            }
        })
        return "Response from Android"
    }
}

实现以上简单代码后，我们便可以在fluter中通过调用android函数对unisdk进行初始化，如下

await platform.invokeMethod('umiSdkinit');

效果如下

uniapp打包

通过以上代码我们成功的完成了unisdk的初始化，接下来我们来实现uniapp打包

在项目中运行本地uni小程序

按照图上官方文档的指示将我们打包好的文件放入指定目录，目录结构示例如下

在此处有个重点是将下载的unisdk中assets目录下的data文件夹拷贝到assets目录下，不然打开小程序时会报错未添加ui模块的弹窗

按照指导完成小程序打包及拷贝后我们接下来实现小程序启动代码

我们扩展之前的安卓原生MethodChannel回调方法，添加umiOpenApp类型为打开指定小程序，并传递appid参数

if (call.method == "umiOpenApp") {
    val arguments = call.arguments<Map<String, Any>>()
    if (arguments != null) {
        val appid = arguments["appid"] as String
        val response = umiOpenApp(appid)
        result.success(response)
    } else {
        result.notImplemented()
    }
}

接下来dart中新增一个打开小程序的方法

void openUniDemo() async {
    try {
      await platform.invokeMethod('umiOpenApp', <String, dynamic>{
        'appid': '__UNI__3FD8E08',
      });
      Get.showSnackbar(const GetSnackBar(
        title: "uniSdk",
        message: "打开成功",
      ));
    } on PlatformException {
      Get.showSnackbar(const GetSnackBar(title: "uniSdk", message: "打开失败"));
    }
  }

在页面上我们添加一个按钮用来触发该方法

 MaterialButton(onPressed:openUniDemo,child: const Text("打开小程序"),)

如此我们便实现了，在Flutter App内打开小程序

示例

小结

以上便是uni小程序在flutter项目中android侧的接入，希望能对大家有所帮助,unisdk也支持远程小程序加载，大家也可以尝试尝试，后续会出ios侧的接入及调用。

参考文档

unisdk官方文档

后记

欢迎大家沟通交流，如果对你有帮助，希望点赞支持一下，谢谢👏