这里写目录标题

一、自定义组件
- 1. 制作自定义组件
- 2. 使用自定义组件
- 3. 组件动态数据
二、排行榜的制作
- 1. 静态搭建
- 2. 获取排行榜动态数据
三、内网穿透（真机体验）
四、tabBar（底部栏）的使用
五、个人中心页面

一、自定义组件

官方文档自定义组件

1. 制作自定义组件

上面这个部分将在项目中重复使用，所有将其作为一个组件。

首先将index页面文件夹里面的 wxml和wxss里面关于header的代码片段和样式复制到新建的conponent组件相应的文件里。

2. 使用自定义组件

在page里面需要注册（在index.json文件的usingComponents添加注册）

由于前面设置的滚动条太高了，所有需要设置一下这个容器的高度！

/* 推荐歌曲样式设置 */
.commmendContainer{padding: 20rpx;height: 400rpx;
}

完成组件的复用：

3. 组件动态数据

需要根据不同的需要改变组件的显示内容

参考官方文档！

Navheader.wxml

<!--  头部  -->
<view class="header"><text class="title">{{title}}</text><view><text>{{nav}}</text><text class="more">查看更多</text></view>
</view>

NavHeader.js

  properties: {title:{type:String,value:"title的默认值"},nav:{type:String,value:"nav的默认值"}},

index.wxml 里面的使用

 <!-- 头部  --><NavHeader title="推荐歌曲" nav="为你精心推荐"></NavHeader><!--        头部区域--><NavHeader title="排行榜" nav="热歌风向标"></NavHeader>

二、排行榜的制作

1. 静态搭建

 <!-- 排行榜区域--><view class="topList"><!--       头部区域--><NavHeader title="排行榜" nav="热歌风向标"></NavHeader><!--      内容区域  采用轮播图的形式 --><swiper class="topListSwiper" next-margin="50rpx" previous-margin="50rpx"><swiper-item><view class="swiperItem"><view class="title">云音乐热歌榜</view><view class="musicItem"><image src="/static/images/nvsheng.jpg"></image><text class="count">1</text><text class="musicName">光辉岁月</text></view><view class="musicItem"><image src="/static/images/nvsheng.jpg"></image><text class="count">2</text><text class="musicName">海阔天空</text></view><view class="musicItem"><image src="/static/images/nvsheng.jpg"></image><text class="count">3</text><text class="musicName">真的爱你</text></view></view></swiper-item><swiper-item><view class="swiperItem"><view class="title">云音乐热歌榜</view><view class="musicItem"><image src="/static/images/nvsheng.jpg"></image><text class="count">1</text><text class="musicName">光辉岁月</text></view><view class="musicItem"><image src="/static/images/nvsheng.jpg"></image><text class="count">2</text><text class="musicName">海阔天空</text></view><view class="musicItem"><image src="/static/images/nvsheng.jpg"></image><text class="count">3</text><text class="musicName">真的爱你</text></view></view></swiper-item></swiper></view>

/* 排行榜的 样式*/.topList{padding: 20rpx;
}.topListSwiper{height: 400rpx;
}.swiperItem{width: 96%;background: #FBFBFB;
}.swiperItem .title{font-size: 30rpx;line-height: 80rpx;
}.musicItem{/*  当一个元素设置为flex，其子元素会自动成为block元素  */display: flex;padding-bottom: 20rpx;
}.musicItem image{width: 100rpx;height: 100rpx;border-radius: 6rpx;
}.musicItem .count{width: 100rpx;height: 100rpx;text-align: center;line-height: 100rpx;
}.musicItem .musicName{height: 100rpx;line-height: 100rpx;/* 歌曲名过长 时隐藏 */max-width: 400rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

2. 获取排行榜动态数据

直接for循环

 <!-- 排行榜区域--><view class="topList"><!--       头部区域--><NavHeader title="排行榜" nav="热歌风向标"></NavHeader><!--      内容区域  采用轮播图的形式 --><swiper class="topListSwiper" next-margin="50rpx" previous-margin="50rpx"><swiper-item wx:for="{{topListData}}" wx:key="name" ><view class="swiperItem"><view class="title">{{item.name}}</view><view class="musicItem"  wx:for="{{item.tracks}}" wx:key="id" wx:for-item="musicItem"><image src="{{musicItem.al.picUrl}}"></image><text class="count">{{index+1}}</text><text class="musicName">{{musicItem.name}}</text></view></view></swiper-item></swiper></view>

 // 3. 获取排行榜的数据/* 需求分析1. 需要根据idx的值获取对应的数据2. idx的取值范围是 0-20 ，我们只需要 0-43. 所以需要发送5次请求来获取数据* */// 3.1 组装数据let index = 0;// 标识idxlet resultArr=[];while (index<5){let topListData = await request("/top/list",{idx:index++});// 数组的截取：splice(会修改原数组) slice(不会修改原数组)let topListItem={name:topListData.playlist.name,tracks:topListData.playlist.tracks.slice(0,3)};resultArr.push(topListItem);// 3.2 更新数据this.setData({topListData:resultArr});}

三、内网穿透（真机体验）

使用工具 https://u.tools/

由于服务器在自己的本机上，我们的手机localhost是访问不到的，所以我们需要借助工具 uTool.
下载：

下载插件：内网穿透

将生成的域名链接替换原来的 localhost

最后进行真机调试：

四、tabBar（底部栏）的使用

官方文档 tabBar的使用

使用：

在app.json里面添加tabBar，list最少需要两个

  "tabBar": {"color":"#333","selectedColor": "#d43c33","backgroundColor": "#FFF","list": [{"pagePath": "pages/index/index","text": "主页","iconPath": "/static/images/tabs/tab-home.png","selectedIconPath": "static/images/tabs/tab-home-current.png"},{"pagePath": "pages/video/video","text": "视频","iconPath": "/static/images/tabs/select.png","selectedIconPath": "static/images/tabs/selected.png"},{"pagePath": "pages/personal/personal","text": "个人中心","iconPath": "/static/images/tabs/tab-my.png","selectedIconPath": "static/images/tabs/tab-my-current.png"}]}

可设置为顶部位置：

五、个人中心页面

关键点介绍：

    <viewclass="cover-container"bindtouchstart="handleTouchStart"bindtouchmove="handleTouchMove"bindtouchend="handleTouchEnd"style="transform: {{coverTransform}}; transition:{{coverTransition}}">

// pages/personal/personal.js
let startY=0; // 手指开始的坐标
let moveY=0; // 手指移动的坐标
let moveDistance=0; // 手指移动的距离Page({data: {coverTransform:"translateY(0rpx)", // 移动距离数据coverTransition:"" // 缓动效果},// 1. 开始handleTouchStart(event){// 获取起始坐标startY=event.touches[0].clientY; // touches[0]取第一次点击，因为屏幕可能有多个位置被点击},// 2.移动handleTouchMove(event){// 获取手指移动的坐标moveY = event.touches[0].clientY;moveDistance=moveY-startY; // 手指往下移动为正，往下为负数// 更新移动的距离if(moveDistance <=0){return;}if(moveDistance >= 80){moveDistance = 80;}this.setData({coverTransform:`translateY(${moveDistance}rpx)`,coverTransition:""})},// 3.结束handleTouchEnd(event){this.setData({coverTransform:`translateY(0rpx)`,coverTransition:"transform 1s linear"})},
})

界面和样式下载 https://download.csdn.net/download/qq_45021180/14921902

界面的搭建代码如下：

<view class="personalContainer"><view class="user-section"><image class="bg" src="/static/images/personal/bgImg2.jpg"></image><view class="user-info-box"><view class="portrait-box"><image class="portrait" src='/static/images/personal/missing-face.png'></image></view><view class="info-box"><text class="username">游客</text></view></view><view class="vip-card-box"><image class="card-bg" src="/static/images/personal/vip-card-bg.png" mode=""></image><view class="b-btn">立即开通</view><view class="tit"><!-- 会员图标--><text class="iconfont icon-huiyuan-"></text>硅谷会员</view><text class="e-m">atguigu Union</text><text class="e-b">开通会员听歌, 撸代码</text></view></view><viewclass="cover-container"bindtouchstart="handleTouchStart"bindtouchmove="handleTouchMove"bindtouchend="handleTouchEnd"style="transform: {{coverTransform}}; transition:{{coverTransition}}"><image class="arc" src="/static/images/personal/arc.png"></image><!-- 个人中心导航 --><view class="nav-section"><view class="nav-item"  hover-class="common-hover"  hover-stay-time="50"><text class="iconfont icon-xiaoxi"></text><text>我的消息</text></view><view class="nav-item"   hover-class="common-hover" hover-stay-time="50"><text class="iconfont icon-myRecommender"></text><text>我的好友</text></view><view class="nav-item"  hover-class="common-hover"  hover-stay-time="50"><text class="iconfont icon-gerenzhuye"></text><text>个人主页</text></view><view class="nav-item" hover-class="common-hover"  hover-stay-time="50"><text class="iconfont icon-gexingzhuangban"></text><text>个性装扮</text></view></view><!-- 个人中心列表 --><view class="personalContent"><view class="recentPlayContainer"><text class="title">最近播放</text><!-- 最近播放记录 --></view><view class="cardList"><view class="card-item"><text class="title">我的音乐</text><text class="more"> > </text></view><view class="card-item"><text class="title">我的收藏</text><text class="more"> > </text></view><view class="card-item"><text class="title">我的电台</text><text class="more"> > </text></view></view></view></view></view>

样式：

/* pages/personal/personal.wxss */
.personalContainer {width: 100%;height: 100%;}.personalContainer .user-section {height: 520rpx;position: relative;padding: 100rpx 30rpx 0;
}
.user-section .bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.7;filter: blur(1px);
}.user-info-box{height: 180rpx;display:flex;align-items:center;position:relative;z-index: 1;}.user-info-box .portrait{width: 130rpx;height: 130rpx;border:5rpx solid #fff;border-radius: 50%;
}
.user-info-box .username{font-size: 24;color: #303133;margin-left: 20rpx;
}/* vip-box */
.vip-card-box {position: relative;display: flex;flex-direction: column;
// background: linear-gradient(left, red, black);background: rgba(0, 0, 0, .7);height: 240rpx;color: #f7d680;border-radius: 16rpx 16rpx 0 0;padding: 20rpx 24rpx;
}.vip-card-box .card-bg{position:absolute;top: 20rpx;right: 0;width: 380rpx;height: 260rpx;
}.vip-card-box .b-btn{position: absolute;right: 20rpx;top: 16rpx;width: 132rpx;height: 40rpx;text-align: center;line-height: 40rpx;font-size: 22rpx;color: #36343c;border-radius: 20px;background: #f9e6af;z-index: 1;
}.vip-card-box .b-btn{position: absolute;right: 20rpx;top: 16rpx;width: 132rpx;height: 40rpx;text-align: center;line-height: 40rpx;font-size: 22rpx;color: #36343c;border-radius: 20px;/*background: linear-gradient(left, #f9e6af, #ffd465);*/ /*渐变不生效*/background: #f9e6af;z-index: 1;
}.vip-card-box .tit {font-size: 22rpx;color: #f7d680;margin-bottom: 28rpx;
}
.vip-card-box .tit .iconfont{color: #f6e5a3;margin-right: 16rpx;
}.vip-card-box .e-m{font-size: 34rpx;margin-top: 10rpx;
}
.vip-card-box .e-b{font-size: 24rpx;color: #d8cba9;margin-top: 10rpx;
}.cover-container{margin-top: -150rpx;padding: 0 30rpx;position:relative;background: #f5f5f5;padding-bottom: 20rpx;
}.cover-container .arc{position:absolute;left: 0;top: -34rpx;width: 100%;height: 36rpx;
}/* 导航部分 */
.cover-container .nav-section {display: flex;background: #fff;padding: 20rpx 0;border-radius: 15rpx;
}.nav-section .nav-item {width: 25%;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;
}.nav-section .nav-item .iconfont {font-size: 50rpx;color: #d43c33;line-height: 70rpx;
}.nav-section .nav-item text:last-child {font-size: 22rpx;}/* 个人中心列表 */
.personalContent {background: #fff;margin-top: 20rpx;
}/* 最近播放 */
.personalContent .scrollView {display: flex;height: 160rpx;
}
.personalContent .recentPlay {display: flex;
}.recentPlayContainer .title {padding-left: 20rpx;font-size: 26rpx;color: #333;line-height: 80rpx;
}.personalContent .recentPlay image {width: 160rpx;height: 160rpx;margin-left: 20rpx;border-radius: 20rpx;
}.cardList {margin-top: 20rpx;}
.cardList .card-item{border-top: 1rpx solid #eee;height: 80rpx;line-height: 80rpx;padding: 10rpx;font-size: 26rpx;color: #333;
}
.cardList .card-item .more {float: right;
}

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）相关推荐

Vue3+node.js网易云音乐实战项目(三)
页面一.头部导航栏布局二.轮播图的实现三.请求网易的banner图四链接一.头部导航栏布局首先我们看最上面这里的布局,大致可分为三个模块,顶部左边,顶部中间,顶部右边那么我们在comp ...
微信小程序开发入门与实战（三种通信方法）
@作者 : SYFStrive @博客首页 : HomePage
Vue3+node.js网易云音乐实战项目(五)
推荐歌单详细页面顶部 1.推荐歌单详细页面 1.1.导航条和背景 1.2.头像和简介 1.3.头部完整代码 1.4.链接实现效果 1.推荐歌单详细页面 1.1.导航条和背景推荐歌单页面做好后,我们 ...
Vue3+node.js网易云音乐实战项目(八)
播放界面实现 1.准备工作 2.顶部布局 3.中部唱片部分布局 4.底部部分布局最后一个页面还没写完,由于我要去比赛,所以暂时先写到这,等放假了再写其他页面可以看我页面专栏 Vue3实战项目-网易 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
微信小程序电商项目实战-前言
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序蓝牙BLE开发实战——案例(二)
微信小程序蓝牙BLE开发实战(二) 上篇主要介绍在开发过程中应用到相关API操作.接下来介绍个人在项目开发中应用蓝牙BLE一些事情. 由于时间比较仓促, 有些注释没那么详细.请理解~写的不好欢迎各位大 ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
视频教程-【三月】微信小程序云开发项目实战课程 - T3租机械-微信开发
[三月]微信小程序云开发项目实战课程 - T3租机械宁夏酷申科技有限公司技术总监,计算机专业毕业后一直从事技术开发和架构工作袁永刚 ¥366.00 立即订阅扫码下载「CSDN程序员学院APP」, ...
微信小程序版QQ音乐
来源 <a href="http://www.see-source.com:80/weixinwidget/downloadZip.html?wid=161">实例源码 ...

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

这里写目录标题

一、自定义组件

1. 制作自定义组件

2. 使用自定义组件

3. 组件动态数据

二、排行榜的制作

1. 静态搭建

2. 获取排行榜动态数据

三、内网穿透（真机体验）

四、tabBar（底部栏）的使用

五、个人中心页面

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）相关推荐

最新文章

热门文章

微信小程序【网易云音乐实战】（第三篇 自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

这里写目录标题

一、自定义组件

1. 制作自定义组件

2. 使用自定义组件

3. 组件动态数据

二、排行榜的制作

1. 静态搭建

2. 获取排行榜动态数据

三、内网穿透（真机体验）

四、tabBar（底部栏） 的使用

五、个人中心页面

微信小程序【网易云音乐实战】（第三篇 自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）相关推荐

最新文章

热门文章

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）

四、tabBar（底部栏）的使用

微信小程序【网易云音乐实战】（第三篇自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）相关推荐