《uni-app跨平台开发与应用》一课一得

目录

一.什么是uni-app

1.uni-app的介绍

2.跨平台开发的优势

（1）.节省开发成本：

（2）.提高开发效率：

（3）.维护便捷：

（4）.性能优异：

（5）.跨平台兼容性强：

二.《网易云音乐平台》项目实战总结

1.首页展示界面

页面结构：

组件引用：

数据请求：

数据处理：

条件渲染：

列表展示：

点击事件：

样式设计：

响应式布局：

用户信息处理：

2.音乐列表界面

页面结构：

组件引用：

数据请求：

条件渲染：

循环列表：

点击事件：

样式设计：

响应式设计：

用户信息处理：

分享功能：

3.音乐播放界面

页面结构设计：

组件复用：

数据请求与处理：

条件渲染：

循环列表：

事件处理：

样式设计：

4.代码实战总结

三.本课程学习心得总结

---

一.什么是uni-app

1.uni-app的介绍

        uni-app是一个基于Vue.js的跨平台应用开发框架，它允许开发者使用Vue.js语法进行一次编码，然后将代码编译成可以运行在多个平台上的原生应用，包括iOS、Android、Web等。uni-app提供了丰富的组件和API，使开发者可以轻松地创建高性能、原生体验的应用，并且具有良好的开发效率和跨平台兼容性。通过uni-app，开发者可以大大减少开发成本和时间，快速推出产品，适应不同平台的需求。

2.跨平台开发的优势

（1）.节省开发成本：

uni-app允许开发者使用一套代码同时适配多个平台，避免了针对不同平台的重复开发，从而大大节省了开发成本。

（2）.提高开发效率：

由于uni-app使用Vue.js语法，开发者可以利用熟悉的Vue.js技术栈进行开发，无需学习额外的语言或框架，从而提高了开发效率。

（3）.维护便捷：

一次编写的代码可以在多个平台上运行，减少了维护的工作量。开发者只需维护一套代码库，即可保证所有平台的应用保持一致性。

（4）.性能优异：

uni-app通过将Vue.js代码编译成原生代码，实现了与原生应用相媲美的性能表现，保证了应用的流畅性和响应速度。

（5）.跨平台兼容性强：

uni-app支持多种平台，包括iOS、Android、Web等，而且对于不同平台的特性和需求有着良好的适配性，能够提供原生级的用户体验

二.《网易云音乐平台》项目实战总结

1.首页展示界面

页面结构：

        使用view组件构建页面的整体结构，包括音乐头部、轮播图、排行榜、用户信息等模块。

组件引用：

        在页面中引入自定义的音乐头部（music-head）和骨架屏（Skeleton）组件，以实现页面的复用和骨架屏效果。

数据请求：

        通过调用API接口获取排行榜数据和轮播图数据，并在页面加载时进行请求。

数据处理：

        将获取到的数据进行处理和格式化，存储在相应的变量中，以便在页面中进行展示。

条件渲染：

        使用v-if和v-else指令进行条件渲染，根据数据加载状态显示骨架屏或实际数据。

列表展示：

        使用v-for指令循环遍历排行榜数据，生成音乐项并展示在页面中。

点击事件：

        为音乐项和轮播图添加点击事件处理函数，实现跳转到对应页面的功能。

样式设计：

        使用scoped样式，定义页面的样式，包括布局、颜色、字体等样式属性。

响应式布局：

        使用rpx单位和百分比布局，实现页面的响应式适配不同屏幕尺寸。

用户信息处理：

        通过获取用户信息接口获取用户头像