移动应用开发——uni-app跨平台开发 UAMusic学习心得

目录

UAMusic音乐播放器学习心得

效果截图

1.首页

2.列表详情页

 3.歌曲详情页

4.搜索页面

一.基本功能（附部分代码展示-仅参考）:

1、单曲动画播放

动态绑定css

对应css：

播放效果动画

2、音乐播放和暂停两种播放模式切换

3、同步歌曲的播放进度显示相应歌词

4、智能搜索、歌曲推荐，基于本地音乐库

二.开发环境

安装HBX

1.在地址栏中直接输入DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架uni-app多端开发,开发一次同时生成App、小程序、H5https://www.dcloud.io

2.解压 HBuilderX

三.技术小总结

1.uni-app项目的创建

2.每完成一次工作点，记得使用git进行代码上传到自己的仓库

3.我的pages.json页面路由的配置

4.安装与使用微信小程序开发工具

1.新建项目

可以点击设置-安全-打开服务端口

 2.页面介绍

---

UAMusic音乐播放器学习心得

       这个学期，在任课老师的带领下开发了属于自己的音乐播放器UAMusic，这个播放器的界面采用目前较为流行的网易云app风格。这个项目的开发技术，需基于vue 和小程序规范的跨端框架来进行学习，起初只是简单的界面设计，比如使用阿里云智能logo设计网站设计应用logo、简洁的前端页面跳转等功能，后来这个项目越走越远，变成了个像模像样的播放器了

效果截图

1.首页

2.列表详情页

 3.歌曲详情页

4.搜索页面

一.基本功能（附部分代码展示-仅参考）:

1、单曲动画播放

动态绑定css

对应css：

播放效果动画

.player image{ 
		width:380rpx; 
		height:380rpx; 
		border-radius: 50%; 
		position: absolute; 
		left:0; 
		top:0; 
		right:0; 
		bottom:0; 
		margin:auto; 
		z-index: 3;
		animation:10s linear infinite move; 
		animation-play-state: paused;
	}
	@keyframes move{
		from{ 
			transform : rotate(0deg);
		}
		to{ 
			transform : rotate(360deg);
		}
	}
	.player .run{ 
		animation-play-state: running;
	}
	.lyric{
		height: 250px;
		line-height: 90px;
		font-size: 32rpx;
		color: #949495;
		text-align: center;
		overflow: hidden;
	}
	.active{
		color: #8effcc;
	}
	.lyric .wrap{
		transition: .5s;
	}
	.lyric .item{
		height: 82rpx;
	}

2、音乐播放和暂停两种播放模式切换

<template>
	<view class="player-head">
		<uamhead :title="title"></uamhead>
		<view class="song">{
  {song.artist}}:{
  {song.name}}</view>
		<view  class="player">
			<image :src="song.picUrl" :class="{ 'run' : isplayrotate }" mode=""></image>
				<text class="iconfont iconpause" @tap="noPlaying" v-if="isplayrotate"></text>
				<text class="iconfont iconbofang" @tap="playing" v-else></text>
			<view></view>
		</view>
		<scroll-view class="lyric" scroll-y="true">
			<view class="wrap" :style="{ transform : 'translateY(' + - (lyricIndex - 1) * 84 +'rpx)'}">
				<view class="item" :class="{active: lyricIndex == index}" v-for="(item,index) in song.lyric"
					:key="index">
					{
  {item.lyric}}
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import {
		songDetail,
		songLyric,
		songUrl,
	} from '../../common/api.js'
	//创建innerAudioContext实例
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				title: '黑胶唱片',
				song: {
					id: '',
					name: '',
					artist: '',
					picUrl: '',
					songUrl: '',
					lyric: '',
				},
				isplayrotate: false,
				lyricIndex: 0,
			}
		},
		onLoad(options) {
			let playerid = options.songId
			//歌曲id
			songDetail(playerid).then(res => {
				let s = res.data.songs[0]
				this.song.name = s.name
				this.song.id = s.id
				this.song.artist = s.ar[0].name
				this.song.picUrl = s.al.picUrl
				//播放音乐url
				song