HarmonyOS Flutter Practice: 21- Detailed Explanation of Hybrid Development-1-Overview

Introduction

In the previous series of articles, we started with building the development environment, talked about how to use and integrate third-party plug-ins, how to transform existing projects into Harmony, and how to review them; we also took the use of Amap's HarmonyOS SDK as an example to explain how to integrate Amap into the project.

Hybrid Development

In addition to using Flutter projects as the main project development, there is another common development method, namely hybrid development. The main project project is the HarmonyOS project, and the Flutter project exists in the form of a module, which is loaded into the main project project in a dependent manner, and finally realizes hybrid development.

Presumably, hybrid development will not be unfamiliar, because we have also briefly introduced the two forms of hybrid development of Harmony Flutter projects.

Starting from this chapter, we will go deeper and explore these two hybrid development methods based on principles and engineering practice.

Two ways of hybrid development

1. Loading to HarmonyOS project as Har package

HAR (Harmony Archive) is a static shared package that can contain code, C++ libraries, resources and configuration files. HAR can be used to share ArkUI components, resources and other related codes among multiple modules or multiple projects.

This development method is to compile and package the Flutter module into a HAR package, and introduce this module package in the native Harmony project as a Har package to achieve hybrid development.

1. Loading to HarmonyOS project as source code

From the introduction of method 1, it can be found that each update of the Flutter module needs to be recompiled into a Har package and repackaged into the native Harmony project, which is very troublesome. So there is a way of source code dependency, that is,

Let the native Harmony project depend on the source code of the Flutter module, so that when the Flutter code changes, it does not need to be repackaged into a Har package, and hot updates can be implemented during the development process to refresh the interface in real time.

Development process

1. General directory

For the convenience of management/demonstration, the directory name of this example is ohos_flutter_module_demo. We create both the native Harmony project and the Flutter module in this directory.

1. Create a native Harmony project

This is the host project. Here we use DevEco Studio to create a native Harmony project under the ohos_flutter_module_demo directory. The project name in this article is ohos_app.

1. Create a Flutter module

The process is the same. We can use the following command to create a Flutter module:

flutter create --template=module my_flutter_module

The final project directory structure is as follows:

ohos_flutter_module_demo
├── my_flutter_module
├── ohos_app

In this way, for easy maintenance, the Flutter module is created outside the host project and is at the same level as the host project. In this article, the parent directory is ohos_flutter_module_demo, and there are two subdirectories under it, namely ohos_app (host project) and my_flutter_module (Flutter module).

1. Compile Flutter module

If you want to use the Har package mode, you need to compile the Flutter module into a Har package first; if you want to use the source code dependency method, this step is not required.

Use the following command to compile the Flutter module into a Har package:

flutter build har --debug

1. Configure the native Harmony project

If you use the Har package mode, you can add the Har package to the dependency file:

First, copy the built Har package to the ohos Harmony project:

cp -r my_flutter_module/.ohos/har/* ohos_app/har/

"dependencies": {
"@ohos/flutter_module": "file:har/flutter_module.har",
"@ohos/flutter_ohos": "file:har/flutter.har"
},
"overrides" {
"@ohos/flutter_ohos": "file:har/flutter.har",
}

If you use the source code mode, you need to add the source code of the Flutter module to the dependency file:

"dependencies": {
"@ohos/flutter_module": "../flutter_module"
}

1. Modify the entry file (optional) Modify the entry file and copy the EntryAbility.ets and Index.ets files in the .ohos directory generated by the Flutter module to the host project for replacement

cp my_flutter_module/.ohos/entry/src/main/ets/entryability/EntryAbility.ets ohos_app/entry/src/main/ets/entryability/EntryAbility.ets
cp my_flutter_module/.ohos/entry/src/main/ets/pages/Index.ets ohos_app/entry/src/main/ets/pages/Index.ets