快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

怎么利用微信小程序仿造applemusic

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

创新互联专业为企业提供罗庄网站建设、罗庄做网站、罗庄网站设计、罗庄网站制作等企业网站建设、网页设计与制作、罗庄企业网站模板建站服务,10余年罗庄做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

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

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

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

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

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

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

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

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

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

   

       

   

然后空行放入文字:

        精选电台

   

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

   

       

           

                >

           

           

                国语音乐电台

                热门国语单曲。

           

       

   

下同,如:

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

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

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

进入broadcast.wxss.

broadcast的wxss是我提前设好了

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


宽度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;

}

好像小公告成了?

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

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

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

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


网页标题:怎么利用微信小程序仿造applemusic
文章URL:http://6mz.cn/article/jgphhp.html

其他资讯