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

移动应用开发——uni-app框架仿网易云音乐播放器学习心得相关推荐

Vue仿网易云音乐播放器（一）
项目简介写了很多关于Vue的项目,都是一部分一部分的小模块,这次想把全部学过的关于Vue知识和模块写成一个完整的项目.都是组件化进行mvvm模式开发,实现了view和data的同步更新.仿网易云播放 ...
uniapp 仿网易云音乐播放器微信小程序
效果视频: uniapp 仿照网易云播放器功能效果截图: 上代码: <template><view class=""><scroll-view :s ...
Vue仿网易云音乐播放器（二）
项目运行首先要安装npm或者cnpm和node.js环境在终端建立vue-cli项目,命令行cnpm install vue-cli -g //全局安装 vue-cli 查看vue-cli是否成功 ...
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
Android仿网易云音乐播放页面背景虚化碟片效果
1.效果图仿网易云音乐播放页面,主要有4个关键点: 背景虚化.获取音乐的专辑封面,将此图片作为背景图,并进行模糊虚化处理碟片合成.获取音乐的专辑封面,和黑色碟片图片进行合成碟片旋转.音乐播放时, ...
第三方网易云音乐播放器ieaseMusic Mac中文版v1.3.4版
ieasemusic mac中文版是目前mac平台上最好的网易云音乐播放器,与网易云音乐官方客户端最大的区别是,官方的就是「客户端」,完全按照其产品内容进行直接堆砌布局,而 ieaseMusic 是基 ...
树莓派云音乐c语言,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
linux树莓派网易云音乐,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
HTML网页调用网易云音乐播放器代码
表现形式一:单曲播放调用代码: <iframe frameborder="no" border="0" marginwidth="0" ...

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

一、uni-app框架介绍

1.什么是 uni-app

2.为什么要选择uni-app

3.uni-app 统一规范

4.uni-app功能框架

二、开发工具与项目创建

1.开发工具

2.项目创建

3.项目结构

三、仿网易云音乐播放器项目——UAMusic

效果演示

四、总结

移动应用开发——uni-app框架仿网易云音乐播放器学习心得相关推荐

最新文章

热门文章

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

一、uni-app框架介绍

1.什么是 uni-app

2.为什么要选择uni-app

3.uni-app 统一规范

4.uni-app功能框架

二、开发工具与项目创建

1.开发工具

2.项目创建

3.项目结构

三、仿网易云音乐播放器项目——UAMusic

效果演示

四、总结

移动应用开发——uni-app框架 仿网易云音乐播放器学习心得相关推荐

最新文章

热门文章

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

移动应用开发——uni-app框架仿网易云音乐播放器学习心得相关推荐