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 = '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.持续学习：编程需要不断学习新的知识和技能，并且持续跟进技术变化

心得体会

• 持续学习：编程是一个不断学习和进步的过程，没有终点。持续学习新技术和知识可以帮助你不断提高自己的编程能力。
• 实践是关键：学习编程最有效的方法就是不断实践，写出自己的代码，解决实际问题。只有在实践中才能真正理解和掌握编程知识。
• 代码规范：写出规范的、易读的、易维护的代码不仅能够提高代码质量，也能够提高自己的编程水平。
• 善于搜索和阅读文档：对于编程初学者来说，搜索和阅读文档是非常重要的技能。在编程中遇到问题时，可以通过搜索和阅读文档来找到解决方法。
• 不要害怕失败：编程是一个充满挑战和失败的过程，不要害怕失败，要学会从失败中吸取经验教训，不断进步。
• 与他人交流：编程是一个团队合作的过程，与他人交流可以帮助你更好地理解和解决问题，也可以学习到其他人的经验和技巧。