SpringBoot系列——基于mui的H5套壳APP开发web框架
ztj100 2025-05-14 18:29 32 浏览 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
若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.
相关推荐
- 人生苦短，我要在VSCode里面用Python
-
轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里，VisualStudioCode（以下简称VSCode）可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...
- 亲测可用:Pycharm2019.3专业版永久激活教程
-
概述随着2020年的到来，又有一批Pycharm的激活码到期了，各位同仁估计也是在到处搜索激活方案，在这里，笔者为大家收录了一个永久激活的方案，亲测可用，欢迎下载尝试：免责声明本项目只做个人学习研究之...
- Python新手入门很简单（python教程入门）
-
我之前学习python走过很多的歧途，自学永远都是瞎猫碰死耗子一样，毫无头绪。后来心里一直都有一个做头条知识分享的梦，希望自己能够帮助曾经类似自己的人，于是我来了，每天更新5篇Python文章，喜欢的...
- Pycharm的设置和基本使用（pycharm运行设置）
-
这篇文章，主要是针对刚开始学习python语言，不怎么会使用pycharm的童鞋们；我来带领大家详细了解下pycharm页面及常用的一些功能，让大家能通过此篇文章能快速的开始编写python代码。一...
- 依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!
-
我真的想知道作者到底咋把PyTorch教程整得这么牛的啊？明明在内容上已经足以成为付费教材了，但作者偏要免费开源给大家学习！...
- 手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace
-
这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace，并手把手教你如何在自己的电脑端进行部署和测试运行，运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世，...
- 进入Python的世界02外篇-Pycharm配置Pyqt6
-
为什么这样配置，要开发带UI的python也只能这样了，安装过程如下：一安装工具打开终端：pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin，安装汉化插件，...
- vs code如何配置使用Anaconda（vscode调用anaconda库）
-
上一篇文章中（Anaconda使用完全指南），我们能介绍了Anaconda的安装和使用，以及如何在pycharm中配置Anaconda。本篇，将继续介绍在vscode中配置conda...
- pycharm中conda解释器无法配置（pycharm配置anaconda解释器）
-
之前用的好好的pycharm正常配置解释器突然不能用了？可以显示有这个环境然后确认后可以conda正在配置解释器，但是进度条结束后还是不成功！！试过了pycharm重启，pycharm重装，anaco...
- Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!
-
我们都知道现在已经进入了Rust时代，不仅很多终端常用的工具都被rust重写了，而且现在很多前端工具也开始被Rust接手了，这不，现在就出现了一款JS工具管理工具，有了它，你可以管理多版本的js工具，...
- 开发者的福音，ElectronEgg: 新一代桌面应用开发框架
-
今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员，以前面对这项任务桌面应用开发在时，可能会感到无从下手，甚至觉得这是一项困难的挑战。ElectronEgg的出现，它能...
- 超强经得起考验的低代码开发平台Frappe
-
#挑战30天在头条写日记#开始进行管理软件的开发来讲，如果从头做起不是不可以，但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的，将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...
- 一文带你搞懂Vue3 底层源码（vue3核心源码解析）
-
作者：妹红大大转发链接：https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...
- 基于小程序 DSL(微信、支付宝)的，可扩展的多端研发框架
-
Mor(发音为/mr/，类似more)，是饿了么开发的一款基于小程序DSL的，可扩展的多端研发框架，使用小程序原生DSL构建，使用者只需书写一套（微信或支付宝）小程序，就可以通过Mor...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 人生苦短，我要在VSCode里面用Python
- 亲测可用:Pycharm2019.3专业版永久激活教程
- Python新手入门很简单（python教程入门）
- Pycharm的设置和基本使用（pycharm运行设置）
- 依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!
- 手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace
- 进入Python的世界02外篇-Pycharm配置Pyqt6
- vs code如何配置使用Anaconda（vscode调用anaconda库）
- pycharm中conda解释器无法配置（pycharm配置anaconda解释器）
- Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!
- 标签列表
-
- 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)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- 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)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)