微信小程序
- 属于前端
- 前端开发工程师必须要实现
- 相似竞品（快应用 华为）
具体开发能实现的功能
- 首页的轮播图
- 搜索界面
- 能搜索的几首歌曲
- 点击可播放，封面可以转动
- 能自主的切换上下歌曲
WXML
view=div- 打上{}的数据都是从外部1调取的数据
- 'app.js'最主要的开发界面
"color":"#ff0000""SelectColor":"#ffff00",
在开发者页面，手机型号可以调整但是一般使用iphone6/7/8适配，宽度100%
- 样式的单位是rpx即相对的像素
轮播图
功能描述
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
目标：开发一个类似网易云音乐小程序界面
轮播图（Banner）
- 使用
swiper组件创建具有滑动图片的轮播图。 - 属性如下：
id：指定轮播图的ID。indicator-dots：在轮播图底部显示指示点，表示当前图片位置。autoplay：启用自动播放图片。interval：设置图片切换的间隔时间（单位为毫秒）。circular：启用无限循环滚动图片。indicator-color：设置指示点的颜色。indicator-active-color：设置当前指示点的颜色。
热门歌手列表
- 此部分显示热门歌手列表。
- 使用
singerList数组通过wx:for指令遍历歌手项。 - 每个歌手项以
singeritem视图显示，其中包含一张图片和歌手的名称。
最新专辑列表
- 此部分显示最新专辑列表。
- 类似于热门歌手列表，使用
album数组通过wx:for指令遍历专辑项。 - 每个专辑项以
singeritem视图显示，其中包含一张图片和专辑的名称。
推荐歌单列表
- 此部分显示推荐歌单列表。
- 使用
playlist数组通过wx:for指令遍历歌单项。 - 每个歌单项以
singeritem视图显示，其中包含一张图片和歌单的名称。
样式定义
- CSS 样式定义了歌曲列表页面中各元素的外观。
- 重要的 CSS 类包括：
.list_wrap：样式化歌曲列表容器。.list_l、.list_c、.list_r：样式化歌曲列表的左侧、中间和右侧列。.singerList：样式化歌手列表、专辑列表和歌单列表的容器。.singeritem：样式化歌手列表、专辑列表和歌单列表中的每个项目。
清除浮动
clearfix::after是一个清除浮动技巧，用于确保父容器根据其内容自适应大小，特别是当内容溢出时。- 它清除子元素应用的浮动，并确保正确渲染父容器。
属性说明
Skyline 仅列出与 WebView 属性的差异，未列出的属性与 WebView 一致。
主要界面——音乐播放界面
页面结构
WXML:
<view class='item'>
<image class='audio_post{{music_on?" music_on":""}}' style="animation-play-state:{{music_playing?'running':'paused'}}" src='/image/xiangyunduan.png.crdownload'></image>
<view class='audio_progress'>
<slider block-size='14' bindchange='audioChange' bindchanging='audioChanging' value='{{sliderValue}}'></slider>
<view>{{musicTime}}</view>
</view>
<view class='audio_control'>
<button type='primary' bindtap='playMusic'>播放</button>
<button type='primary' bindtap='pauseMusic'>暂停</button>
<button type='primary' bindtap='stopMusic'>停止</button>
</view>
</view>
WXSS
调整格式
.item {
width: 100%;
padding-bottom: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.audio_progress {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.audio_progress slider {
width: 80%;
}
.audio_progress view {
padding: 18rpx;
}
.audio_post {
width: 600rpx;
height: 600rpx;
margin: 50rpx auto;
border-radius: 50%;
}
.music_on {
animation: audio-rotate 8s linear infinite;
}
.audio_control {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.audio_control button {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: transparent;
border: none;
padding: 0;
}
@keyframes audio-rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
我的界面如何搭建：
在这段代码中，我们首先创建了一个名为userbox的视图容器，用于包裹用户头像和用户名。userpic表示用户头像的容器，其中使用了open-data组件的type属性来获取用户的头像URL，显示用户的头像。name表示用户名的容器，同样使用了open-data组件的type属性来获取用户昵称，显示用户的昵称。
<view class="userbox">
<view class="userpic">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="name">
<open-data type="userNickName"></open-data>
</view>
</view>
page {
background: #ebebeb;
}
.userbox {
padding: 200rpx 0rpx;
background-color: #ebebeb;
}
.userbox .userpic {
width: 180rpx;
height: 180rpx;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.userbox .name {
text-align: center;
font-size: 38rpx;
height: 100rpx;
line-break: 100rpx;
display: block;
padding-top: 10%;
}
.game {
height: 130rpx;
background: white;
border-top: 1px solid #cccccc;
padding: 0 2.5%;
line-height: 120rpx;
font-weight: bold;
}
.game text {
display: block;
float: left;
width: 200rpx;
line-height: 120rpx;
}
.game image {
width: 60rpx;
height: 60rpx;
float: right;
display: block;
position: absolute;
right: 2.5%;
top: 71%;
}