How to use WeChat Mini Programs to imitate apple music
How to use WeChat Mini Programs to imitate apple music, I believe that many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.
Today, let's first talk about the production process of the "broadcast" page in apple music, as shown in the figure:
Of course, it is impossible for us to be very similar, we can only say that we are similar.
Put the pictures you need into / imgs/broadcast/ first.
First of all, create a new folder in pages: broadcast, and then add the code: "pages/broadcast/broadcast" in square brackets of "pages": [] in app.json. The operation of this step is to set the page path. After setting up, it should automatically generate .wxml, wxss, js, json files named broadcast in broadcast.
Then point the pointing page in app.json to broadcast, as shown in the figure:
So we can see the debugging screen at any time.
Next, we start to write content, first go to broadcast.wxml to define the main view window, and then place the first picture in the form of a view window.
Then put the blank line in the text:
Selected radio station
Finally, we store the station in the form of rows (which looks like columns for the time being, which can be changed into columns when we operate in wxss):
>
Mandarin music station
Popular mandarin singles.
The following is the same, such as:
Finally, add another line. Effect: it's a little ugly, but it doesn't matter, we still have css (wxss)!
Enter broadcast.wxss.
I set up broadcast's wxss in advance.
Width 750rpx is the width of the entire screen. Rpx is a unit set by Wechat, which can change dynamically according to the screen size. 750 is the width of the entire screen. The layout is flex. Direction.
Then set the size and width of the flag
. slogan-image {
Width:750rpx
Height:750rpx
}
And then the list.
Let it be stored as a line.
.list {
Width:750rpx
Display: flex
Flex-direction: row
Flex-wrap: wrap
}
Wrap is a newline, with the first line at the top.
Text and pictures are juxtaposed, so they should be stored as columns.
.item {
Width:375rpx
Height:500rpx
Display: flex
Flex-direction: column
}
Set the container of the picture to half the size of the screen, so that you can put two pictures in a row.
.container {
Width:375rpx
Height:375rpx
}
Enlarge the four words of the selected radio station.
.white-space-text {
Font-size: 18px
}
Change the blank line again, change the height to 80, and leave blank on the left and bottom.
. white-space {
Height:80rpx
Display: flex
Flex-direction:row
Align-items: flex-end
Padding-left: 20rpx
Padding-bottom: 20rpx
}
Looks like a little announcement?
However, I forgot to format the picture in class,wxss. If you think the font is too large, you can still change the font size and make it smaller.
In this way, the picture can be displayed completely. Because of the time constraint, it will not be shown here one by one.
After reading the above, have you mastered how to use WeChat Mini Programs to imitate apple music? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
