移动应用开发——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有大量的组件可使用。