HarmonyOS flutter_flutter集成flutter_boost

1,133 阅读1分钟

一、环境要求

1、编译环境

  • DevEco Studio NEXT Developer Beta1(5.0.3.300)及以上。
  • HarmonyOS SDK API 12 及以上。
  • 真机 HarmonyOS NEXT Developer Beta1 (3.0.0.22) 及以上

2、flutter环境配置

二、项目创建

mkdir flutter2harmony

1、flutter部分

cd flutter2harmony

flutter create -t module flutter_module  
  • 添加FlutterBoost依赖到yaml文件
flutter_boost:
  git:
    url: 'https://github.com/alibaba/flutter_boost.git'
    ref: '4.5.11'

2、Harmony部分

flutter2harmony文件下创建鸿蒙项目ohos_app

cp -R flutter_module/.ohos/flutter_module ohos_app
  • ohos_app/oh-package.json5 添加
"overrides": {
  '@ohos/flutter_ohos': 'file:./har/flutter.har',
}
  • ohos_app/build-profile.json5 modules 添加
{
  "name": "flutter_module",
  "srcPath": "./flutter_module",
  "targets": [
    {
      "name": "default",
      "applyToProducts": [
        "default"
      ]
    }
  ]
}
  • ohos_app/entry/oh-package.json5 添加依赖
"@ohos/flutter_module": "../flutter_module",
"@ohos/flutter_ohos': 'file:../har/flutter.har',
"flutter_boost": "file:../har/flutter_boost.har"
  • 修改ohos_app/flutter_module/oh-package.json5 dependencies
"@ohos/flutter_ohos": "file:../har/flutter.har",
"flutter_boost": "file:../har/flutter_boost.har"
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import Want from '@ohos.app.ability.Want';
import { FlutterManager } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '@ohos/flutter_module';

import {
  FlutterBoost,
  FlutterBoostDelegate,
  FlutterBoostRouteOptions,
  FlutterBoostSetupOptionsBuilder
} from 'flutter_boost'
import router from '@ohos.router';

export default class EntryAbility extends UIAbility implements FlutterBoostDelegate {

  // 打开原生
  pushNativeRoute(options: FlutterBoostRouteOptions) {
    router.pushUrl({ url: 'xxxx' })
  }

  // 打开flutter
  pushFlutterRoute(options: FlutterBoostRouteOptions) {
    router.pushUrl({
      url: 'pages/FlutterUI', params: {
        uri: options.getPageName(),
        params: options.getArguments(),
      }
    }).then(() => {
    })
  }

  async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    FlutterManager.getInstance().pushUIAbility(this)
  }

  onDestroy(): void {
    FlutterManager.getInstance().popUIAbility(this)
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    FlutterManager.getInstance().pushWindowStage(this, windowStage);

    const optionsBuilder: FlutterBoostSetupOptionsBuilder = new FlutterBoostSetupOptionsBuilder()
    FlutterBoost.getInstance().setup(this, this.context, (engine) => {
      GeneratedPluginRegistrant.registerWith(engine);
      //引擎初始化成功
      windowStage.loadContent('pages/Index', (err, data) => {
        if (err.code) {
          return;
        }
      });
    }, optionsBuilder.build())
  }

  onWindowStageDestroy(): void {
    FlutterManager.getInstance().popWindowStage(this)
  }

  onForeground(): void {
  }

  onBackground(): void {
  }
}

3、flutter工程与ohos工程联动

cd flutter_module
rm -rf .ohos
ln -s ../ohos_app .ohos

4、运行(不同环境使用不同engine)

flutter run --local-engine=/xxx/engine/src/out/ohos_debug_unopt_arm64