After HDC in 2022, "Hongmeng World" has attracted wide attention. As a pioneer of Hongmeng practitioners, in order to help the increasingly prosperous HarmonyOS application novice developers quickly experience and get started with HarmonyOS application and meta-service development, I wrote this hand-in-hand development teaching guide .
This article mainly includes three aspects. The first part is software development classification and meta-services , the second part is meta-service application scenarios , and the third part is quick-start universal card development experience .
You can also watch the universal card-related video courses I launched in the HUAWEI Developer Alliance Academy simultaneously. Click this link to compare and refer to this document to make it easier to digest the content.
1. Software development classification and meta-services
(1) Brief analysis of software classification development
Software is generally divided into two categories: system software and application software. See the table below for the relationship and development of users, equipment, operating system system software, traffic entry, and application
forms. Upgrade from WEB website and H5 website to independent client and super application-based light application form applet.
In every technology-driven innovation era, both system software and application software are undergoing changes and iterative upgrades. So in the era of the Internet of Things and intelligence, the number and types of connected devices are increasing. What are the characteristics and manifestations of applications?
We believe that meta-services and universal cards represent one of the new directions for the development of HarmonyOS applications.
(2) Universal card concept and advantages
The meta-service is developed based on the HarmonyOS API, adhering to the three major application and service development concepts of the HarmonyOS system: one-time development and multi-device deployment, separable and combined free circulation, and unified ecological native intelligence. It supports running in 1+8 +N devices, for users to use conveniently on suitable scenarios and suitable devices, and obtain a consistent service experience of super terminals.
The universal card is to display the key and important information of the meta-service in the form of a card, realize direct service and multi-device adaptation, and provide intuitive content for users. Universal cards include micro, small, medium and large cards, as shown in the picture below----
Image source: Jiaolong Tengfei
For users , meta-services are an active attempt for the new era, in the form of lightweight, installation-free, and cross-device, such as cards, voice, icons, etc., to reach appropriate scenarios through rich, accurate, and intelligent distribution methods , which has greatly changed the way users obtain services, from the traditional "people looking for applications" to "services looking for people", effectively meeting the service needs of users in different scenarios.
For developers , the HarmonyOS system provides a wealth of components, interfaces, and traffic portals; meta-services only need to be developed and put on the shelf once, and can be deployed on various HarmonyOS terminals and distributed in multiple channels, greatly reducing development costs. The resident desktop card entry and richer scene recommendations can bring more natural traffic to developers, thereby reducing post-operation costs.
2. Meta-service application scenarios
(1) Device control service
Meta-service can be directly combined with various devices to provide users with experiences such as fast distribution network, card interaction, direct service, and cross-device transfer. The specific implementation process is as follows ----
Image source: HarmonyOS official website
At the 2022HDC conference, Huawei demonstrated meta-service application cases for scenic spot tours, hotel check-in, and retail shopping scenarios; it realized convenient, comfortable, and closed-loop user services, and comprehensively improved the information, digital, and intelligent service levels of businesses. There are still more innovations and better user experience in the scenarios of smart home, smart travel, sports and health, smart office, audio-visual entertainment, education and care, etc., waiting for manufacturers and developers to explore and practice meta-services.
(2) Connecting to traditional application methods and native light application innovation development
Meta-services connecting to traditional application methods is an active attempt, which plays the role of basic quantity and basic experience, and can effectively promote the development of the early stage ecology and meet the basic needs of users. need.
The development, innovation and operation of the pure native light application form of the universal card based on meta-services is a way that we believe has great development prospects and can enjoy various dividends. Mainstream websites, H5, APP, etc. will all have their new forms of expression in the universal card. In addition, there will be many new and innovative meta-services that are not based on traditional applications, and will be born and developed.
We can observe from the HarmonyOS mobile phone service center and the universal card displayed on the negative screen that domestic traditional application upgrades and brand-new meta-service innovations are actively trying, and everyone is actively exploring and seizing the smart new world based on the HarmonyOS Internet of Everything. The meta-service and the "ship ticket" of the new application form of universal card.
3. Quickly get started with a universal card development experience
After reading the above content, do you want to experience the development of universal cards as soon as possible? We have prepared quick-start purely practical universal card case exercises for developers, the details are as follows——
(1) Practice prerequisites
- Developers should have entry-level and above foundations of JS and front-end development languages;
- Registered and verified HUAWEI account;
- HUAWEI DevEco Studio has been installed on the development device.
This case uses HUAWEI DevEco Studio 3.0.0.800, API4-API7 can be experienced, due to IDE version and API upgrades and compatibility issues, you may encounter some differences in details when practicing, but the overall process is consistent.
(2) Create a project
1. Create an engineering project
Open DevEco Studio and select your Ability template. Here we choose the Empty Ability template, and then click Next to proceed to the next step. As shown in Figure 1.
figure 1
2. Configure the project project
Configure the project project, as shown in Figure 2 and Figure 3, and then click Finish to create.
figure 2
image 3
(3) Create a card
1. Find the js file under src->main in the entry, right-click and select the Service Widget option in new, as shown in Figure 4.
Figure 4
2. Select the immersive Data card template, as shown in Figure 5, and click Next to proceed to the next step.
Figure 5
3. Configure the card template information, as shown in Figure 6, and then click Finish to create.
Figure 6
(4) Modify the code
1. View the card just created under js, as shown in Figure 7.
Figure 7
Open the index.hml file under this file and modify the code.
<!-- 用堆叠stack组件包裹节点div组件-->
<stack style="background-color: #f5d354;width: 100%;height: 100%;" onclick="routerEvent">
<!-- 右边图片（添加此段代码）-->
<div class="right-img">
<image class="images" src="/common/ic_default_image.png" alt="img" ></image>
</div>
<!-- 标题信息-->
<div class="container">
<div class="title_wrapper">
<text class="title_big">
{
{ $t('strings.title_big') }}
</text>
<text class="title_small">
{
{ $t('strings.title_small') }}
</text>
</div>
<!-- 文本信息 （修改text信息，后面加上数字标记1、2、3）-->
<div class="list_wrapper">
<div class="item_first">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{
{ $t('strings.text') }}</text>
</div>
<div class="item">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{
{ $t('strings.text1') }}</text>
</div>
<div class="item">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{
{ $t('strings.text2') }}</text>
</div>
<div class="item">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{
{ $t('strings.text3') }}</text>
</div>
<div class="item_last">
<image class="item_image" src='/common/ic_default.png'></image>
<text class="item_text" onclick="routerEvent">{
{ $t('strings.text4') }}</text>
</div>
</div>
</div>
</stack>
Open the index.css file under this file and modify the code (find the corresponding modified part).
.container {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
/*注释代码*/
/* background-color: dodgerblue;*/
/* background-image: url('/common/[email protected]');*/
/* background-repeat: no-repeat;*/
/* background-size: cover;*/
}
/*添加.right-img样式*/
.right-img{
width: 40px;
height: 40px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 12px;
}
/*将.title_big中的font-size: 19px;改为16px*/
.title_big {
font-size: 16px;
font-weight: bold;
color: white;
}
/*适配wearable*/
[url=home.php?mod=space&uid=205723]@MEDIA[/url] (device-type: wearable) {
.right-img{
display: none;
}
}
Open the i18n file under this file, open the .json file, and modify the code.
zh_CN.json:
{
"strings": {
"title_big": "标题",
"title_small": "这里是副标题",
"text": "文本",
"text1": "文本1",
"text2": "文本2",
"text3": "文本3",
"text4": "文本4"
}
}
en_US.json:
{
"strings": {
"title_big": "Title",
"title_small": "Text",
"text": "Text",
"text1": "Text1",
"text2": "Text2",
"text3": "Text3",
"text4": "Text4"
}
}
2. Open the default file under js and open the pages file.
Modify the code:
index.hml
<div class="container">
<text class="title">你好，欢迎来到</text>
<text class="title">{
{title1}}</text>
<text class="title">{
{title2}}</text>
</div>
index.css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 30px;
color: #000000;
opacity: 0.9;
margin: 4px 0px;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}
@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.title {
font-size: 100px;
color: #FFFFFF;
}
}
@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}
index.js
export default {
data: {
title1: "元服务",
title2: "新应用时代和新世界！"
},
onInit() {}
}
(5) Running effect
1. Open the simulator, as shown in Figure 9
Figure 9
2. Log in, as shown in Figure 10
Figure 10
It will automatically log out of the Huawei Developer Alliance account, enter the account password to log in, and log in successfully, then return to DevEco Studio.
3. Select the P40 device in the emulator to open it. Click the small triangle to run the project, as shown in Figure 11; after successful operation, an initialization page will appear, as shown in Figure 12; click the home button in the emulator to return to the desktop, and then slide diagonally upward from the lower left or right corner of the phone screen to enter the service center, as shown in Figure 13.
Figure 11
Figure 12
Figure 13
4. After entering the service center, you can see the created card (this is the card widget that the project created and initialized itself), as shown in Figure 14; tap the card to add it to the desktop, as shown in Figure 15; the card is successfully added to the desktop, as shown in Figure 16 .
Figure 14
Figure 15
Figure 16
5. Long press the desktop card, a pop-up window will appear, click More universal cards, select the newly created card we created before, and add it to the desktop, as shown in Figure 17, Figure 18, and Figure 19.
Figure 17
Figure 18
Figure 19
Click on the newly added card to the desktop to return to the "Hello, welcome to the new era and world of meta-service applications!" page. If you want to display the effects of other emulators here, just repeat the above steps to open the emulator. This case supports the display of the effects of Phone, Tablet, and Wearable cards.