UNI-APP写播放器的学习总结

UNI-APP介绍

UNI-APP是一个跨平台的开发框架，可以同时开发小程序、H5、iOS和Android应用。它基于Vue.js和Webpack，提供了统一的开发语法和组件库，在保持各个平台的差异性的同时，方便开发者进行跨平台开发，提高开发效率。

UNI-APP的特点包括：

1. 跨平台：支持小程序、H5、iOS和Android应用的开发；

2. 统一开发：采用Vue.js作为开发语言，提供统一的开发语法和组件库；

3. 良好兼容性：保持各个平台的差异性，同时可以进行平台相关的优化；

4. 高效开发：提供丰富的工具和插件，方便开发者快速进行开发和调试；

5. 丰富的生态：提供了庞大的开发者社区和插件库，可以快速获取帮助和解决问题。

总之，UNI-APP是一个非常实用的跨平台开发框架，它可以帮助开发者快速开发各种类型的应用，为用户提供更好的使用体验。

UNI-APP的学习前言

UNI-APP是一款基于Vue.js的跨平台应用开发框架，可以用同一套代码开发出同时支持iOS、Android、H5以及小程序等多个平台的应用。相比于传统的开发方式，UNI-APP在开发效率、代码复用性、跨平台适配性等方面都有很大的优势。

学习UNI-APP需要掌握Vue.js的基本语法和相关概念，因此如果你之前没有接触过Vue.js的话，建议先学习Vue.js。此外，对于不同平台的开发，还需要对各个平台的特点、API等有一定的了解。

本文档旨在提供一些UNI-APP的基础知识和学习资源，帮助初学者快速上手并深入学习。

涉及的知识点一览

uni-app项目的创建

h5和安卓app发布

使用git和gitee进行代码的版本控制

使用gimp测量图片大小与距离以编写css

pages.json页面路由的配置

使用阿里云智能logo设计网站设计应用logo

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

在uni-app中使用静态资源

iconfont的下载与使用

1. 打开iconfon网站，选取自己需要的图标。

2. 点击“下载SVG”或“下载Font”按钮，将图标下载到本地。

3. 在UNI-App项目中的static目录下创建一个名为“font”的文件夹，并将下载的字体文件（.ttf或.woff）和CSS文件（.css）放入其中。

4. 在main.js文件中引入CSS文件。

  import '@/static/font/iconfont.css';

1. 使用图标，在需要使用到图标的vue文件中使用代码：

<template>
  <view>
    <text class="iconfont"></text>
  </view>
</template>

<style>
  .iconfont {
    font-family: 'iconfont';
    font-size: 50rpx;
    color: #333;
  }
</style>

其中，是iconfon给图标生成的Unicode码，可以在下载的CSS文件中找到对应的码值。font-family属性为下载的字体文件名称，这里为iconfont，请根据自己下载的字体文件名称自行修改。

1. 刷新页面，即可看到使用iconfon的图标效果。

注意事项：

• 下载的图标文件中，有些图标会有多种尺寸和风格，需根据需求选择下载。
• 在使用图标时，需要将Unicode码放入text标签中，并添加class样式，同时在CSS样式中设置font-family属性为下载的字体文件名。
• 在代码中表现的图标，与iconfon网站上的图标可能会存在差异，请参考iconfon网站上的预览效果来使用。

认识uniapp应用生命周期和页面生命周期

Uniapp应用的生命周期指的是从应用打开到应用关闭的整个过程中，应用所经历的各个阶段和事件。Uniapp页面的生命周期指的是某个页面从创建到销毁的整个过程中，页面所经历的各个阶段和事件。

Uniapp应用的生命周期包括以下事件：

1. 应用启动：当用户点击应用图标或从其他渠道打开应用时触发该事件。

2. 应用进入前台：当应用从后台返回前台时触发该事件。

3. 应用进入后台：当应用从前台切换到后台时触发该事件。

4. 应用关闭：当用户手动关闭应用时触发该事件。

Uniapp页面的生命周期包括以下事件：

1. 页面创建：当页面被创建时触发该事件。

2. 页面显示：当页面被展示时触发该事件。

3. 页面隐藏：当页面被隐藏时触发该事件。

4. 页面卸载：当页面被卸载时触发该事件。

在Uniapp中，可以通过编写相应的回调函数来监听应用和页面的生命周期事件。例如，可以在App.vue中定义onLaunch、onShow、onHide和onError等函数来监听应用的生命周期事件，也可以在Page.vue组件中定义onLoad、onShow、onHide和onUnload等函数来监听页面的生命周期事件。

uni-app基础组件的使用view、scrollview、text、list

、rich-text等

安装、使用第三方组件-循环骨架m-for-skeleton

自定义组件开发-uamhead及使用向组件props传值

使用apifox调用、测试webapi

使用uni.request发起对api的网络请求并处理响应结果

在模板中声明事件及在代码中定义响应方法

uni-app中进行数据绑定、使用v-属性

使用uni.navigate进行页面间的跳转及传递参数

使用uni.createInnerAudioContext()创建音频对象并控制音频的播放

使用css3的animation实现音乐唱盘的动画效果

使用css的动态绑定技术实现动画启动-停止的控制

可以使用CSS3的关键帧动画（@keyframes）和animation属性来实现动画的启动-停止控制。具体步骤如下：

1. 定义关键帧动画

通过@keyframes定义关键帧动画，设置动画的起始和终止状态。例如：

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

1. 定义动画样式

通过animation属性定义动画样式，指定动画的名称、持续时间、重复次数、动画方向等属性。其中，animation-play-state属性用于控制动画的播放状态，取值可以为paused或running。例如：

.animation {
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

1. 绑定动画控制事件

通过JavaScript代码监听元素的点击事件，根据当前动画状态修改animation-play-state属性的值，从而实现动画的启动-停止控制。例如：

document.querySelector('.btn-start').addEventListener('click', function() {
  document.querySelector('.animation').style.animationPlayState = 'running';
});

document.querySelector('.btn-stop').addEventListener('click', function() {
  document.querySelector('.animation').style.animationPlayState = 'paused';
});

另外，可以使用CSS3的transition属性实现过渡动画效果，以使启动-停止控制更加平滑。

使用正则表达式对字符串进行搜索、替换

使用css的tranform配合js的setInterval同步歌曲的播放进度显示相应歌词

实现思路：

1. 通过HTML5的<audio>标签播放歌曲，同时在页面上显示歌词。

2. 将歌词文件读取为一个数组，每一行作为一个元素存储，方便后续的处理。

3. 利用CSS的transform属性，将歌词容器中的每一行歌词都向上移动，实现歌词的滚动效果。

4. 使用JavaScript的setInterval函数定时更新歌曲播放进度和歌词的显示。

5. 通过比较歌曲当前播放时间和歌词时间轴的差值，来判断当前应该显示哪一句歌词。

6. 将当前应该显示的歌词高亮显示出来。

实现代码如下：

HTML部分：

<div class="lyric-container">
	<!-- 歌词容器 -->
</div>
<audio src="song.mp3"></audio>

CSS部分：

.lyric-container {
	position: relative;
	overflow: hidden;
	height: 300px; /* 歌词容器高度 */
}

.lyric-container p {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 30px;
	opacity: 0.5;
}

.lyric-container p.active {
	opacity: 1;
}

JavaScript部分：

const audio = document.querySelector('audio');
const lyricContainer = document.querySelector('.lyric-container');
let lyricArr = []; // 歌词数组
let currentIndex = 0; // 当前歌词索引

// 读取歌词文件
fetch('song.lyric')
	.then(response => response.text())
	.then(data => {
		lyricArr = data.split('\n'); // 按行拆分
	});

// 更新歌曲进度和歌词显示
audio.addEventListener('timeupdate', function() {
	const currentTime = this.currentTime;

	// 更新歌词显示
	for(let i = 0; i < lyricArr.length; i++) {
		const lyricTime = lyricArr[i].match(/\[\d{2}:\d{2}\.\d{2}\]/g);
		if(!lyricTime) {
			continue;
		}

		const time = lyricTime[0].match(/\d{2}:\d{2}\.\d{2}/)[0];
		const timeArr = time.split(':');
		const timeSeconds = parseInt(timeArr[0]) * 60 + parseFloat(timeArr[1]);

		if(currentTime > timeSeconds && currentIndex < i) {
			currentIndex = i;
			const activeLyric = document.querySelector('.lyric-container p.active');
			if(activeLyric) {
				activeLyric.classList.remove('active');
			}
			const newLyric = lyricContainer.querySelector(`p[data-time="${time}"]`);
			if(newLyric) {
				newLyric.classList.add('active');
				const offset = lyricContainer.clientHeight / 2 - newLyric.offsetTop;
				lyricContainer.style.transform = `translateY(${offset}px)`;
			}
		}
	}
});

这样就可以实现歌曲播放时自动显示歌词，且高亮显示当前唱到的部分，并伴随着歌曲播放进度实时滚动歌词。

安装和使用uni-app的扩展组件uni-ui优化应用开发

uni-ui是一个基于uni-app的扩展组件库，包含了常用的UI组件和工具类，可以帮助开发者更快速地开发uni-app应用。以下是安装和使用uni-ui的步骤：

1. 安装uni-ui

在uni-app项目中，可以通过HBuilderX的插件Marketplace或者npm来安装uni-ui。

通过HBuilderX的插件Marketplace安装：

打开HBuilderX，点击左侧的插件Marketplace，搜索uni-ui，点击安装即可。

通过npm安装：

使用npm安装uni-ui，可以在项目根目录下执行以下命令：

npm install @dcloudio/uni-ui -S

1. 引入uni-ui组件

在需要使用uni-ui组件的页面中引入组件，例如：

<template>
  <view class="container">
    <uni-button type="primary">Hello uni-ui</uni-button>
  </view>
</template>

<script>
import uniButton from '@dcloudio/uni-ui/lib/uni-button.vue'

export default {
  components: {
    uniButton
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

在上面的例子中，我们使用了uni-button组件，并通过import引入了组件，再在components中注册了组件。

1. 使用uni-ui提供的工具类

uni-ui还提供了一些工具类，例如：uni-icons、uni-transition等。使用方法如下：

<template>
  <view class="container">
    <uni-icons type="uni-app"></uni-icons>
    <uni-transition>
      <view>Hello uni-ui</view>
    </uni-transition>
  </view>
</template>

<script>
import {uniIcons, uniTransition} from '@dcloudio/uni-ui'

export default {
  components: {
    uniIcons,
    uniTransition
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

在上面的例子中，我们使用了uni-icons和uni-transition工具类，并通过import引入了组件，再在components中注册了组件。

总的来说，使用uni-ui可以帮助开发者更快速地开发uni-app应用，提高开发效率。