DEV Community

Cover image for HarmonyOS Flutter Practice: 22- Detailed Explanation of Hybrid Development-2-Introduction of Har Package Mode
shaohushuo
shaohushuo

Posted on

HarmonyOS Flutter Practice: 22- Detailed Explanation of Hybrid Development-2-Introduction of Har Package Mode

#harmonyos #flutter

Load it into the HarmonyOS project as a Har package

Create work

Create a root directory 

mkdir ohos_flutter_module_demo
Enter fullscreen mode Exit fullscreen mode

This directory is used to store flutter projects and Harmony projects.

Create a Flutter module

First, create a Flutter module. We choose the same directory as the ohos_app project

flutter create --template=module my_flutter_module
Enter fullscreen mode Exit fullscreen mode

If fvm is used, first make sure that the flutter version used in the current directory is the Harmony SDK version. For example, you can use fvm use custom_3.22.0 to set it, and then add fvm before the flutter command. The above command becomes fvm flutter create --template=module my_flutter_module

The following output appears on the command line:

Creating project my_flutter_module...
Resolving dependencies in `my_flutter_module`...
Downloading packages...
Got dependencies in `my_flutter_module`.
Wrote 12 files.

All done!
Your module code is in my_flutter_module/lib/main.dart.
Enter fullscreen mode Exit fullscreen mode

Create Flutter After the module is successfully created, the directory structure is as follows:

Create a DevEco project

Use DevEco to create a new project named ohos_app in the ohos_flutter_module_demo directory.

Note that the saved directory is xxxx/ohos_flutter_module_demo/ohos_app

After successful creation, the entire directory structure is as follows:

As you can see, we put the Flutter module at the same level as the ohos_app project. The .ohos directory is automatically created in my_flutter_module, which is also a simple Harmony project, but it will contain a module named flutter_module.

Package the Flutter module into a Har package

Next, we use the flutter build har command to package the Flutter module into a Har package.

Before packaging, first configure the signature, open the .ohos directory with DevEco, and then sign the project. The operation is as follows:

DevEco Studio opens the my_flutter_module/.ohos project and configures the debug signature (File -> Project Structure -> Signing Configs, check Automatically generate signature)
Enter fullscreen mode Exit fullscreen mode 
flutter build har --debug
Enter fullscreen mode Exit fullscreen mode

The following output appears on the command line:

Running Hvigor task assembleHar... 47.5s

Consuming the Module
1. Open <host project>/oh-package.json5
2. Add flutter_module to the dependencies list:

"dependencies": {
"@ohos/flutter_module": "file:path/to/har/flutter_module.har"
}

3. Override flutter and plugins dependencies:

"overrides" {
"@ohos/flutter_ohos": "file:path/to/har/flutter.har",
}
Enter fullscreen mode Exit fullscreen mode

Observe the directory my_flutter_module/.ohos/har, you can see that the Har package of the Flutter module has been generated, and two files are generated in it, namely flutter_module.har and flutter.har.

Note that the generated flutter_module.har is the default name and has nothing to do with the project name. If you want to change the generated name, you can modify the package name in the my_flutter_module/.ohos/flutter_module/oh-package.json5 file.

Introduce Har package into ohos project

Next, we copy the generated har package to the host project ohos, and then return to the ohos project project to add the generated Har package to the dependency configuration.

  1. Copy the Har package 
cp -r my_flutter_module/.ohos/har/* ohos/har/
Enter fullscreen mode Exit fullscreen mode
  1. Edit the ohos_app/oh-package.json5 file: 
"dependencies": {
"@ohos/flutter_module": "file:har/my_flutter_module.har",
"@ohos/flutter_ohos": "file:har/my_flutter.har"
},
"overrides" {
"@ohos/flutter_ohos": "file:har/flutter.har",
}
Enter fullscreen mode Exit fullscreen mode

Note: If you do not want to use the method of copying the Har package, you can also directly import the original Har location through a relative path. You can use the following method to import:

"dependencies": {
"@ohos/flutter_module": "file:../my_flutter_module/.ohos/har/flutter_module.har",
"@ohos/flutter_ohos": "file:../my_flutter_module/.ohos/har/flutter.har"
},
"overrides": {
"@ohos/flutter_ohos": "file:../my_flutter_module/.ohos/har/flutter.har"
},
Enter fullscreen mode Exit fullscreen mode

Overrides need to be configured here to solve the dependency conflict problem, because @ohos/flutter_module depends on @ohos/flutter_ohos, but because a relative directory is used, it will cause loading failure, so overrides are used here to re-specify the path of @ohos/flutter_ohos.

In addition, unlike the above tips or official documents, we also added @ohos/flutter_ohos in dependencies. This is for IDE prompts. If not, the following error message will appear

Cannot find module '@ohos/flutter_ohos' or its corresponding type declarations. <ArkTSCheck>
Enter fullscreen mode Exit fullscreen mode

Finally, sign the ohos project again and run the DevEco project.

Next

Now we just introduce the Har package into the ohos project. In the next article Jump to Flutter Page, we will introduce how to initialize the Flutter engine in the ohos native project and jump to open the Flutter page in the appropriate place.

Summary

  1. This mode is suitable for larger project teams. A common scenario is that colleagues responsible for Flutter development develop designated modules and deliver them to the Harmony native development team in the form of Har packages.

  2. In this mode, the Harmony native development team does not need to pay too much attention to the Flutter content, and does not even need to install the Flutter development environment, which can better separate responsibilities.

  3. Disadvantages: Since the Flutter module is packaged into a Har package and exists as an so file, Flutter cannot be hot-reloaded.

References

Top comments (0)