让你的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,可能需要几分钟时间...
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调用
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的错误
使用 visual studio code,安装flutter扩展,打开cordova项目路径/flutter_module目录,使用visual studio code调试工具创建Flutter: Attach to Device,运行app后附加调试。
因网络原因,截图'/screenshot/1590851583248.jpg'无法加载
因网络原因,截图'/screenshot/1590851885254.jpg'无法加载
感谢 @zhangjianying 大神编写的ios代码和ios构建脚本.
目前仍有许多不足之处,由于工作繁忙,其它细节,你可以 fork一份代码 进行优化。