前言
这篇文章是关于学习uni-app这门课程的一些总结。 uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。在这三个月期间,顺利完成了网易云音乐项目的制作。
目录
6.安装、使用第三方组件-循环骨架m-for-skeleton
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官网进行学习
这里面有路由,有iconfont字体图标的使用,以及各种基础组件的使用
6.安装、使用第三方组件-循环骨架m-for-skeleton
下载安装m-for-skeleton
7.开发项目过程中
1.使用uni.request发起对api的网络请求并处理响应结果
2。在模板中声明事件及在代码中定义响应方法
3。uni-app中进行数据绑定、使用v-属性
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 的生命周期、数据绑定、组件、指令等的一些知识应用。这里的组件用起来非常方便,也大大提高了开发者的效果,使得开发更为高效。从刚开始到现在一步步的学习,从不会使用到完成了一个独立的项目,非常的有成就感。期间用了三个月的时间,一点一滴的循坏渐进的去学习,接下来还会有很多个三个月,慢慢的积累,沉淀。不断地提升自己,让自己的技能逐渐增强。