uni-app课程一课一得

有命匪解

已于 2024-06-10 12:43:06 修改

阅读量1.2k

点赞数 45

文章标签： uni-app

于 2024-06-10 12:33:25 首次发布

本文链接：https://blog.csdn.net/CDL3449/article/details/139575289

版权

学习uni-app课程是一次极具价值的经历，它不仅让我掌握了跨平台应用开发的技能，还提升了我对于移动互联网软件开发的整体理解。在学习uni-app开发课程的过程中，我获得了诸多收获，下面是我的一些学习心得和体验。

是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到ios、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

uni-app实现了一套代码，同时运行到多个平台；一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具。

案例的学习使得我更加的了解这个项目的开发。

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js，你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

1.页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件

2.组件标签靠近小程序规范。

3.接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 uni。uni-app接口规范

4.数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面生命周期。

uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

跨平台理念的理解：学习uni-app之前，我对于跨平台开发只有模糊的概念。通过课程的学习，我理解了uni-app基于Vue.js实现一套代码多端运行的开发模式。这种模式极大地增强了开发效率，降低了多平台应用维护的复杂度。
搭建开发环境：按照课程指导，我顺利完成了开发环境的搭建，包括HBuilderX、IDE的配置等。这个过程加深了我对工具使用的认知，也让我明白了一个合适的开发环境对于提升开发效率的重要性。
初次上手实践：跟随课程的入门案例，我尝试编写了第一个uni-app程序。从创建项目到编译预览，每一步都让我对uni-app有了更直观的认识。尤其是App端的调试，让我体验到了移动端应用开发的乐趣。

页面布局：学习如何使用uni-app进行页面布局，我掌握了如何使用flex布局以及栅格系统进行响应式设计。课程中的案例帮助我理解了如何适配不同屏幕尺寸的布局技巧。
组件使用：对于uni-app提供的丰富组件库，如按钮、列表、弹窗等，我在项目中实际使用这些组件，并了解了如何根据文档进行自定义修改，增强了页面的交互性。
样式调整：在课程的指导下，我学会了如何配合WebStorm等插件，进行样式的编写和调整。现在我能够快速进行界面风格的定制，让应用更加美观易用。

JavaScript与Vue.js的应用：通过课程的深入学习，我加强了对JavaScript逻辑编写的能力，同时进一步理解了Vue.js的生命周期、方法、计算属性等高级应用。
API的调用与数据处理：学习如何调用后端API，并且处理返回的数据。这对于我理解前后端交互流程，以及如何在uni-app中实现数据绑定和状态管理非常有帮助。
网络请求与本地存储：利用uni-app进行网络请求操作及本地存储的使用，让我能够实现登录功能及本地数据缓存，提升了应用的用户体验。