微信音乐小程序实战(一)：完成静态推荐歌曲页面的搭建
2021/6/11 20:21:21
本文主要是介绍微信音乐小程序实战(一)：完成静态推荐歌曲页面的搭建，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
这次我们要完成的是推荐歌曲页面的搭建，页面效果如下：
完成此页面需要两个步骤：1. 搭建静态页面 2. 加入真实数据
搭建静态页面
1. 新建新项目
首先，让我们新建一个小程序项目（还不知道怎么新建的小伙伴就自行百度了唷），新建完的空白项目如下：
2. 新建文件夹
创建完后，我们开始新建一个文件夹recommendSong（由于只记录两个页面的学习，所以我就暂时不动index文件夹,而是选择新建一个文件夹；这也便于以后如果还有小程序的首页补充，可以再用这个index文件夹）
① 先新建文件夹 recommendSong
② 再在recommendSong文件夹上右键新建Page
最终效果如下：
3. 完成静态页面的搭建
为了方便，我们让小程序最先展示recommendSong的页面，修改app.json,将recommendSong提到pages的最前面 【哦，前面我顺手删除了pages里的log文件夹，所以下面图示中的pages里就不包含log啦】
这时候小程序显示效果为：
现在我们要操作的就是recommendSong.wxml和recommendSong.wxss,完成最基本的静态页面
在此之前，我们先引入相关的图片和公共的css样式，首先在根目录新建一个文件夹static,
并在static里新建两个文件夹，分别为 iconfont 和 images
☞iconfont放置我们的和图标有关的css文件，image来存放我们的图片
A. 引入相关css文件
在iconfont中再新建两个文件，分别为 iconfont.wxss 和 myicon.wxss
iconfont.wxss的代码如下：
@font-face {
font-family:"iconfont";
src: url('//at.alicdn.com/t/font_1686339_sgjgtmoa3kj.eot?t=1601969873487');
/* IE9 */
src: url('//at.alicdn.com/t/font_1686339_sgjgtmoa3kj.eot?t=1601969873487#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('//at.alicdn.com/t/font_1686339_sgjgtmoa3kj.woff?t=1601969873487') format('woff'), url('//at.alicdn.com/t/font_1686339_sgjgtmoa3kj.ttf?t=1601969873487') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1686339_sgjgtmoa3kj.svg?t=1601969873487#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-meinv:before {
content:"\e619";
}
.icon-jiangbei:before {
content:"\e617";
}
.icon-column-4:before {
content:"\e664";
}
.icon-shanchu:before {
content:"\e61a";
}
.icon-liuyan:before {
content:"\e650";
}
.icon-shanchu1:before {
content:"\e719";
}
.icon-shanchu2:before {
content:"\e771";
}
.icon-xiaoxi--copy:before {
content:"\e614";
}
.icon-search:before {
content:"\e615";
}
.icon-search1:before {
content:"\e616";
}
.icon-huiyuan:before {
content:"\e682";
}
.icon-huiyuan-:before {
content:"\e613";
}
.icon-diantai:before {
content:"\e6f4";
}
.icon-icon-ranking:before {
content:"\e605";
}
.icon-meirituijian-:before {
content:"\e64b";
}
/*.icon-paihangbang:before {*/
/* content:"\e606";*/
/*}*/
.icon-meirituijian:before {
content:"\e607";
}
.icon-zhiboguankanliangbofangsheyingshexiangjixianxing:before {
content:"\e609";
}
.icon-zhibobofangshexiangjitianxianxianxing:before {
content:"\e69b";
}
.icon-gedan:before {
content:"\e60c";
}
.icon-gedan1:before {
content:"\e610";
}
.icon-pause:before {
content:"\e603";
}
.icon-zanting:before {
content:"\e774";
}
.icon-bofang:before {
content:"\e68b";
}
.icon-bofang1:before {
content:"\e601";
}
.icon-shangyishou:before {
content:"\e608";
}
.icon-zanting1:before {
content:"\e60b";
}
.icon-next:before {
content:"\e604";
}
.icon-iconsMusicyemianbofangmoshiPlayList:before {
content:"\e677";
}
.icon-iconsMusicyemianbofangmoshiAlrepeatOne:before {
content:"\e676";
}
.icon-iconsMusicyemianbofangmoshiRepeat:before {
content:"\e678";
}
.icon-iconsMusicyemianbofangmoshiShuffle:before {
content:"\e679";
}
.icon-myRecommender:before {
content:"\e602";
}
.icon-wodehaoyou:before {
content:"\e70b";
}
.icon-xiaoxi:before {
content:"\e60d";
}
.icon-xiaoxi1:before {
content:"\e60f";
}
.icon-gerenzhuye:before {
content:"\e7ef";
}
.icon-gexingzhuangban:before {
content:"\e653";
}
.icon-gengduo:before {
content:"\e704";
}
.icon-gengduo1:before {
content:"\e611";
}
.icon-buoumaotubiao15:before {
content:"\e60e";
}
.icon-pinglun:before {
content:"\e61b";
}
.icon-like:before {
content:"\e692";
}
.icon-dianzan:before {
content:"\e644";
}
.icon-iconzhengli_dianzan:before {
content:"\e643";
}
.icon-pinglun1:before {
content:"\e612";
}
.icon-pinglun2:before {
content:"\e60a";
}
.icon-pinglun11:before {
content:"\e600";
}
.icon-order:before {
content: "\e623";
}
.icon-repeat:before {
content: "\e607";
}
.icon-shuffle:before {
content:"\e679";
}
myicon.wxss的代码如下：
@font-face {
font-family: "iconfont"; /* Project id 2543123 */
src: url('//at.alicdn.com/t/font_2543123_uk616l4ydjs.woff2?t=1623249546092') format('woff2'),
url('//at.alicdn.com/t/font_2543123_uk616l4ydjs.woff?t=1623249546092') format('woff'),
url('//at.alicdn.com/t/font_2543123_uk616l4ydjs.ttf?t=1623249546092') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-yinpin:before {
content: "\e61b";
}
.icon-delete:before {
content: "\e602";
}
.icon-huishou:before {
content: "\e628";
}
.icon-shoucang-copy:before {
content: "\e60b";
}
.icon-liebiaoxunhuan:before {
content: "\e623";
}
.icon-danquxunhuan:before {
content: "\e607";
}
.icon-_mars_bfang:before {
content: "\e62c";
}
.icon-liebiao:before {
content: "\e610";
}
.icon-bofang2:before {
content: "\e601";
}
.icon-bofang1:before {
content: "\e648";
}
.icon-shipin:before {
content: "\e62e";
}
.icon-quanxuan:before {
content: "\e600";
}
.icon-bofang_huaban1:before {
content: "\e65c";
}
.icon-sousuo:before {
content: "\e62f";
}
.icon-paihangbang:before {
content: "\e782";
}
.icon-bofang:before {
content: "\e7be";
}
以上这两个代码呢，都是阿里巴巴图库自动生成的，在之后你们也可以引入你们喜欢的图标，具体步骤可以百度，如果还是不明白，欢迎来找我呀(*^▽^*)
B. 引入相关静态图片
在images文件夹中新建recommendSong文件夹，来存放和推荐歌曲页面相关的图片，图片如下，将其保存到recommendSong文件夹下，命名为arc(这张图片有点白，你可能看不清楚，但是它确实在！)
C. 最终文件结构展示
引入完相关样式后，我们就可以真正开始写静态页面啦
代码如下：（静态页面均不做说明，相信想研究的小伙伴完全可以靠自己研究，都是基本的样式，不会困难的）
recommendSong.wxml
<view class="recommendSongContainer">
<!-- 头部 -->
<view class="header">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625999721&t=ffda5c3f0753768ac029910b6e135fa2"></image>
<view class="date">
<text class="day">11</text>
<text class="divider">/</text>
<text class="month">06</text>
</view>
<image class="arc" src="/static/images/recommendSong/arc.png"></image>
</view>
<!-- 列表区域 -->
<view class="ListContainer">
<view class="listHeader">
<text class="iconfont icon-_mars_bfang bofang_all"></text>
<text class="bofang_font">播放全部</text>
<text class="changeMore iconfont icon-quanxuan"></text>
</view>
<!-- 内容区 -->
<scroll-view scroll-y class="listScroll">
<view class="scrollItem">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625999721&t=ffda5c3f0753768ac029910b6e135fa2"></image>
<view class="music">
<view class="musicName">
<text class="name">明天，你好</text>
<text class="alias" wx:if="{{item.alias.length!==0}}">(《明天》的主题曲)</text>
</view>
<view class="musicInfo">
<!-- <text class="tags">独家</text>-->
<text class="composer">牛奶咖啡</text>
<text class="connect">-</text>
<text class="album">牛奶咖啡</text>
</view>
</view>
<view class="opration">
<text class="iconfont icon-shipin movie"></text>
<text class="iconfont icon-gengduo more"></text>
</view>
</view>
<view class="scrollItem">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625999721&t=ffda5c3f0753768ac029910b6e135fa2"></image>
<view class="music">
<view class="musicName">
<text class="name">明天，你好</text>
<text class="alias" wx:if="{{item.alias.length!==0}}">(《明天》的主题曲)</text>
</view>
<view class="musicInfo">
<!-- <text class="tags">独家</text>-->
<text class="composer">牛奶咖啡</text>
<text class="connect">-</text>
<text class="album">牛奶咖啡</text>
</view>
</view>
<view class="opration">
<text class="iconfont icon-shipin movie"></text>
<text class="iconfont icon-gengduo more"></text>
</view>
</view>
<view class="scrollItem">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625999721&t=ffda5c3f0753768ac029910b6e135fa2"></image>
<view class="music">
<view class="musicName">
<text class="name">明天，你好</text>
<text class="alias" wx:if="{{item.alias.length!==0}}">(《明天》的主题曲)</text>
</view>
<view class="musicInfo">
<!-- <text class="tags">独家</text>-->
<text class="composer">牛奶咖啡</text>
<text class="connect">-</text>
<text class="album">牛奶咖啡</text>
</view>
</view>
<view class="opration">
<text class="iconfont icon-shipin movie"></text>
<text class="iconfont icon-gengduo more"></text>
</view>
</view>
<view class="scrollItem">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201203%2F30%2F105749xaf898vvl39813ls.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625999721&t=ffda5c3f0753768ac029910b6e135fa2"></image>
<view class="music">
<view class="musicName">
<text class="name">明天，你好</text>
<text class="alias" wx:if="{{item.alias.length!==0}}">(《明天》的主题曲)</text>
</view>
<view class="musicInfo">
<!-- <text class="tags">独家</text>-->
<text class="composer">牛奶咖啡</text>
<text class="connect">-</text>
<text class="album">牛奶咖啡</text>
</view>
</view>
<view class="opration">
<text class="iconfont icon-shipin movie"></text>
<text class="iconfont icon-gengduo more"></text>
</view>
</view>
</scroll-view>
</view>
</view>
recommendSong.wxss
/* 头部区域 */
.recommendSongContainer .header {
width: 100%;
height: 400rpx;
position: relative;
}
.recommendSongContainer .header image {
width: 100%;
height: 100%;
}
.recommendSongContainer .header .date{
position: absolute;
left: 0;
bottom: 0;
padding: 20rpx;
color: white;
}
.recommendSongContainer .header .date .day{
font-size: 30px;
font-weight: 600;
}
.recommendSongContainer .header .date .divider{
font-weight: lighter;
padding: 0 4rpx;
}
.recommendSongContainer .header .date .month{
font-size: 14px;
/*font-weight: bolder;*/
}
.recommendSongContainer .header .arc {
position: absolute;
bottom: 0;
left: 0;
/*height: 100%;*/
width: 100%;
height: 20rpx;
}
/* 列表区域 */
.listHeader {
display: flex;
/*height: 80rpx;*/
/*line-height: 80rpx;*/
/*background-color: pink;*/
margin-bottom: 10rpx;
padding: 20rpx;
}
.listHeader .bofang_all {
color: rgb(254,47,34);
font-size: 44rpx;
margin-right: 30rpx;
}
.listHeader .bofang_font {
/*font-size: 28rpx;*/
font-weight: 600;
}
.ListContainer .fixed {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
background-color: #fff;
}
.ListContainer .fixed .changeMore {
padding-right: 40rpx;
}
.listHeader .changeMore {
margin-left:auto;
/*float: right;*/
font-size: 44rpx;
}
/* 内容区 */
.listScroll {
padding: 0 20rpx;
}
.scrollItem {
position: relative;
display: flex;
margin-bottom: 30rpx;
}
.scrollItem image {
width: 80rpx;
height: 80rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}
.music .musicName {
font-size: 28rpx;
max-width: 500rpx;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music .musicName .name {
color: black;
}
.music .musicInfo {
font-size: 24rpx;
color: #666;
max-width: 500rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*.music .musicInfo .tags {*/
/* font-size: 20rpx;*/
/* font-weight: bold;*/
/* color: #d43c33;*/
/* padding: 0 4rpx;*/
/* border: 1px solid rgba(206,58,36,0.35);*/
/* border-radius: 10rpx;*/
/*}*/
/*.music .musicInfo .composer {*/
/* margin-left: 6rpx;*/
/*}*/
.scrollItem .opration {
position: absolute;
color: #888;
right: 0;
/*width: 80rpx;*/
/*height: 80rpx;*/
line-height: 80rpx;
text-align: right;
padding-right: 45rpx;
}
.scrollItem .opration .movie {
/*font-size: 18rpx;*/
float: left;
margin-right: 20rpx;
}
/*.scrollItem .opration .more {*/
/* !*text-align: center;*!*/
/* width: 80rpx;*/
/* height: 80rpx;*/
/*}*/
现在页面的样子变成如图所示：
看着还是挺好看是不是，嘿嘿，不过仔细一看，会发现我们的图标都没有出来，这是为什么呢？我们明明已经在static文件夹里引入了相关的图标css文件啦
这是因为我们还没有引入这些css文件呢，现在就让我们在全局引入吧
修改根目录下的app.wxss：
@import "/static/iconfont/iconfont.wxss";
@import "/static/iconfont/myicon.wxss";
.container {
height: 100%;
}
保存一下，然后再看页面，发现图标都出现啦，我们的页面更美观了！！
到目前为止，我们已经完成了推荐歌曲页面的静态搭建，下一篇我们开始为它加入真实的数据吧
这篇关于微信音乐小程序实战(一)：完成静态推荐歌曲页面的搭建的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-22微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接？-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能？-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程：从零开始的全攻略
- 2024-11-19微信小程序全栈学习：从零开始的完整指南
