CodeNewbie Community 🌱

Cover image for ArkUI in Action: 01-Atomic Service Development
shaohushuo
shaohushuo

Posted on

ArkUI in Action: 01-Atomic Service Development

Introduction

Atomic Service is a lightweight application form in HarmonyOS that runs directly without downloading. Similar to WeChat Mini Programs, but unlike Mini Programs, meta-services are more lightweight.

Atomic Services are provided at the system level using native development, which is better than mini programs in terms of ease of use, performance, and experience.

Create a Atomic service

To use DevEco, click Create, select Atomic Service as the template on the left, and select Empty Ability as the template on the right. Click Next when prompted.

! alt text

Icon generation

After the icon is designed, you can use the built-in generation tool of DevEco to generate an icon that conforms to the meta-service specification. In the 'src/main/resources/media' directory, right-click 'New->Image Asset'

! alt text

A dialog box will pop up, select the designed icon, check the main color, and then you can generate the icon of the Atomic Service.

Write a page

Open the 'src/main/ets/pages/index.ets' page, written in the same way as your app's ArkUI, and start writing page code here.

API Limitations

In the HarmonOS documentation, open the API Reference, and you can check 'Filter Atomic Service API Set' on the left side to see which APIs may be used in the Atomic Service.

Permission Restrictions

There are more permission restrictions in the Atomic Service, and in the API documentation, the permissions that support the use of the Atomic Service are registered in the 'Atomic Service API'.

Restricted Open Access

Dark mode

In the 'src/main/resources' directory, create a new 'dark' directory, right-click in the resouces directory, select 'Resource Directory', and select 'Color Mode' on the left side of the dialog box.
Then click OK

! alt text

In the case of portable code, the color variable is referenced by a line such as '$r('app.color.primary_button_color')', and the corresponding color variable will be found in the 'resources/dart/element/color.json' file in dark mode. The same is true for other assets, such as images.

! alt text

Service card

Meta-services can add service cards, see "HarmonyOS Native Development Notes: 02 - Service Card Development" for details.

Dev Testing

In DevEco, click Run, the device can click the "Search" button at the top of the negative screen to enter the list of my Atomic Services, and you can see the newly installed Atomic Services in the recent inside.

Listing

For details, see "HarmonyOS Flutter Practice: 13 - HarmonyOS Application Packaging and Listing Process", add the application project first, and then add Atomic Services.

Precautions

  1. Click on the navigation bar to invalidate. When using 'RelativeContainer', it was found that if the button is in the same row as the button on the right side of the Atomic Service, the click event is not triggered, and the 'RelativeContainer' component is not used at this time, and something else, such as 'Column', is used instead.

References

Top comments (0)