Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.