怎么利用微信小程序仿造apple music

怎么利用微信小程序仿造apple music，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

今天先讲apple music中的“广播”页面的制作过程，如图：

当然，我们不可能做地特别像，只能说是类似。

先把所需要的图片放入/imgs/broadcast/里。

首先在pages里面建立一个新文件夹：broadcast,然后在app.json中的"pages":[]方括号内加入代码："pages/broadcast/broadcast"，这一步的操作是为了设置页面路径，设置完后应该会自动在broadcast内生成以broadcast为名的.wxml、wxss、js、json文件。

然后把app.json里面广播的指向页面指向broadcast即可，如图：

这样我们就能随时看到调试画面了。

接下来我们开始写入内容，首先进入broadcast.wxml先定义主视图窗口，然后再以视图窗口形式置入第一个图片。

<view class="broadcast">

    <view class="slogan-img">

        <image src="../imgs/broadcast/slogan.png"></image>

    </view>

</view>

然后空行放入文字：

<view class="white-space">

        <text class="white-space-text">精选电台</text>

    </view>

最终我们将电台以行的形式（暂时看起来是列，一会会在wxss中进行操作就能变成列的形式了）存放：

    <view class="list">

        <view class="item">

            <view class="container">

                <image src="../imgs/broadcast/1.png"></image>>

            </view>

            <view >

                <text>国语音乐电台</text>

                <text>热门国语单曲。</text>

            </view>

        </view>

    </view>

下同，如：

最后再添加一行即可。效果：真是有点丑，不过没关系，我们还有css(wxss)!

进入broadcast.wxss.

broadcast的wxss是我提前设好了

宽度750rpx即整个屏幕的宽度。rpx是微信定的单位，它可以随屏幕大小动态变化。750是整个屏幕的宽度。布局是flex.方向列向。

然后设置标志的大小宽度

.slogan-image{

    width:750rpx;

    height:750rpx;

}

然后是列表的。

让它以行的形式存放。

.list{

    width:750rpx;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}

wrap是换行，第一行在上方。

文字和图片是并列的，所以应该以列的形式存放。

.item{

    width:375rpx;

    height:500rpx;

    display: flex;

    flex-direction: column;

}

将放图片的container设为屏幕的一半大小，这样的话一行就能放两个图。

.container{

    width:375rpx;

    height:375rpx;

}

把精选电台四个字放大一点。

.white-space-text{

    font-size: 18px;

}

再把那个空行改一下，高度改为80，左边和下方留白。

.white-space{

    height:80rpx;

    display: flex;

    flex-direction:row;

    align-items: flex-end;

    padding-left: 20rpx;

    padding-bottom: 20rpx;

}

好像小公告成了？

然而我忘了给图片设置class，wxss中依然也要设置图片的格式。 如果你嫌字体太大，依然可以修改一下字体大小，把它弄小就行啦。

这样就能完整地显示出图片了。由于时间关系，这里就不一一展示了。

看完上述内容，你们掌握怎么利用微信小程序仿造apple music的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！