Table of contents
3. The frame diagram of the card
4. Develop cards (using JS method)
development background
In daily life, people often want to check the weather conditions of the day or the last few days, but only a few people interact with the weather APP, because it is just some simple data, and users only need to check and understand. In this case We did this by developing a simple weather card.
1. Definition of card
Cards are an interface display form of FA. Important information or operations of FA are pre-loaded on the card to achieve direct service and reduce the level of experience.
The weather card described in this case is to help users understand the weather in the local area and other places. Users can intuitively see the local weather conditions of the day and the last few days on the card interface.
2. How to use the card
Long press the app with a horizontal bar at the bottom of the desktop, and click the service card in the pop-up menu to view all the corresponding cards.
Long press the card instance on the desktop, and you can remove the card in the pop-up menu, and you can also view all the cards of its corresponding application.
There are only 4 sizes of cards, namely: 1×2, 2×2, 2×4, 4×4.
3. The frame diagram of the card
The picture on the far left is the card provider . There are two options: Service (atomized service) and Application (traditional application) . The card provider used in the weather card developed in this case is the atomized service, which saves the installation of the application. step.
In the middle is the card management service , which acts like a bridge connecting the two sides.
The picture on the far right is the user side of the card , including the desktop and the service center . This time we will use the weather card in the service center.
4. Develop cards (using JS method)
1. Open DevEco Studio, create a new HarmonyOS project, select the template Empty Ability (J ava ) , click Finish after completing the configuration according to the following figure, enter the project configuration page, and wait for the project synchronization to complete:
2. After the project synchronization is completed, we right-click on the directory where MainAbility is located, and then click new-->Service Widget in turn
3. In the new page, select Service Widget for Type, and there are four options for Template, which are grid layout, graphic layout, immersive layout and list layout. Let's take graphic layout as an example and select Image With Information, and then click next. Next configure the card information
4. Service Widget Name corresponds to the card name, Description is the card description, Ability Name corresponds to the Page Ability that the card is attached to, Type we choose JS, Support Dimensions indicates the specifications supported by the card, we select all specifications, and click Finish
5. The directory bar after creation is as shown in the figure:
6. At this point, we click on MainAbility.java to see that compared with ordinary FA applications, there are 4 more methods here:
- onCreateForm : Automatically execute when creating a card to realize the initialization work required by the card
- onUpdateForm: executed when the update condition of the card is triggered
- onDeleteForm: Automatically execute when the card is deleted, and finish the work on demand
- onTriggerFormEvent: Executed when a card message event is triggered
In the future, if we want to implement functions such as refreshing and switching weather, we can write relevant codes in these 4 methods
7. Added some new configuration information in config.json:
- There are more js modules in the module, corresponding to the js resources and configuration of the card
- Pages represents the page of JS Component, which is used to list the routing information of the page
- Window is used to define the configuration of the window display mode
- Type indicates the type of JS application, and the value of form indicates that this is a card instance
- The forms module has been added under the abilities module, corresponding to the configuration of the card, you can go to the official document to view the detailed description
8. Open the index.hml file in the js directory, and then click the Preview tab on the right side of the IDE to view the card preview
Five, page code writing
Next, we implement this case by writing the contents of the three files in the figure:
1、index.hml
<div class="image_with_info_layout">
<stack class="title_container">
<!-- stack方便内部组件的布局，组件的位置都是相对title_container来计算-->
<text class="temperature" >21°</text>
<div class="image_container">
<image src="/common/cloud.png" onclick="routerToApp"></image>
</div>
<div class="text_container">
<div style="justify-content: space-between;margin-bottom: 5px;">
<text class="primary_info" style="diaplay-index:2;width: 130px;">{
{ city }}</text>
<text class="primary_info" style="diaplay-index:1">{
{time}}</text>
</div>
<div style="justify-content: space-between;">
<text class="primary_info" style="diaplay-index:2;width: 130px;">{
{date}}</text>
<text class="primary_info" style="diaplay-index:1">Mon,15 of Xin Chou Year</text>
</div>
</div>
</stack>
<div class="items_container" ></div>
</div>2、Index.css
.image_with_info_layout {
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
}
.title_container {/* show in 4X4 */
display-index: 2;
flex-weight: 18;
min-height: 148px;
width: 100%;
background-image: url("/common/weather.png");
}
.temperature{
font-size: 35px;
color: #c5ffff;
margin-left: 4%;
margin-top: 30px;
}
.image_container{
height: 75px;
width: 75px;
position: absolute;
left: 65%;
top: 18px;
}
.text_container{
flex-direction: column;
justify-content: flex-end;
margin: 12px 12px 12px 12px;
}
.primary_info{
font-size: 17px;
color: #e5ffff;
}
.items_container {/* show in 2X2,2X4,4X4 */
display-index: 1;
flex-weight: 20;
min-height: 170px;
}3、Index.json
{
"data": {
"time": "15:00",
"date": "Sunday,June 06",
"temperature": "21°",
"city": "HangZhou"
},
"actions": {
"routerToApp": {
"action": "router",
"abilityName": "com.example.jsformdemo.MainAbility"
},
}
}6. Effect display
1. The provider of the card we used in this case is Service (atomized service). There is no icon for the atomized service on the desktop, so it cannot be seen on the desktop of the mobile phone. Unified view, search and management, press and swipe up in the lower left or right corner of the desktop to enter the service center:
2. You can see that the entry_MainAbility card we created has already been displayed in the common use (during the experiment, I found that the p40 service center is not commonly used, but the mate30 has it, which may be due to configuration problems):
3. Long press the card to "Add to My Favorites" or "Add to Desktop":
4. We click "Add to Desktop", at this time, this new card appears on the desktop, as shown in the figure:
5. Long press the card, click "Service Card" in the pop-up menu, and all card specifications of the application will be displayed, as shown in the figure below:
6. Click Add to Desktop, as shown in the figure:
7. In addition, the weather icon on the card is also given a click event. Click the weather icon on the card to enter the card application, as shown in the figure:
At this point, the case of using JS to develop cards has come to an end. Later, the internal style of the card will be written, and the card will be given the function of updating the refresh time so that it can dynamically obtain data.
Summarize
In the era of the Internet of Everything, the number of smart devices that people own is increasing, and the diversity of devices and usage scenarios makes application development more complex and application portals more abundant. Atomization service is a future-oriented service provision method provided by HarmonyOS. It is a form of user application that has an independent entrance (users can directly trigger it by clicking), installation-free, and can provide users with one or more convenient services. .
In this experiment, I learned about the uniqueness and fun of card development through a simple case, which is of great help to me in learning HarmonyOS. During this development process, I also found a problem: start the mobile phone simulation When using the P40 device, I did not find the commonly used section in the service center. Later, I switched to the mate30. There is a commonly used section in the service center. It may be caused by a configuration problem, and it should be improved in the future.
With the update of the HarmonyOS version, there will be more and more interesting and convenient devices and applications. It is expected that people's basic necessities of life will become more comfortable and convenient.