https://github.com/waitaction/cordova-plugin-flutter
该插件可以让cordova应用与flutter在同一个cordova项目里进行混合开发
https://github.com/waitaction/cordova-plugin-flutter
Last synced: about 1 month ago
JSON representation
该插件可以让cordova应用与flutter在同一个cordova项目里进行混合开发
- Host: GitHub
- URL: https://github.com/waitaction/cordova-plugin-flutter
- Owner: waitaction
- License: apache-2.0
- Created: 2020-03-12T14:57:06.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T14:13:54.000Z (about 2 years ago)
- Last Synced: 2025-04-03T19:40:30.005Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 519 KB
- Stars: 18
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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插件
``` shell
cordova plugin add cordova-plugin-flutter
```
> 安装完之后会产生`flutter_module`文件夹，不要去修改flutter_module文件夹名称
> 安装过程可能会卡住，等一小会就正常
编译android
``` shell
cordova build android
```
> 编译过程中会下载jar包，可能需要几分钟时间...
编译ios
``` shell
cordova build ios
```
> 编译过程会下载缺失的flutter framework，可能需要几分钟时间...
## 在`cordova`调用`flutter`
**flutter.init** `使用前初始化，尽可能早的初始化，在deviceready之后，且只初始一次`
``` javascript
flutter.init(function(){
console.log("初始化成功");
},function(err){
console.log("初始化失败");
})
```
下面的方法都要在`flutter.init`之后才能调用
**flutter.open** `打开flutter`
``` javascript
//请在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路由名称
``` dart
@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`代码：
``` dart
import 'package:flutter_module/cordova.dart';
//在需要的地方调用
await CordovaPlatform.finish({"format": "yyyy年MM月dd日"});
```
## 示例代码
``` js
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一份代码](https://github.com/waitaction/cordova-plugin-flutter) 进行优化。