学会开发环境准备
下载安装 HBuilder X
然后新建项目和安装插件
hbuilderx 连接码云管理代码库
1、在码云上创建或fork项目;
2、clone项目到C:\Users\Administrator\Documents\HBuilderProjects文件夹:在资源管理器中右键git bash here git clone url
3、在hbuilderx中创建项目到url对应得文件夹
4、在hbuilderx中选中创建得项目,点击工具->easy-git->设置用户名和email
5、右键-源代码管理
6、点击更改后的+号,将代码add到index
7、填写提交说明,commit
8、点击push将代码推送到码云
项目结构
3. 项目结构
- pages文件夹存放页面
- static内的文件不会进行编译,不要放js文件,可放到common中(注意体积限制)
- unpackage文件夹存放打包的文件
- components文件夹存放各种组件
- App.vue代表应用,包括应用层的生命周期方法,全局样式等
- pages.json整个应用的页面集合,第一项为启动页,可配置页面路由及样式和标题
- manifest.json应用配置,包括图标配置、启动界面配置、权限配置及其他开发配置
- main.js应用入口文件
网易云音乐封装调用
数据接口:网易云音乐提供了非常丰富的API接口,可以让开发者获取音乐资源、歌词、评论等数据,这对于实现一个完整的音乐播放器非常有帮助。
config.js
export const baseUrl = 'https://flask-web-frak-shishn-kvmjsphrif.cn-shenzhen.fcapp.run';
api.js
import { baseUrl } from './config.js';
export function topList(){
return new Promise(function(resolve,reject){
uni.request({
url: `${baseUrl}/toplist/detail`,
method: 'GET',
data: {},
success: res => {
let result = res.data.list;
resolve(result.splice(0,4));
},
fail: (err) => {
console.log(err);
},
complete: () => {}
});
});
}
export function list(listId){
return uni.request({
url: `${baseUrl}/playlist/detail?id=${listId}`,
method: 'GET'
});
}
export function songDetail(id){
return uni.request({
url : `${baseUrl}/song/detail?ids=${id}`,
method : 'GET'
})
}
export function songUrl(id){
return uni.request({
url : `${baseUrl}/song/url?id=${id}`,
method : 'GET'
})
}
export function songLyric(id){
return uni.request({
url : `${baseUrl}/lyric?id=${id}`,
method : 'GET'
})
}
export function songSimi(id){
return uni.request({
url : `${baseUrl}/simi/song?id=${id}`,
method : 'GET'
})
}
export function songComment(id){
return uni.request({
url : `${baseUrl}/comment/music?id=${id}`,
method : 'GET'
})
}
export function searchHot(){
return uni.request({
url : `${baseUrl}/search/hot/detail`,
method : 'GET'
})
}
export function searchWord(word){
return uni.request({
url : `${baseUrl}/search?keywords=${word}`,
method : 'GET'
})
}
export function searchSuggest(word){
return uni.request({
url : `${baseUrl}/search/suggest?keywords=${word}&type=mobile`,
method : 'GET'
})
}
项目成果
首页
<template>
<view class="content">
<uam-head :title="title"></uam-head>
<scroll-view scroll-y="true">
<view @tap="toSearch()">
<uni-search-bar placeholder="搜索" bgColor="#EEEEEE" @confirm="search" />
</view>
<view>
<m-for-skeleton :avatarSize="200" :row="3" :title="false" :loading="loading"
:isarc="key%2==0?'circular':'square'" :titleStyle="{}" v-for="(item,key) in 4" :key="key">
</m-for-skeleton>
</view>
</scroll-view>
<view class="index-list">
<view class="index-list-item" v-for="(item,index) in playList" :key="index" @click="handleTolist(item.id)">
<view class="index-list-img">
<image :src="item.coverImgUrl" mode=""></image>
<text>{{item.updateFrequency}}</text>
</view>
<view class="index-list-text">
<text v-for="(it,index) in item.tracks" :key="index">{{ index + 1}}.{{ it.first }}-{{ it.second}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { topList } from "../../common/api.js"
// const toplistdata = require('@/static/toplist.json')
// 导入组件
import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
import uamHead from "../../components/uam-head/uam-head.vue";
export default {
components: {
mForSkeleton
},
data() {
return {
// playList: toplistdata,
playList: [],
title: 'UAMusic',
loading: true
}
},
onLoad() {
// console.log(this.playList);
topList().then((res) => {
if(res.length) {
setTimeout(() => {
this.playList = res;
this.loading = false
},2000);
console.log(res);
}
});
},
methods: {
handleTolist(id) {
console.log("id" + id)
uni.navigateTo({
url: '/pages/list/list?id=' + id
})
console.log(id);
},
toSearch(){
uni.navigateTo({
url: '/pages/search/search',
})
},
hide() {
this.loading = false;
}
}
}
</script>
榜单列表
api
export function list(listId){
return uni.request({
url: `${baseUrl}/playlist/detail?id=${listId}`,
method: 'GET'
});
}
播放页
为歌曲添加点击事件: @tap=“navPlayer(item.id)”
在methods中添加响应方法:navPlayer(id){。。。}
使用uni.navigateTo导航到播放器页面
在播放器页面中使用onLoad钩子函数通过options获取歌曲id
methods: {
playing() {
innerAudioContext.autoplay = true;
innerAudioContext.src = this.song.songUrl;
innerAudioContext.onPlay(() => {
this.isplayrotate = true;
this.listenLyricIndex();
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
this.innerAudioContext = innerAudioContext;
},
paused() {
// const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.pause()
this.isplayrotate = false;
console.log("停止播放");
innerAudioContext.onPause(() => {
innerAudioContext.startTime = innerAudioContext.currentTime
});
},
formatTimeToSec(time) {
var arr = time.split(':');
return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
},
listenLyricIndex() {
clearInterval(this.timer);
this.timer = setInterval(() => {
for (var i = 0; i < this.song.lyric.length; i++) {
if (this.song.lyric[this.song.lyric.length - 1].time < this.innerAudioContext
.currentTime) {
this.lyricIndex = this.song.lyric.length - 1;
break;
}
if (this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i + 1]
.time > this.innerAudioContext.currentTime) {
this.lyricIndex = i;
}
}
});
}
api:
/song/detail获取歌曲详情,包括歌名、艺人、图片等
/song/url 获取歌曲音频的url
/song/Lyric 获取歌词内容
export function songDetail(id){
return uni.request({
url : `${baseUrl}/song/detail?ids=${id}`,
method : 'GET'
})
}
export function songUrl(id){
return uni.request({
url : `${baseUrl}/song/url?id=${id}`,
method : 'GET'
})
}
export function songLyric(id){
return uni.request({
url : `${baseUrl}/lyric?id=${id}`,
method : 'GET'
})
}
搜索
api
export function searchHot(){
return uni.request({
url : `${baseUrl}/search/hot/detail`,
method : 'GET'
})
}
export function searchWord(word){
return uni.request({
url : `${baseUrl}/search?keywords=${word}`,
method : 'GET'
})
}
export function searchSuggest(word){
return uni.request({
url : `${baseUrl}/search/suggest?keywords=${word}&type=mobile`,
method : 'GET'
})
}
完成搜索页
*默认显示热搜内容
*每输入1个字后显示相应关键字搜索建议
*确认输入后显示相应搜索结果
*用数据缓存搜索历史
*从搜索结果中选中歌曲将跳转到播放器进行播放
项目学习总结
uni-app项目的创建 使用git和gitee进行代码的版本控制 pages.json页面路由的配置
使用阿里云智能logo设计网站设计应用logo
安装与使用微信小程序开发工具
在uni-app中使用静态资源 iconfont的下载与使用
认识uniapp应用生命周期和页面生命周期
uni-app基础组件的使用view、scrollview、text、list、rich-text等
安装、使用第三方组件-循环骨架m-for-skeleton 自定义组件开发-uamhead及使用向组件props传值
使用uni.request发起对api的网络请求并处理响应结果 在模板中声明事件及在代码中定义响应方法
uni-app中进行数据绑定、使用v-属性 使用uni.navigate进行页面间的跳转及传递参数
使用uni.createInnerAudioContext()创建音频对象并控制音频的播放
使用css3的animation实现音乐唱盘的动画效果 使用css的动态绑定技术实现动画启动-停止的控制
安装和使用uni-app的扩展组件uni-ui优化应用开发
学习编程应该要有:
1.耐心和毅力:编程需要反复尝试和调试,需要耐心地解决问题并且坚持不懈地工作。
2.创造性思维:编程需要创造性地思考,找到不同的解决方案并尝试创新。
3.自信和决心:编程需要自信地面对挑战和错误,并且有决心克服困难。
4.好奇心和求知欲:编程需要持续的好奇心和求知欲,了解新的技术和工具。
5.团队合作:编程通常是团队合作的,需要具备团队精神和协作能力。
6.持续学习:编程需要不断学习新的知识和技能,并且持续跟进技术变化
心得体会
- 持续学习:编程是一个不断学习和进步的过程,没有终点。持续学习新技术和知识可以帮助你不断提高自己的编程能力。
- 实践是关键:学习编程最有效的方法就是不断实践,写出自己的代码,解决实际问题。只有在实践中才能真正理解和掌握编程知识。
- 代码规范:写出规范的、易读的、易维护的代码不仅能够提高代码质量,也能够提高自己的编程水平。
- 善于搜索和阅读文档:对于编程初学者来说,搜索和阅读文档是非常重要的技能。在编程中遇到问题时,可以通过搜索和阅读文档来找到解决方法。
- 不要害怕失败:编程是一个充满挑战和失败的过程,不要害怕失败,要学会从失败中吸取经验教训,不断进步。
- 与他人交流:编程是一个团队合作的过程,与他人交流可以帮助你更好地理解和解决问题,也可以学习到其他人的经验和技巧。