This is the 15th day of my participation in the first Chinese New Year Challenge 2022. This article is participating in the “Starlight Project – Chinese New Year Post Activity”
Author: Nuts
Public account: “Big Front End Tour”
Huawei Cloud sharing expert, InfoQ contract writer, Ali Cloud expert blogger, 51CTO blog chief Experience officer, one of the open source project GVA, focusing on the sharing of big front-end technologies, including Flutter, applets, Android, VUE, JavaScript.
There are roughly five steps.
Step 1: Create an application project
Create a development project (in this case, an eTS project)
- Open the DevEco Studio
2. Create a new project and select a template like Empty Ability:
3. On the configuration Project page, select Application for Project Type and eTS for Language. Set other parameters as required.
Modify code file
After the Project is created, in the Project window, choose Entry > SRC > Main > ETS > Default > Pages to open the index.ets file
Step 2: Implement the user interface
Use UI components and decorators
Basic components: Image, Text, and Video Container components: Stack, Column, and List
Componentization decoration: @Component, @Entry, @Builder, @extend, etc
Supporting page component development and component custom State management decoration: @state, @Link, @Observed, @ObjectLink, @Storagelink, @Watch
Implement automatic update of data-driven views
Use UI rendering control syntax
Conditional rendering: if/elseif/else
During UI description, dynamically control component rendering according to different states
Loop render: ForEach/LazyForEach
For UI description, according to the number of data dynamic control rendering times, optimize the code implementation
Referencing UI resources
$r (‘ app.s t ring.name ‘)
Defines strings in the Element directory of Resources, supporting globalized languages
$r (‘ app.media.name ‘)
The media directory of resources stores resources in PNG, JPG, and SVG formats
Add UI interaction events
Basic gesture events: onClick/onTouch, etc
Define the basic user interaction, combined with the TouchEvent information to achieve custom gestures
Advanced gesture events: long press gesture/sliding gesture/combination gesture, etc
Built-in advanced gesture support is configured through the Gesture property function, and GestureGroup supports many advanced gesture combinations
Step 3: Refine the functional logic
Use the lifecycle interface
Page life cycle interface: onPageShow, onPageHide
UI component lifecycle interface: aboutToAppear, aboutToDisappear
Other lifecycle interfaces: onBackPressed, onCreate, onDestroy, etc
Add functional logic with page, UI component, and system state change lifecycle interfaces
Use the subsystem capability interface
Multiple subsystems provide a large number of system capabilities in just two steps:
1. Import dependency packages.
Two, direct call system capability interface.
Invoke system capabilities to achieve specific functional logic
Step 4: Optimize the interactive experience
To realize dynamic effect
Attribute animation
Animation: automatically monitors all general property changes of the component and automatically adds animation tween
Explicit animateTo: Specifies a specific property change to automatically add an animation tween to a specific property animation
Modify component properties, automatically generate animation tween, optimize the interactive experience of attribute changes
Animated transitions
Transition between components: Listens for changes in the rendering state of a component and animates the rendering and removal of a component
Page to pageTransition: specifies the animation used to switch between pages
When switching components and pages, animation tween is automatically generated to optimize the switching interactive experience
The animation component
ImageAnimator: Supports frame – by – frame animation
Use multiple pictures to compose animation, and dynamic control animation playback
Animator: Provides a component animation controller to dynamically control the playback state, customize the tween animation, and achieve deeply customized animation effects.
Step 5: Debug the simulator
The login
Choose p40Pro
Failure[INSTALL_PARSE_FAILED_USESDK_ERROR]
compileSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.
Copy the code
Source code address: github.com/ITmxs/hm_et…