发布于 由admin

UniApp的Flutter混合开发

UniApp与Flutter混合开发：一场跨界的科技盛宴 🎉

引言

大家好，欢迎来到今天的讲座！今天我们要聊的是一个非常有趣的话题——UniApp与Flutter的混合开发。如果你是前端开发者，可能对UniApp已经有所了解；如果你是移动端开发者，Flutter也一定不会陌生。那么，当这两个强大的框架相遇时，会发生什么奇妙的化学反应呢？让我们一起探索吧！

什么是UniApp和Flutter？

UniApp：全平台的前端框架

UniApp 是由 DCloud 推出的一个基于 Vue.js 的跨平台开发框架。它允许开发者使用一套代码同时开发多个平台的应用，包括 H5、小程序、App（iOS 和 Android）。UniApp 的核心思想是“一次编写，多端运行”，极大地提高了开发效率。

Flutter：Google的跨平台UI工具包

Flutter 是 Google 推出的一个开源框架，用于构建高性能、高保真度的移动应用。Flutter 使用 Dart 语言编写，支持 iOS 和 Android 平台，并且可以通过 WebAssembly 运行在 Web 上。Flutter 的最大优势在于它的渲染引擎可以直接控制底层的图形绘制，因此可以实现非常流畅的动画效果和复杂的 UI 设计。

为什么选择混合开发？

在实际项目中，我们可能会遇到这样的情况：部分页面需要快速迭代，适合使用 UniApp 开发；而某些复杂的功能模块，尤其是涉及到大量动画或自定义渲染的场景，Flutter 可能会更加合适。这时，混合开发就成为了最佳选择。

混合开发的优势在于：

  • 灵活性：可以根据需求选择最适合的技术栈。
  • 性能优化：对于性能要求较高的模块，可以使用 Flutter 进行优化。
  • 代码复用：UniApp 和 Flutter 都支持跨平台开发，减少了重复劳动。

混合开发的基本思路

在 UniApp 和 Flutter 的混合开发中，我们可以将 UniApp 作为主框架，负责大部分页面的开发，而将 Flutter 作为一个独立的模块，嵌入到 UniApp 中。这样做的好处是可以充分利用 UniApp 的开发效率，同时在需要高性能的场景下使用 Flutter。

1. 创建 UniApp 项目

首先，我们需要创建一个 UniApp 项目。如果你还没有安装 HBuilderX，建议先去下载并安装。然后，打开 HBuilderX，点击 File -> New -> Project，选择 UniApp，按照提示完成项目的创建。

# 安装 HBuilderX 后，创建 UniApp 项目
$ unbuild create my-app

2. 添加 Flutter 模块

接下来，我们需要在 UniApp 项目中添加 Flutter 模块。为了实现这一点，我们可以使用 flutter_module 插件。这个插件允许我们在现有的 Native 项目中集成 Flutter 模块。

安装 Flutter SDK

在开始之前，确保你已经安装了 Flutter SDK。你可以通过以下命令检查是否安装成功：

$ flutter --version

如果还没有安装，可以参考 Flutter 官方文档 进行安装。

创建 Flutter 模块

在终端中，进入你的 UniApp 项目的根目录，然后执行以下命令来创建一个 Flutter 模块：

$ flutter create -t module flutter_module

这将会在 flutter_module 文件夹中生成一个 Flutter 模块。

3. 配置 Android 项目

为了让 UniApp 和 Flutter 能够协同工作，我们需要对 Android 项目进行一些配置。具体步骤如下：

修改 build.gradle

在 android/app/build.gradle 文件中，添加以下依赖项：

dependencies {
    implementation project(':flutter_module')
}

修改 MainActivity.java

接下来，我们需要修改 MainActivity.java，以便在启动时加载 Flutter 模块。找到 MainActivity.java 文件，并添加以下代码：

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }
}

4. 配置 iOS 项目

对于 iOS 项目，我们需要做一些类似的配置。首先，在 ios/Podfile 文件中，添加以下内容：

target 'Runner' do
  use_frameworks!
  pod 'Flutter', :path => '../flutter_module'
end

然后，执行以下命令来安装依赖项：

$ cd ios
$ pod install

5. 在 UniApp 中调用 Flutter 页面

现在，我们已经完成了基本的配置，接下来可以在 UniApp 中调用 Flutter 页面了。UniApp 提供了一个 uni.navigateTo API，可以用来跳转到其他页面。我们可以通过这个 API 跳转到 Flutter 页面。

在 pages/index/index.vue 中，添加以下代码：

<template>
  <view>
    <button @click="goToFlutter">Go to Flutter Page</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToFlutter() {
      uni.navigateTo({
        url: '/pages/flutter/flutter'
      });
    }
  }
};
</script>

然后，在 pages/flutter/flutter.vue 中，使用 web-view 组件来加载 Flutter 页面：

<template>
  <web-view src="flutter://main"></web-view>
</template>

这里的 flutter://main 是一个特殊的 URL 方案，用于告诉 UniApp 加载 Flutter 模块中的 main.dart 文件。

通信机制

在混合开发中，UniApp 和 Flutter 之间的通信是一个非常重要的问题。幸运的是，Flutter 提供了一种叫做 MethodChannel 的机制，可以实现 Dart 和原生代码之间的双向通信。

从 UniApp 调用 Flutter 方法

假设我们在 Flutter 中定义了一个方法 getPlatformVersion，我们可以在 UniApp 中通过 MethodChannel 调用它。

在 flutter_module/lib/main.dart 中，添加以下代码：

import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Module')),
        body: Center(child: Text('Hello from Flutter!')),
      ),
    );
  }

  static const platform = MethodChannel('com.example.myapp');

  Future<void> getPlatformVersion() async {
    String version;
    try {
      version = await platform.invokeMethod('getPlatformVersion');
    } on PlatformException catch (e) {
      version = "Failed to get platform version.";
    }
    print(version);
  }
}

然后，在 UniApp 中，我们可以通过 plus.webview.currentWebview() 获取当前的 WebView 实例，并调用 Flutter 中的方法：

const webview = plus.webview.currentWebview();
webview.evalJS(`getPlatformVersion()`);

从 Flutter 调用 UniApp 方法

同样地，我们也可以从 Flutter 中调用 UniApp 的方法。假设我们在 UniApp 中定义了一个方法 showToast，我们可以在 Flutter 中通过 MethodChannel 调用它。

在 flutter_module/lib/main.dart 中，添加以下代码：

static const platform = MethodChannel('com.example.myapp');

Future<void> showToast(String message) async {
  try {
    await platform.invokeMethod('showToast', {'message': message});
  } on PlatformException catch (e) {
    print("Failed to show toast: '${e.message}'.");
  }
}

然后，在 UniApp 中，我们可以监听来自 Flutter 的调用：

plus.webview.currentWebview().addEventListener('methodCall', function(event) {
  if (event.method === 'showToast') {
    uni.showToast({
      title: event.args.message,
      icon: 'none'
    });
  }
});

总结

通过今天的讲座，我们了解了如何在 UniApp 中集成 Flutter 模块，以及如何实现两者之间的通信。混合开发不仅可以提高开发效率，还能在性能上做出更好的优化。希望这篇文章对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言哦！😊

参考资料

  • Flutter 官方文档
  • UniApp 官方文档

感谢大家的聆听，期待下次再见！✨

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注