移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
目录
一、uni-app框架介绍
1.什么是 uni-app
2.为什么要选择uni-app
3.uni-app 统一规范
4.uni-app功能框架
二、开发工具与项目创建
1.开发工具
2.项目创建
3.项目结构
三、仿网易云音乐播放器项目——UAMusic
效果演示
四、总结
一、uni-app框架介绍
1.什么是 uni-app
uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。
uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。
2.为什么要选择uni-app
1.开发者/案例数量更多
几十万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数跨端完善度更高，真正落地的提高生产力。
2.平台能力不受限
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。
3.性能体验优秀
加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。
4.周边生态丰富
插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。
5.学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。
6.开发成本低
不止开发成本，招聘、管理、测试各方面成本都大幅下降。
3.uni-app 统一规范
页面组件要遵循Vue 单文件组件 (SFC) 规范
组件标签靠近微信小程序规范
接口能力（JS API）靠近微信小程序规范
数据绑定及事件处理靠近Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
4.uni-app功能框架
二、开发工具与项目创建
1.开发工具
首选使用官方推出的HBuilderX 编辑器，可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node 。社区比较成熟，生态好，组件丰富，支持npm方式安装第三方包，兼容mpvue，并且DCloud有大量的组件可使用。
HBuilderX下载
DCloud 插件市场
2.项目创建
3.项目结构
| 文件名称 | 作用 |
| common | 存放接口文件 |
| components | 存放组件文件 |
| pages | 存放所有页面 |
| static | 存放静态资源，例如图片 |
| unpackage | 打包目录，存放打包后的文件 |
| App.vue | 页面入口文件，所有页面都是在App.vue下进行切换的 |
| main.js | 项目入口文件，主要用来初始化vue实例并使用需要的插件 |
| manifest.json | 应用配置文件，用于指定的名称、图标、权限等 |
| pages.json | 全局配置文件，可以配置页面文件路径、窗口样式，原生的导航栏、底部tab栏等 |
| uni.scss | 是uni-app的样式包，在其他文件中可以快速引用样式包里面的样式 |
三、仿网易云音乐播放器项目——UAMusic
在本学期《移动应用开发课程》上，从无到有，一步步开发出一个简单的,基于vue和uni-app框架的仿网易云音乐播放器项目，目前实现功能有：歌单推荐、音乐播放、搜索歌曲、搜索记录等。
效果演示
榜单页
搜索页
播放页
该项目需要成功调用数据接口，获取歌曲、歌手、歌词等相关数据，调用接口代码如下：
config.js文件
export const baseUrl="http://localhost:3000";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 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'
})
}
四、总结
uniapp框架的跨平台特性非常优秀，可以让我们在一次开发中同时支持多个平台，包括微信小程序、支付宝小程序、百度小程序、H5、App等。这大大提高了开发效率。其次，uniapp框架提供了丰富的组件和API，可以满足我们的各种需求。在开发仿网易云音乐播放器时，我使用到了了uniapp提供的音频组件（paused，判断音频是否处于暂停/停止状态）、scroll-view组件（骨架屏）等，这些组件都非常好用，可以让我们快速实现各种功能，uniapp框架的开发文档也是非常详细，对于初学者来说非常友好。
uniapp 是基于 vue 的跨平台应用开发框架,，uniapp 与 vue 之间有很强的联系。 并且uniapp 可以使用vue 的语法和组件，因此,开发 uniapp 项目，需要熟练掌握 vue 的相关知识。