The owner of the floor recently became a dad, and he is often troubled by breastfeeding problems. The existing app records that you need to open the application first and then find the corresponding function, which is a bit cumbersome, so he developed a breastfeeding card application for daily use.
This application is developed using the API8 version of JS UI components, and its functions still have many defects, which will be briefly described later.
effect display:
Slide
card details
Homepage
Through the above effect diagram, we can see that two cards were made of data entry and statistical charts.
data record card
When feeding children, we often ask ourselves when he ate milk last time, how much time has he eaten since the last time he ate milk? How much did he eat today? Whether he has defecated today? Is the recent defecation normal, etc.
data record card provides data entry and display of milk consumption and defecation. It can easily and quickly enter the breastfeeding/defecation status and remind you that the last breastfeeding/defecation has passed.
You can see through the card content. The card is simply arranged and combined through text and button components, and the recorded tasks are completed in combination with the corresponding event processing.
statistic card
merely recording data is not enough, it is not enough to visually display the feeding situation on that day, so the statistical card was developed.
statistics card uses the chart component to demonstrate the feeding data on the day, and counts the total amount of milk eaten on the day at the bottom in the form of text.
Homepage
Homepage displays the feeding records of the same day and the defecation records of the same day through two chart components.
PS: The layout code will be briefly introduced in subsequent articles. The only components used are text, div, chart, and button.
Interested friends can try to type on their own first, and the data records are recorded using @ohos.data.storage (lightweight storage). The on("change") event stored in
during development.
②storage The path to store files is best to obtain the current app path through context. However, the path acquisition is an asynchronous process and does not want to deal with asynchronousness. You can record the path of the storage file during debugging and define it as a constant for use.
inferred path is:
"/data/user/0/{{bundleName}}/files/{{filename}}"; ③storage The put method stored in the store just pushes the content into memory, and also needs to call the flush method to store the data into the file.
