uni app仿QQ音乐界面设计与兼容性实战

资源摘要信息: "本项目是一个使用uni app框架仿造的QQ音乐界面，旨在为不同技术领域的学习者提供实践案例。项目支持es6、less，并使用远程引入字体库的方式解决小程序端无法本地引入iconfont的问题。由于uniapp的限制，页底固定导航的跳转行为在不同端有所区别。组件命名需避免使用关键字，并且组件文件名中不应包含.vue后缀。在uniapp中，可以将js公共方法挂载在全局作为过滤器使用，并且在小程序模板内调用函数时，需避免使用不支持的语法。" 知识点： 1. uni app框架介绍 uni app是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台。它允许开发者编写一次代码，通过不同的平台编译器，发布到多个平台上去。 2. QQ音乐界面仿制 此项目的核心目的是仿制QQ音乐的用户界面。它涉及到前端页面设计、交互设计和用户体验等方面。通过仿制，学习者可以深入了解并实践QQ音乐的界面布局、色彩搭配、字体使用、图标设计、动画效果等元素。 3. es6的使用 es6，即ECMAScript 6，是JavaScript语言的下一代标准，引入了大量新特性，如let、const、箭头函数、模块化等。本项目支持es6，意味着在开发过程中可以使用这些新特性来提高代码的可读性和效率。 4. less的使用 less是一种动态样式表语言，它是css的预处理器。通过less可以实现变量、嵌套、混合等高级功能，使样式表的编写更加简洁高效。uni app支持less预处理器，可以让开发者在项目中使用less来增强css的编写能力。 5. 小程序开发注意事项 由于uni app兼容微信小程序端，开发过程中需注意小程序的特定限制。例如，小程序不支持本地引入iconfont，需要改为远程引入字体库或者使用图片代替。此外，uniapp中组件命名时需避免使用关键字，并且组件文件名不应包含.vue后缀。 6. 全局方法与过滤器 由于uni app不支持原生的过滤器，开发者可以提取js公共方法，并将它们挂载在全局，以此来模拟过滤器的功能。例如，"./publicjs/common"中可以定义如收听人数格式化等公共方法。 7. 钩子函数使用 uni app结合了Vue的生命周期钩子函数和小程序的生命周期函数。开发者在开发过程中需要注意，如果仅使用小程序的钩子函数，可能不会得到预期的运行效果，因此需要同时使用Vue的钩子函数来确保功能的全面性。 8. H5、小程序、App端的兼容性问题 uni app的一个核心特点是能够实现一套代码跨平台编译，但是不同平台间的兼容性问题仍旧存在。比如，小程序模板内不支持函数调用，这时需要采用特定的解决方案，比如通过全局方法替代。此外，uni app暂不支持小程序中的页底固定导航只跳转中间部分的功能，因为优先考虑了微信小程序的兼容性。 9. 实践应用意义 对于小白或进阶学习者来说，本项目不仅是一个实践案例，还是一个学习不同技术栈的起点。可以作为毕设项目、课程设计、大作业、工程实训或初期项目立项来锻炼和展示开发能力。 通过这个项目，学习者可以了解和掌握uni app框架的使用方法，熟悉跨平台开发的流程，以及应对在开发过程中可能遇到的平台兼容性问题。同时，通过对QQ音乐界面的仿制，学习者还可以学习到前端设计的审美和交互设计的技巧。