一、项目效果展示
-
音乐推荐页面展示
-
播放器展示
-
播放列表展示
二、项目结构
- 音乐小程序项目页面结构:
1.tab导航栏
2.content内容区
3.player音乐播放器控件
-
开发者工具创建空白项目:
-
新建项目 —— 设置项目名称和路径 —— 选择你注册的AppID —— 不使用云服务 —— 选择JavaScript基础模板 —— 点击确定创建项目
-
修改
app.json
{
"pages":[
"pages/index1/index1",
"pages/index1/info",
"pages/index1/play",
"pages/index1/playlist",
"pages/index/index",
"pages/header/header",
"pages/footer/footer",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "音乐",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
- 在
index1
中编写顶部tab导航栏、中部content内容区页面和底部player音乐播放栏 - 在
info
中编写音乐推荐页面 - 在
play
中编写播放器页面 - 在
playlist
中编写播放列表页面
三、项目实现
(一)index1
index1.wxml
代码:
<view class="tab">
<view class="tab-item {
{item==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
<view class="tab-item {
{item==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
<view class="tab-item {
{item==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content" style="color: #ffffff;">
<swiper current="{
{item}}" bindchange="changeTab">
<swiper-item>
<include src="./info"></include>
</swiper-item>
<swiper-item>
<include src="./play"></include>
</swiper-item>
<swiper-item>
<include src="./playlist"></include>
</swiper-item>
</swiper>
</view>
<view class="player">
<image src="{
{play.coverImage}}"></image>
<view class="player-info">
<view>{
{play.title}}</view>
<view class="player-info-auth">{
{play.singer}}</view>
</view>
<view class="player-controls">
<image src="../images/01.png"></image>
<image wx:if="{
{ state=='paused' }}" src="../images/02.png" bindtap="play"></image>
<image wx:if="{
{ state=='running' }}" src="../images/02stop.png" bindtap="pause"></image>
<image src="../images/03.png" bindtap="next"></image>
</view>
</view>
swiper
组件编写滑动页面结构:
<swiper>
<swiper-item style="background:#ccc">0</swiper-item>
<swiper-item style="background:#ddd">1</swiper-item>
<swiper-item style="background:#eee">2</swiper-item>
</swiper>
三、编写页面结构和样式
- 在
pages/index/index.wxml
编写页面和tab
导航栏
<!-- 标签页标题 -->
<view class="tab">
<view class="tab-item {
{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
<view class="tab-item {
{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
<view class="tab-item {
{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>
- 在
pages/index/index.wxss
编写页面样式和tab
导航栏样式
page {
display: flex;