Skip to content

该插件可以让cordova应用与flutter在同一个cordova项目里进行混合开发

License

Notifications You must be signed in to change notification settings

waitaction/cordova-plugin-flutter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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后附加调试。

因网络原因,截图'/screenshot/1590851583248.jpg'无法加载

因网络原因,截图'/screenshot/1590851885254.jpg'无法加载

其它

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

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

About

该插件可以让cordova应用与flutter在同一个cordova项目里进行混合开发

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published