前端MUI+H5+HBuilderX开发APP（IOS，android），后台Springboot,java学习与实践文章，更新中（一）

此项目为本人本科毕业设计，不喜勿喷，只是想边学习边分享，不一定存在很强的逻辑。文章作为本人学习开发的笔记，好记性不如烂笔头，怕自己写着后面忘了前面。作为个人学习成长笔记。如果能帮助到你，一定要点个赞哦！

参考文档

开发工具：
HBuilderX：https://www.dcloud.io/hbuilderx.html.
下载完直接解压打开HBuilderX.exe即可

MUI组件：https://dev.dcloud.net.cn/mui/ui/.

新手文档：https://dev.dcloud.net.cn/mui/getting-started/.

GitHub地址：https://dev.dcloud.net.cn/mui/getting-started/.

开发前的学习了解

前言

本机应用程序开发有更快更好的用户体验和更高的性能,但在可移植性,尤其是一个本地应用程序,Android和IOS开发,同样的逻辑,编写两套接口,每次都需要更新，用户更新APP还需要重新下载安装。HTML5是一款使用Web技术开发的移动应用程序，它通过浏览器显示与用户交互。HTML5的代码可以同时运行在Android，IOS和Windows上，但由于Web技术本身的限制，HTML5移动应用不能直接访问设备硬件和离线存储，因此在体验和性能上有很大的局限性。混合模式的应用程序是轻量级的，快速的，并且拥有良好的用户体验。

对于一个跨平台的移动应用，选择合适的开发技术是非常重要的。一个好的跨平台的升级技术可以使移动应用具有丰富的内容和良好的用户体验，方便用户使用，并且可以减少开发周期，从而降低开发成本。目前，市场上主流的跨平台开发技术主要有Ionic、React Native、 Flutter、Cordova 和uni-app。

简介

Uni-app是一个开发框架终端应用使用vue.js，具有强大的性能，开源和原生HTML5+混合开发。它深入扩展了HTML5的性能、工具和功能。它是由国内制造商DCloud生产的。DCloud拥有420万开发者，成千上万的应用案例和6.5亿手机月活跃用户。除此以外，在App上的用户体验很好，没有任何问题。Uni-app可以真正实现“一套代码多终端发布”，即一套代码可以发布到Android、IOS、HTML5、小程序等平台，而不需要维护和升级不同平台的代码。

MUI框架技术概述

MUI框架是一种基于ratchet技术的前端开发框架，它的核心技术是WebView。由 DCLOUD公司研发，它为开发人员提供了一系列UI组件：如消息框、列表、开关和折叠面板等。另外，它的CSS的预定义样式、预加载、WebView交互效果等功能很好地解决了App应用常见的下拉刷新不流畅、SPA模式动画卡顿和切页白屏等问题，使App的开发由复杂变得简单，大大提高了开发效率。它是最接近原生体验的App框架。MUI框架结合HBuilder软件可以使开发者更加方便地进行Wep App的开发、设计和一键打包工作，并最终生成可以发布的跨平台App应用。它是最接近原生体验的前端框架技术。

基于MUI的跨平台移动技术开发App的优、缺点

（1）优点。利用MUI技术开发的App应用不仅可以支持IOS和
Android等多系统平台，而且UI风格简洁美观，在开发过程中使用的程序语言简单易懂，缩短了开发时间，降低了开发成本。
（2）缺点。经过一定时间的实践检验后发
现，开发的移动网页设计App实现了跨平台操作，但移动终端无论在硬件或软件系统上均存在着各种细微的差别，导致
一小部分在使用编辑器时会出现移动终端与App不兼容或卡顿现象。

项目计划

毕业设计将采用HTML5技术完成了系统的前端开发。系统后台采用uni-app框架实现跨平台，Spring Boot 技术完成实现，数据库采用MySQL。Html5集成,uni-app，Spring Boot、和MySQL完成了跨平台系统的研发。