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 HarmonyOS, and put it on the shelf for review. Taking the use of AutoNavi's HarmonyOS SDK as an example,
Explains how to integrate AutoNavi map into the project.
Hybrid development
In addition to using the Flutter project as the main project development, there is also a common development method, that is, hybrid development, where the main project project is a HarmonyOS project, and the Flutter project exists in the form of modules, which are loaded into the main project project in a dependent manner, and finally realize hybrid development.
Presumably, hybrid development will not be unfamiliar, because we have also briefly introduced the two forms of hybrid development of the HarmonyOS Flutter project.
Starting with this chapter, we will go further and explore these two hybrid development methods from the principle and the main line of engineering practice.
Two ways of hybrid development
- Load the Har package into the HarmonyOS project
A HAR (Harmony Archive) is a static shared package that can contain code, C++ libraries, resources, and configuration files. You can use HAR to share ArkUI components, resources, and other related code with multiple modules or projects.
This development method is to compile and package the Flutter module into a HAR package, and introduce this module package in the form of a HAR package in the original HarmonyOS project, so as to achieve hybrid development.
- Load the HarmonyOS project as source code
From the introduction of Method 1, it can be found that every update of the Flutter module needs to be recompiled into a Har package, and it needs to be repackaged into the native HarmonyOS project, which is very troublesome. So there is a way of source dependency, that is,
Let the native HarmonyOS project rely 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 it can be updated hotly and the interface can be refreshed in real time during the development process.
Development process
- General Table of Contents
For ease of management/demonstration, the directory of this example is named ohos_flutter_module_demo, and we will create the native HarmonyOS project and Flutter module in this directory.
- Create a native HarmonyOS project
This is the host project, here we use DevEco Studio, under the ohos_flutter_module_demo directory, to create a native HarmonyOS project, the project name in this article is ohos_app.
- Create a Flutter module
The process is the same, we can create a Flutter module with the following command:
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 ease of maintenance, Flutter modules are created outside of the host project, in sibling directories to the host project. In this article, the parent directory is ohos_flutter_module_demo, and there are two subdirectories under it, which are ohos_app (host project) and my_flutter_module (Flutter module).
- Compile the Flutter module
To use the Har package mode, you need to compile the Flutter module into a Har package first; This step is not required for how to use source dependencies.
Use the following command to compile the Flutter module into a Har package:
flutter build har --debug
- Configure the native HarmonyOS project
If you are using the HAR package mode, you can add the HAR package to the dependency file:
First, copy the constructed Har package to the ohos HarmonyOS 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 are using source code mode, you need to add the source code of the Flutter module to the dependency file:
"dependencies": {
"@ohos/flutter_module": ".. /flutter_module"
}
- 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
Top comments (0)