关于uni-app的学习总结

前言

这篇文章是关于学习uni-app这门课程的一些总结。 uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。在这三个月期间，顺利完成了网易云音乐项目的制作。

目录

前言

1.uni-app项目的创建

2.开发环境准备

3.git源代码管理操作步骤

4.pages.json页面路由的配置

5.创建基础项目框架

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

7.开发项目过程中

8.使用api获取歌曲信息

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

10.学习uni-app心得体会

---

1.uni-app项目的创建

点击新建项目

填写项目名称，选择模板，创建项目

2.开发环境准备

配置微信开发者工具路径，以调试小程序

3.git源代码管理操作步骤

1.在码云上创建或fork项目；

2.在hbuilderx中创建项目到url对应的文件夹

3.在hbuilderx中设置用户名和Email，依次点击工具->easy-git

4.鼠标右键选择源代码管理

点击＋号，将代码add到index，然后填写说明commit

接着将代码push推送到码云

4.pages.json页面路由的配置

5.创建基础项目框架

可以前往uni-app官网进行学习

https://uniapp.dcloud.net.cn

这里面有路由，有iconfont字体图标的使用，以及各种基础组件的使用

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

下载安装m-for-skeleton

7.开发项目过程中

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

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

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

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

8.使用api获取歌曲信息

1./song/detail获取歌曲详情，包括歌名、艺人、图片等

2./song/url     获取歌曲音频的url

3./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'
	})
}

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

动态绑定css

<view  class="player">
			<image :src="song.picUrl" :class="{ 'run' : isplayrotate }" mode=""></image>
			<text class="iconfont iconbofang" @tap="playing"></text>
			<view></view>
		</view>

 对应css

.player .run {
		animation-play-state: running;
	}

播放效果动画

.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);
		}
	}

10.学习uni-app心得体会

通过学习了解到，uni-app是基于vue.js的跨平台开发框架,学习 uni-app之前已经系统的学习过了vue.js 的基础知识。主要包括 Vue.js 的生命周期、数据绑定、组件、指令等的一些知识应用。这里的组件用起来非常方便，也大大提高了开发者的效果，使得开发更为高效。从刚开始到现在一步步的学习，从不会使用到完成了一个独立的项目，非常的有成就感。期间用了三个月的时间，一点一滴的循坏渐进的去学习，接下来还会有很多个三个月，慢慢的积累，沉淀。不断地提升自己，让自己的技能逐渐增强。