cordova应用与flutter混合开发

让你的cordova应用能与flutter进行混合开发

开发环境	版本
cordova	≥ 10.0.0
cordova-android	≥ 9.0.0
cordova-ios	≥ 5.0.0
flutter	≥ 1.17.0

示例代码：https://github.com/waitaction/cordovaFlutterDemo

安装

安装cordova-plugin-flutter插件

cordova plugin add cordova-plugin-flutter

安装完之后会产生flutter_module文件夹，不要去修改flutter_module文件夹名称 安装过程可能会卡住，等一小会就正常

编译android

cordova build android

编译过程中会下载jar包，可能需要几分钟时间...

编译ios

cordova build ios

编译过程会下载缺失的flutter framework，可能需要几分钟时间...

在cordova调用flutter

flutter.init 使用前初始化，尽可能早的初始化，在deviceready之后，且只初始一次

flutter.init(function(){
    console.log("初始化成功");
},function(err){
    console.log("初始化失败");
})

下面的方法都要在flutter.init之后才能调用

flutter.open 打开flutter

//请在flutter.init方法之后调用
flutter.open(
    undefined,
    function (result) {
        console.log("打开flutter成功");
        console.log(result);
    }, function (err) {
        console.log("打开flutter失败");
    }
);

flutter.open(
    '/HomePage', //flutter路由名称    
    function (result) {
        console.log("打开flutter成功");
    },
    function (err) {
        console.log("打开flutter失败");
    }
);

对应flutter路由名称

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        platform: TargetPlatform.iOS,
      ),
      routes: {
        '/HomePage': (BuildContext context) => new HomePage(),
        '/NextPage': (BuildContext context) => new NextPage(),
      },
      initialRoute: '/HomePage', //初始化路由为first页面
      // onGenerateRoute: AppRouter.router.generator,
    );
  }

在flutter返回结果给cordova的

在flutter调用

dart代码：

import 'package:flutter_module/cordova.dart';
//在需要的地方调用
await CordovaPlatform.finish({"format": "yyyy年MM月dd日"});

示例代码

flutter.init(function () {
    console.log("初始化成功");
    flutter.open(null,function (result) {
        console.log("打开flutter成功");
        //result 是flutter返回的结果，此处代码会输出 {"format":"yyyy年MM月dd日"}
        console.log("result")
    }, function (err) {
        console.log(err);
    })
}, function (err) {

});

编译

编译ios时，需要在虚拟机的调试请使用cordova build ios编译

开发完成后，需要上架到app store，请使用cordova build ios --release 编译

如果使用cordova build ios --release命令编译，使用xcode运行在虚拟机会提示Building for iOS Simulator, but the embedded framework 'Flutter.framework' was built for iOS的错误

如何调试flutter代码

使用 visual studio code，安装flutter扩展，打开cordova项目路径/flutter_module目录，使用visual studio code调试工具创建Flutter: Attach to Device，运行app后附加调试。

其它

感谢 @zhangjianying 大神编写的ios代码和ios构建脚本.

目前仍有许多不足之处，由于工作繁忙，其它细节，你可以 fork一份代码 进行优化。