怎么利用微信小程序仿造applemusic
怎么利用微信小程序仿造apple music，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联专业为企业提供罗庄网站建设、罗庄做网站、罗庄网站设计、罗庄网站制作等企业网站建设、网页设计与制作、罗庄企业网站模板建站服务，10余年罗庄做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
今天先讲apple music中的“广播”页面的制作过程，如图：
当然，我们不可能做地特别像，只能说是类似。
先把所需要的图片放入/imgs/broadcast/里。
首先在pages里面建立一个新文件夹：broadcast,然后在app.json中的"pages":[]方括号内加入代码："pages/broadcast/broadcast"，这一步的操作是为了设置页面路径，设置完后应该会自动在broadcast内生成以broadcast为名的.wxml、wxss、js、json文件。
然后把app.json里面广播的指向页面指向broadcast即可，如图：
这样我们就能随时看到调试画面了。
接下来我们开始写入内容，首先进入broadcast.wxml先定义主视图窗口，然后再以视图窗口形式置入第一个图片。
然后空行放入文字：
精选电台
最终我们将电台以行的形式（暂时看起来是列，一会会在wxss中进行操作就能变成列的形式了）存放：
>
国语音乐电台
热门国语单曲。
下同，如：
最后再添加一行即可。效果：真是有点丑，不过没关系，我们还有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的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
当前标题：怎么利用微信小程序仿造applemusic
本文URL：http://azwzsj.com/article/jgphhp.html
