uni-app课程心得体会

在接触uni-app之前，我对于跨平台应用开发的理解停留在较为基础的层面，认为这仅仅是一个工具，能够帮助我们实现一次编码、多端运行的目标。然而，在深入学习和实践了uni-app之后，我逐渐感受到了它背后的强大与魅力，并对跨平台开发有了更为深入的认识。

首先，uni-app的跨平台特性确实给我带来了很大的便利。使用uni-app，我们可以轻松实现iOS、Android、H5、小程序等多个平台的开发，这无疑大大提高了开发效率，降低了维护成本。在实际开发中，我发现uni-app的语法简洁明了，易于上手，同时它也提供了丰富的组件和API，使得我们能够快速构建出功能完善的应用。通过学习Vue.js，我能够更好地理解前端开发的基础知识，并掌握一些有用的工具和库，以帮助我们构建更强大和灵活的应用程序。

一、uni-app的使用

1、安装环境和编辑器

下载并安装HBuilderX，这是DCloud（数字天堂）推出的一款轻量级但功能强大的HTML5开发环境，专为前端开发者打造。

注册小程序账号并获取appid，这是为了后续在开发过程中进行配置。

下载并安装微信开发者工具，这是用来预览和调试微信小程序的官方工具。

2、创建和配置项目

打开HBuilderX，创建一个新的uni-app项目。

在创建项目的过程中，将之前获取的appid输入到相应的位置。

配置微信开发者工具，确保服务端口已打开，以便项目能够通过微信开发者工具打开和预览。

3、开发过程

页面开发：在uni-app中，页面文件通常包含.vue文件，用于编写页面的结构、样式和行为。你可以通过右键点击pages目录来新建页面。

全局属性和方法：如果你需要在多个页面中使用相同的属性和方法，可以考虑在main.js中挂载它们到Vue.prototype上。这样，你就可以在任何组件中通过this来访问这些属性和方法了。

状态管理：对于复杂的应用，你可能需要使用状态管理库（如Vuex）来管理应用的状态。在uni-app中，你可以在项目的根目录下新建一个store目录，并在其中创建index.js文件来定义状态值。

二、技术特点

1、基于原生框架开发，低门槛学习

uni-app框架的UI组件库基于微信小程序的UI组件库，通过封装native端的UI控件实现跨端渲染。这样一来，开发者可以直接使用微信小程序的UI库，配合Vue.js开发手机应用，无需学习原生技术。

2、一套代码、多端运行，高效

 uni-app框架的核心是渲染层，当显示页面时，uni-app先将Vue组件解析成渲染层，然后渲染层再将渲染结果传递给native端，从而实现在不同平台端的运行。开发者可以基于一套代码，在多个平台上实现原生应用。

3、小体积、快速构建、高效率

 基于Vue.js封装的uni-app框架，具有配置简单、体积小、模板化组件化编程等特点。而且uni-app生成的页面代码相比于原生应用，代码量远远减少，开发效率提高很多。

三、生命周期

1.应用生命周期

onLaunch当uni-app 初始化完成时触发(全局只触发一次)

onShow当 uni-app 启动，或从后台进入前台显示(多次触发)

onHide当 uni-app 从前台进入后台(多次触发)

onUnhandledRejection对未处理的 Promise 拒绝事件监听函数

onPageNotFound页面不存在监听函数onThemeChange监听系统主题变化

2.页面生命周期

onLoad监听页面加载，参数为上个页面传递的参数，参数类型为对象（触发一次）

onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面(多次触发)

onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

onHide监听页面隐藏(多次触发)

onUnload监听页面卸载

onResize监听窗口尺寸变化

四、实战项目

1、母婴商城小程序（部分代码）

2、请假小程序

前期准备：

（1）登录HBuilder x 4.15;

(2)  新建项目：

（3）右键点击uniCloud关联云服务空间（新建 实名认证）

部分代码：

五、总结

在解决问题的过程中，我逐渐掌握了一些方法和技巧。例如，我会充分利用uni-app的社区资源，查阅相关的论坛和文档，寻找其他开发者的经验和解决方案。同时，我也会通过调试和日志分析来定位问题，逐步排查和修复。

通过这段时间的学习和实践，我深刻体会到了uni-app在跨平台开发中的优势和挑战。虽然它并不能完全解决所有问题，但是它确实为我们提供了一个高效、便捷的开发工具。我相信，在未来的开发中，我会继续深入学习和探索uni-app的更多功能和特性，不断提升自己的开发能力和水平。

总的来说，uni-app给我带来了很多启发和收获。它不仅帮助我提高了开发效率，也让我对跨平台开发有了更为深刻的认识。我相信，在未来的开发中，uni-app会继续发挥它的优势，为我们带来更多的便利和价值。