A watch - article HongMeng development practical experience

Fired when app is created
Fired when app is destroyed
onlnit The page data is ready, you can use the data in js: The resource is ready
onReady The page has been compiled and can be displayed to the user
onShow The page is being displayed
onDestroy means the page is being displayeddestroy

flex-start main (sub) axis left (top) align
flex-end main (sub) axis right (bottom) alignment
center main (sub) axis center alignment
space-between main axis both ends alignment
space-around main axisScatter alignment
Task 2: Add the training page to achieve mutual jumps between the main page and the main page
router.replace();
import router from '@system.router';

Task 3: Verify application and lifecycle events for each page
app.js file: Manage global JS logic and application lifecycle.
log: debug level log

Task 4: Display the Logo and two selectors in the main page
Logo display: image component
Selector: picker-view component
Placeholder: picker1range

Task 5: Specify the default selected item of the selector as the middle item
selected: onchange event->custom function

Task 6: Pass the value selected in the main page to the training page
params specifies the data to be passed to the dictionary
Life cycle event function onlnit(): take out the value to get the data

Task 7: Modify the text and style of the buttons in the main page and training page
The value property of the input component Modify the text font-size Modify the text size background-color Modify the button background color

Task 8: Display the total number of seconds required to persist on the training page
In js, a string representing an integer is multiplied by an integer, and the result of the operation is an integer type

Task 9: Countdown on the training page to display the number of seconds to persist
The setnterval() function creates a timer and specifies the action and time interval to be performed by the timer when called

Task 10: Hide the displayed text when the countdown is over for the number of seconds to persist
show property is false
dynamic binding: placeholder "{{isShow}}”

Task 11: Alternately display "Inhale" and "Exhale" according to the breathing rhythm on the training page
setInterval() Create a timer

Task 12: Display the percentage of progress in real time every time you inhale or exhale
Data binding to specify the percentage of progress

Task 13: Every time you exhale or inhale, the logo will rotate clockwise for one week.
The animation-duration style in the style property specifies the rotation of the logo image for one week.
The animation-iteration-count style specifies the rotation of the logo image.number

Tasks 14, 15, 16: Add a countdown page and realize the jump from the main page item
There is a fex-direction style in the container, and columa arranges all components in the div vertically

Task 17: Swipe right after breathing training to view the training report
Set the onswipe attribute value to a custom function in the outermost div component.When the user's finger slides, the onwipe event of the page is triggered to call the custom function

Task 18: Change the title of the first training report page to pressure ratio
Learn data analysis and data visualization
The text component is the only one that does not have to set width and height. At this time, the outer layer of the text component is embeddedSet of div components

Task 19: Display a list of pressure categories under the title of the pressure ratio page
The for attribute of the list component - dynamic binding specifies the iterated array and the list-item component tem attribute - dynamic binding specifies the elements in the iteration array
list Display list list-item List items in the specified list

$item. The latter state represents the key of the dictionary

Task 20: Display the corresponding pressure ratio on the right side of the pressure classification
Randomly generate integers
Dictionary data type

Task 21: Display the progress of the pressure ratio below each list item
The progress component displays the progress bar style attribute of each list item

Task 22: Add a second training report page and corresponding swipe events

Task 23, 24: Display the heart rate curve and content
Use the chart component to draw the heart rate curve.Specify the values ​​of the options and datasets properties in the chart component by dynamic data binding to set the parameters of the graph

Task 25: Add a 3rd training report page and respond to swipe events

Task 26:
Problem: No Post Activity Percentage

Task 27: On the activity distribution page, the activity distribution map of the Shanghai Stock Exchange
the chart component type attribute is set to "bar" histogram stack component to stack the sub-components in it

The components are embedded in the stack component, the subcomponents will be pushed onto the stack in order, and the next stacked subcomponent will be stacked on top of the previous stacked subcomponent

Task 28: Add 4th Training Report Page

Task 29: Add everything except the pressure profile
canvas component

Task 30: Display the drawn pressure profile on the pressure profile page

Task 31: Add 5th training report page

......

Summary:
Finally, this study project is over, using three days of free time.Through this project, I initially learned css html js and how to develop hap and wirable classes of Hongmeng system.This book is very friendly for people who know nothing about front-end knowledge and who know nothing about app development.There is no omission, and the same operation is described without hesitation, reducing the trouble of turning back because of unfamiliar and forgetting operations.Moreover, through the method of direct hands-on practice, the focus is on practice, and the small knowledge used is explained in detail.Learn a lot.The road doesn't end there.

Problems in learning:
1. The logo picture cannot use the Chinese name
2. The logo picture seems to be cut instead of zoomed in and out
3. Problem: The default value is null when there is no action
br> 4. Careless attention to keywords

Why the program is exactly the same before and after the program is deleted and rewritten, but the effect is different. Really drunk..