SpringBoot系列——基于mui的H5套壳APP开发web框架
ztj100 2025-05-14 18:29 2 浏览 0 评论
前言
大致原理：创建一个main主页面，只有主页面有头部、尾部，中间内容嵌入iframe内容子页面，如果在当前页面进行跳转操作，也是在iframe中进行跳转，而如果点击尾部按钮切换模块、页面，那就切换iframe标签的src进行更新url，这样我们在跳转页面时，头部、尾部都不会刷新，浏览效果更佳，配合mui前端框架，使操作体验更接近原生App
如果不用考虑APP上架审核的问题，可以采用H5套壳的方式开发APP，可以降低开发人员的学习成本，uni-app + H5这样的套壳Web App，会Web项目开发的开发就能轻松上手
得益于之前的总结，基于mui的H5套壳APP开发web框架，逐步完善，开源分享
技术栈
springboot + thymelea + mui
效果演示
目录结构
uni-app套壳
1、新建uni-app项目，页面仅使用webview组件，直接指定服务地址
<web-view id="webView" :src="url"></web-view>2、配置沉浸式
需要设置page.json
{
"globalStyle": {
"navigationStyle":"custom"
},
"usingComponts": true
}以及manifest.json
"app-plus" : {
"statusbar" : {
"immersed" : true
}
}其他的暂时不配置，比如APP图标、启动图等，提交云端打包、下载安装
App 版比H5版多一个系统状态栏占高
//h5端默认隐藏
mui.plusReady(function(){
//显示系统状态栏占高
$(".huanzi-header .statusbar").css("display","block");
//自适应高度
adaptiveHeight();
});头、尾操作
分为标题头部按钮操作、底部按钮操作
按钮切换模式
按钮切换分为两种模式：1 切换立即加载初始url 2 切换仅回显页面，在当前页面点击才加载（切换为首次加载除外）
切换方式也很简单，在配置文件进行修改即可
//h5端默认隐藏
mui.plusReady(function(){
//显示系统状态栏占高
$(".huanzi-header .statusbar").css("display","block");
//自适应高度
adaptiveHeight();
});1 切换立即加载初始url
2 切换仅回显页面，在当前页面点击才加载（切换为首次加载除外）
mui loading
显示：mui.showLoading('加载中...','div');
隐藏：mui.hideLoading();
其他mui弹窗效果，请移步官网文档查看！
自定义封装
物理按钮监听
顶部进度条
顶部进度条采用NProgress插件
在main主页面中引入，head.html的最开始处调用start
<!-- 顶部进度条开始 -->
<head>
<script>
//顶部进度条开始，子页面加载才调用
if(window.location.pathname !== "/muiwrapper/main"){
window.parent.NProgress.start();
}
</script>
</head>在iframe的onload回调中调用done
//顶部进度条结束
window.NProgress.done();更新、补充
2020-04-27更新：
1、新增底部按钮动态配置，真正项目应用中，可以从数据库动态读取，这样的话后面需要调整按钮配置也不需要修改代码，直接改配置即可
底部按钮
以及对于的iframe
2、自定义弹窗，告警、确认弹窗内部调用父类显示，回调依旧执行子iframe的方法，效果就是遮阴层能后覆盖标题栏、底部按钮
3、优化代码main.html代码，尽量使用thymeleaf语法；开启初始化所有页面功能，页面提前加载、提高后续切换页面体验；
2020-06-01更新
1、优化tab页切换效果，实现过渡动画，而不是直接切换；
2、同tab页中，div窗体切换效果实现；
3、新增自定义键盘（来自大佬的开源组件分享：https://www.jianshu.com/p/cb21ca8786a4，不支持中文），主要用于输入密码等对安全行为要求较高的动作
后记
注意，浏览器访问需要打开控制台，切换到移动端模式，还有我们的适配器判断过于简单，有些情况下会判断错误，例如360浏览器
代码其实不多，主要涉及都父、子窗口相互调用的问题，基于mui的H5套壳APP开发web框架暂时记录到这，后续再进行补充
代码开源
代码已经开源、托管到我的GitHub、码云：
GitHub：https://github.com/huanzi-qch/springBoot
码云：https://gitee.com/huanzi-qch/springBoot
版权声明
作者：huanzi-qch
出处：
https://www.cnblogs.com/huanzi-qch
若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.
相关推荐
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 一个令人头秃的问题，Logback 日志级别设置竟然无效?
-
原文链接：https://mp.weixin.qq.com/s/EFvbFwetmXXA9ZGBGswUsQ原作者：小黑十一点半...
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
-
需求背景之为什么要有超时关单原因一：...
- 火了!阿里P8架构师编写堪称神级SpringBoot手册，GitHub星标99+
-
Springboot现在已成为企业面试中必备的知识点，以及企业应用的重要模块。今天小编给大家分享一份来着阿里P8架构师编写的...
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
-
Fleet是JetBrains公司推出的轻量级编辑器，对标VSCode。该款产品还在公测当中，具体下载链接如下JetBrainsFleet：由JetBrains打造的下一代IDE。想要尝试的...
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
-
网上搜到的SpringBoot的代码不多，完整的不多，能用的也不多，基本上大部分的文章只是提供了少量的代码，讲一下思路，或者实现方案。之前一般的做法都是使用HTML5来做的，大部都是传文件的，传文件夹...
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
-
先看看专利描述...
- 看完SpringBoot源码后，整个人都精神了
-
前言当读完SpringBoot源码后，被Spring的设计者们折服，Spring系列中没有几行代码是我们看不懂的，而是难在理解设计思路，阅读Spring、SpringMVC、SpringBoot需要花...
- 阿里大牛再爆神著:SpringBoot+Cloud微服务手册
-
今天给大家分享的这份“Springboot+Springcloud微服务开发实战手册”共有以下三大特点...
- WebClient是什么?SpringBoot中如何使用WebClient?
-
WebClient是什么？WebClient是SpringFramework5引入的一个非阻塞、响应式的Web客户端库。它提供了一种简单而强大的方式来进行HTTP请求，并处理来自服务器的响应。与传...
- SpringBoot系列——基于mui的H5套壳APP开发web框架
-
前言 大致原理：创建一个main主页面，只有主页面有头部、尾部，中间内容嵌入iframe内容子页面，如果在当前页面进行跳转操作，也是在iframe中进行跳转，而如果点击尾部按钮切换模块、页面，那...
- 在Spring Boot中使用 jose4j 实现 JSON Web Token (JWT)
-
JSONWebToken或JWT作为服务之间安全通信的一种方式而闻名。...
- Spring Boot使用AOP方式实现统一的Web请求日志记录?
-
AOP简介AOP(AspectOrientedProgramming)，面相切面编程，是通过代码预编译与运行时动态代理的方式来实现程序的统一功能维护的方案。AOP作为Spring框架的核心内容，通...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
- 一个令人头秃的问题，Logback 日志级别设置竟然无效?
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
- 火了!阿里P8架构师编写堪称神级SpringBoot手册，GitHub星标99+
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
- 看完SpringBoot源码后，整个人都精神了
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)