怎么利用微信小程序仿造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的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!