移动应用开发——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功能框架

移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第1张图片

二、开发工具与项目创建

1.开发工具

  首选使用官方推出的HBuilderX 编辑器,可视化的方式比较简单,HBuilderX 内置相关环境,开箱即用,无需配置node 。社区比较成熟,生态好,组件丰富,支持npm方式安装第三方包,兼容mpvue,并且DCloud有大量的组件可使用。

 HBuilderX下载

 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第2张图片

DCloud 插件市场

2.项目创建

 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第3张图片

移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第4张图片

 3.项目结构

移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第5张图片

文件名称 作用
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框架的仿网易云音乐播放器项目,目前实现功能有:歌单推荐、音乐播放、搜索歌曲、搜索记录等。

效果演示

榜单页

移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第6张图片

 搜索页

 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得_第7张图片

 播放页

该项目需要成功调用数据接口,获取歌曲、歌手、歌词等相关数据,调用接口代码如下:

 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 的相关知识。

你可能感兴趣的:(uni-app)