微信小程序实战-第3章 音乐小程序项目

微信小程序实战-第3章 音乐小程序项目

3.1 开发前准备

3.1.1项目展示

音乐小程序项目效果展示：

3.1.2项目分析

3.1.3项目初始化

开发者工具创建空白项目：

index

{
   
   
  "pages": [
    "pages/index/index"
  ]
}

{
   
   
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "音乐",
  "navigationBarTextStyle": "black"
}

3.2 【任务1】标签页切换

3.2.1任务分析

3.2.2前导知识

swiper组件编写滑动页面结构：

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>

swiper组件编写滑动页面结构：

item-id属性

<swiper current-item-id="c">
  <swiper-item item-id="a" style="background:#ccc">0</swiper-item>
  <swiper-item item-id="b" style="background:#ddd">1</swiper-item>
  <swiper-item item-id="c" style="background:#eee">2</swiper-item>
</swiper>

include

<include src="header.wxml" />
<view> body </view>
<include src="footer.wxml" />

3.2.3编写页面结构和样式

音乐小程序基础页面和样式：
pages/index/index.wxml

 <!-- 标签页标题 -->
<view class="tab">
  <view class="tab-item">音乐推荐</view>
   …
 </view>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>

音乐小程序基础页面和样式：
pages/index/index.wxss

page {
   
   
     display: flex;
     flex-direction: column;
     background: #17181a;
     color: #ccc;
     height: 100%;
    }
...

测试页面info.wxml、page.wxml、play.wxml文件：

<view style="background:#ddd; color:#000; height:100%"> play</view