DEV Community

ZHZL-m
ZHZL-m

Posted on

【Journey of HarmonyOS Next】DevEco Studio User Guide (23)

#harmonyosnext #devecostudio

Image description

1 -> Reference the shared package

You can use the third-party HAR to install it from a repository, from a local folder, or from a local archive.

If you want to set a custom repository, run the following command in the Terminal window of DevEco Studio to set it (before executing the command, please make sure that ohpm has been configured into the environment variable, after configuring the environment variable for the first time, DevEco Studio needs to be restarted):

ohpm config set registry your_registry1,your_registry2
Enter fullscreen mode Exit fullscreen mode

Note: OHPM supports multiple warehouse addresses, which are separated by commas.

Then, you can set the third-party package dependency information in the following two ways:

Method 1: In the Terminal window, switch to the module to which you want to import a third-party package, such as the entry module, and run the following command to install the third-party package, and DevEco Studio will automatically add the third-party package dependency to oh-package.json5 of the module:

cd path/to/your/project/entry
ohpm install @ohos/lottie
Enter fullscreen mode Exit fullscreen mode

Method 2: Set the third-party package dependency in oh-package.json5 of the module to which the third-party package needs to be introduced, as shown in the following example:

"dependencies": {
  "@ohos/lottie": "^2.0.0"
}
Enter fullscreen mode Exit fullscreen mode

After the dependency is configured, you need to run the ohpm install command to install the dependency package, which will be installed in the oh_modules directory of the module.

ohpm install
Enter fullscreen mode Exit fullscreen mode

Reference the source code of the local module (the local module must belong to the same project as the host module), for example, the entry module needs to rely on the source code of the foo module, there are two ways:

Method 1: In the Terminal window, switch to the module for which you want to import the source code of the local module, that is, the entry module, run the following command to install it, and automatically add dependencies to the oh-package.json5 module in the module:

cd path/to/your/project/entry
ohpm install path/to/foo
Enter fullscreen mode Exit fullscreen mode

Method 2: Set the source code dependencies in oh-package.json5 of the module that you want to import the source code of the local module, that is, in oh-package.json5 of the entry module, and add the following configurations:

"dependencies": {
  "foo": "file:path/to/foo"  // 此处也可以是以当前oh-package.json5所在目录为起点的相对路径
}
Enter fullscreen mode Exit fullscreen mode

After the dependency is set, you need to run the ohpm install command to install the dependency package, and the source code of the module foo will be installed in the oh_modules directory of the entry module.

ohpm install
Enter fullscreen mode Exit fullscreen mode

You can use the local HAR/HSP package in one of the following ways:

Method 1: In the Terminal window, switch to the module that needs to be imported as a local HAR/HSP package, such as the entry module, run the following command to install it, and automatically add the dependency to oh-package.json5: For example, if a HAR/HSP package is located in the root directory of a project, the following is an example:
To quote HAR:

cd path/to/your/project/entry
ohpm install path/to/package.har
Enter fullscreen mode Exit fullscreen mode

Referencing HSP (*.tgz package is compiled and generated in release mode via HSP module):

cd path/to/your/project/entry
ohpm install path/to/package.tgz
Enter fullscreen mode Exit fullscreen mode

Method 2: Set the local HAR/HSP package in oh-package.json5 of the module to which you want to import the third-party package. For example, if a HAR/HSP package is located in the root directory of a project, the following is an example:
To quote HAR:

"dependencies": {
  "package": "file:path/to/package.har" // 此处也可以是以当前oh-package.json5所在目录为起点的相对路径。 
}
Enter fullscreen mode Exit fullscreen mode

illustrate

In the code snippet, package.har is the name of the third-party package, and "package" is the dependency name used to refer to the third-party package, which is recommended to be consistent with the name field in the oh-package.json5 file of the third-party package.

Quote HSP:

"dependencies": {
  "package": "file:path/to/package.tgz" // 此处也可以是以当前oh-package.json5所在目录为起点的相对路径
}
Enter fullscreen mode Exit fullscreen mode

After the dependency is configured, you need to run the ohpm install command to install the dependency package, which will be installed in the oh_modules directory of the module.

ohpm install
Enter fullscreen mode Exit fullscreen mode

In addition, when installing or uninstalling a shared package, you can add hook settings to the oh-package.json5 file of the module or project to manage the lifecycle of the install and uninstall commands.

 "hooks": {
    "preInstall": "echo 00 preInstall", // install命令执行之前
    "postInstall": "echo 00 postInstall", // install命令执行之后
    "preUninstall": "echo 00 preUninstall", // uninstall命令执行之前
    "postUninstall": "echo 00 postUninstall"  // uninstall命令执行之后
  }
Enter fullscreen mode Exit fullscreen mode

illustrate

Currently, only hooks in the oh-package.json5 file of the current module or project are supported, and hooks in dependencies cannot be executed.
When referencing shared packages, please note that dependencies are currently only supported in the oh-package.json5 file under modules and projects, which will be used as dependencies and processed accordingly during the compilation and build process.

2 -> .tgz format shared package to .har format

Using the Hvigor project created before the DevEco Studio 3.1 Release and using the npm package manager, the shared package is a HAR package in .tgz format. To convert an existing .tgz HAR package to a .har HAR package using the ohpm package manager, you need to manually convert it according to the following process:

  1. Use a packaging and compression tool that can decompress the existing .tgz HAR package in .tgz format. For example, on Windows 10/11 or macOS, you can use the command-line tool tar that comes with the operating system: 
tar -xvf <tar package path> -C <extract path>
Enter fullscreen mode Exit fullscreen mode

Image description

The extracted file will be in the package folder of the extraction path.

  1. Change the package.json file in the package folder to the oh-package.json5 file.

  2. Use the packaging compression tool in step 1 to package and compress the package folder into .har format:

tar -cvzf <tar package path> package
Enter fullscreen mode Exit fullscreen mode

Image description

The converted .har format HAR package can be installed and released using the ohpm package manager.

3 -> Generate the app icon

DevEco Studio supports the Image Asset feature, which helps developers generate icons that adapt to different devices and screen densities, and show the specific location of the icons in the catalog.

illustrate

Currently, the Image Asset feature supports the generation of single-layer icons for Phone, Tablet, and 2in1 applications.

Image Assets support the generation of the following two types of icons:

icon: The app icon (the app icon that appears in apps on your phone or other device's desktop and settings >).
start window icon: The start page icon.

  1. Select the module or file in the project, right-click the New > Image Asset to enter the icon configuration page.

illustrate

If you create a new Image Asset in a module-level directory (Entry or other modules), you will create an icon of type Icon and start window, which will be used to configure the icon and startWindowIcon fields in the module.json5 file, and if you create a new Image Asset in a project-level directory (AppScope or other directory), an icon of type will be created. The generated icon can be configured in the icon field of the app.json5 file.

  1. You need to configure basic information such as icon style and size according to the wizard.

Device: Select the device type on which the currently configured icon takes effect.
Icon Type: displays the type of the current icon.
Name: the name of the icon. Letters, digits, and underscores can be used for naming, and the maximum length is 128 characters. Chinese naming is not supported;
Foreground Layer: The foreground layer of the hierarchical icon resource. The following fields can be configured:
Path: Select the path where the foreground image is stored. The recommended icon size is 1024px*1024px to ensure the overall clarity of the icon.
Trim: Select Yes to adjust the distance between the icon graphic and the border, and remove the excess transparent space around the image.
Resize: Drag the slider to set the scale of the graph.

Image description

Background Layer: The background layer of the layered icon resource. Configure the following fields:
Asset Type: Sets the icon background type. You can select either Color or Image.
Color: Click on the color block area and select the appropriate background color.
Path: Select the background image path. The recommended icon size is 1024px*1024px to ensure the overall clarity of the icon.
Trim: Select Yes to adjust the distance between the icon graphic and the border, and remove the excess transparent space around the image.
Resize: Drag the slider to set the scale of the graph.

Image description

  1. Click Next, confirm the storage path and corresponding size information of the icon, and the icon will be stored in the resources directory by default. Click the Finish icon to complete the generation. The comparison between the different sizes is as follows:

sdpi: indicates the screen density (Small-scale Dots Per Inch) and is applicable to devices with a dpi value of (0, 120).
mdpi: indicates the screen density of the medium scale (Dots Per Inch), which is applicable to devices with a dpi value of (120, 160).
ldpi: indicates the large-scale Dots Per Inch, which is applicable to devices with a dpi value of (160, 240).
xldpi: indicates the Extra Large-scale Dots Per Inch, which is applicable to devices with a dpi value of (240, 320).
xxldpi: indicates the Extra Extra Large-scale Dots Per Inch, which is applicable to devices with a dpi value of (320, 480).
xxxldpi: indicates the Extra Extra Extra Large-scale Dots Per Inch, which is applicable to devices with a dpi value of (480, 640).

Image description

  1. If you want to configure the app icon that appears on the desktop or settings page, you can change the icon field in the module.json5 file to the newly generated icon name, and if you need to change the icon icon on the startup page, you can change the startWindowIcon field in the module.json5 file to the newly generated icon name.

illustrate

After the newly generated icon name is configured in the preceding field, the system will preferentially search for resources from the matching qualifier directory, that is, the icon file of different sizes generated in step 3 based on the current device status.
If the icon field is not configured in the module.json5 file, the system will use the icon configured in the icon field in app.json5.

Top comments (0)