学习心得体会"/>
uniapp学习心得体会
学会开发环境准备
下载安装 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 = '';
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.持续学习：编程需要不断学习新的知识和技能，并且持续跟进技术变化
心得体会
- 持续学习：编程是一个不断学习和进步的过程，没有终点。持续学习新技术和知识可以帮助你不断提高自己的编程能力。
- 实践是关键：学习编程最有效的方法就是不断实践，写出自己的代码，解决实际问题。只有在实践中才能真正理解和掌握编程知识。
- 代码规范：写出规范的、易读的、易维护的代码不仅能够提高代码质量，也能够提高自己的编程水平。
- 善于搜索和阅读文档：对于编程初学者来说，搜索和阅读文档是非常重要的技能。在编程中遇到问题时，可以通过搜索和阅读文档来找到解决方法。
- 不要害怕失败：编程是一个充满挑战和失败的过程，不要害怕失败，要学会从失败中吸取经验教训，不断进步。
- 与他人交流：编程是一个团队合作的过程，与他人交流可以帮助你更好地理解和解决问题，也可以学习到其他人的经验和技巧。
更多推荐
uniapp学习心得体会
发布评论