Music applet project
3.1 Preparations before development
3.1.1 Project display
music appletProject effectexhibit:
3.1.2 Project Analysis
Music applet projectpage structure diagram：
- tab navigation bar
- content content area
- player music player control
music applet projectDirectory Structure：
3.1.3 Project initialization
Developer tools create a blank project:
3.2 [Task 1] Tab switching
3.2.1 Task Analysis
Tabs and Pages(info.wxml, play.wxml, palylist.wxml) structure diagram:
3.2.2 Preliminary knowledge
swiper componentWrite the sliding page structure:
swiper componentCommon properties:
swiper componentWrite the sliding page structure:
includeThe main purpose:
- Splitting your code into multiple files makes it easier to find your code.
- Extract the common parts of the code. Introduced via external files.
3.2.3 Writing page structure and styles
Music applet basicspages and styles:
test pageinfo.wxml、page.wxml、play.wxmldocument:
3.2.4 Realize tab switching
clickNavigation BarTabs implement tab switching:
viascroll eventSwitch page effect:
3.3 [Task 2] Music recommendation
3.3.1 Task Analysis
Music recommendation page structure diagram:
3.3.2 Preliminary knowledge
scroll-view componentAttributes and descriptions:
scroll-view componentEvent object:
scroll-view componentEvent object parameter analysis:
scrollLeft: The distance from the left side of the horizontal scroll bar to the left side of the view.
scrollTop: The distance from the upper end of the vertical scroll bar to the top of the view.
scrollHeight: The maximum scrolling distance of the vertical scroll bar on the Y axis.
scrollWidth: The maximum scrolling distance of the horizontal scroll bar on the X axis.
deltaX: The scroll state of the horizontal scroll bar.
deltaY: The scroll state of the vertical scroll bar.
image componentProperties and description:
image componentZoom mode:
image component9 cropping modes:
image componentZoom mode and crop mode tests:
3.3.3 Content area scrolling
scroll-view component：
3.3.4 Carousel image
swiper componentRealize the carousel map:
3.3.5 Function buttons
flex layoutRealize the function button:
3.3.6 Popular Music
flex layoutImplement the page layout:
3.4 [Task 3] Player
3.4.1 Task Analysis
Structural diagram of the player tab page:
analyze the specific functions of the player:
music information: Display the title and artist of the currently playing track.
The album cover: When the music is playing, the album art will rotate clockwise.
playback progress: Display the playback progress and adjust the music progress.
3.4.2 Preliminary knowledge
audioCtx objectThe way of declaration:
Audio APIThe properties and description of the interface:
Audio APIInterface methods and descriptions:
innerAudioContextCase use:
slider componentProperties and description:
slider componentusage of:
3.4.3 Define basic data
Music playlist and music status data:
3.4.4 Realize music playback function
Music playback logic code:
Structure code of the bottom player:
Style code of the bottom player:
Pause/play button control song of the bottom player:
Realize the player switching to the next song:
3.4.5 Write the player page
Player page structure code:
Player page style code: Poster
rotation through CSS3 animation:
Poster rotation through CSS3 animation:
3.4.6 Control playback progress
Slider structure at the bottom of the player page:
Slider style at the bottom of the player page:
Display music playback progress:
Control the length of the progress bar Control the song playback progress:
3.5 [Task 4] Player list
3.5.1 Task Analysis
Control the length of the progress bar to control the playback progress of the song:
3.5.2 Writing page structure and styles
Control the length of the progress bar to control the playback progress of the song:
Control the length of the progress bar to control the playback progress of the song:
3.5.3 Realize the song changing function
Realize the song changing function:
Summarize
This chapter explains the complete development process of the music applet project. The development steps include the analysis of the page structure, the design of the style, and the use of components. Through the study of this chapter, readers can master the development of the basic interactive logic of applets, use API to realize specific functions in the project, and learn to solve common problems in the development process.