百度360必应搜狗淘宝本站头条
tomcat 乱码无法与服务器建立安全连接是什么意思sysv-rc-confdocker映射容器目录到宿主机internet explorer 增强的安全配置已启用
当前位置：网站首页 > 技术文章 > 正文

SpringBoot系列——基于mui的H5套壳APP开发web框架

nanshan 2025-01-04 22:11 15 浏览 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

若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.

相关推荐

0722-6.2.0-如何在RedHat7.2使用rpm安装CDH(无CM)

文档编写目的在前面的文档中，介绍了在有CM和无CM两种情况下使用rpm方式安装CDH5.10.0，本文档将介绍如何在无CM的情况下使用rpm方式安装CDH6.2.0，与之前安装C5进行对比。环境介绍：...

ARM64 平台基于 openEuler + iSula 环境部署 Kubernetes

为什么要在arm64平台上部署Kubernetes，而且还是鲲鹏920的架构。说来话长。。。此处省略5000字。介绍下系统信息；o架构：鲲鹏920(Kunpeng920)oOS：ope...

生产环境starrocks 3.1存算一体集群部署

集群规划FE：节点主要负责元数据管理、客户端连接管理、查询计划和查询调度。>3节点。BE:节点负责数据存储和SQL执行。>3节点。CN:无存储功能能的BE。环境准备CPU检查JDK...

在CentOS上添加swap虚拟内存并设置优先级

现如今很多云服务器都会自己配置好虚拟内存，当然也有很多没有配置虚拟内存的，虚拟内存可以让我们的低配服务器使用更多的内存，可以减少很多硬件成本，比如我们运行很多服务的时候，内存常常会满，当配置了虚拟内存...

国产深度(deepin)操作系统优化指南

1.升级内核随着deepin版本的更新，会自动升级系统内核，但是我们依旧可以通过命令行手动升级内核，以获取更好的性能和更多的硬件支持。具体操作：-添加PPAs使用以下命令添加PPAs：```...

postgresql-15.4 多节点主从(读写分离)

1、下载软件[root@TX-CN-PostgreSQL01-252software]#wgethttps://ftp.postgresql.org/pub/source/v15.4/postg...

Docker 容器 Java 服务内存与 GC 优化实施方案

一、设置Docker容器内存限制（生产环境建议）1.查看宿主机可用内存bashfree-h#示例输出（假设宿主机剩余16GB可用内存）#Mem:64G...

虚拟内存设置、解决linux内存不够问题

虚拟内存设置（解决linux内存不够情况）背景介绍　　Memory指机器物理内存，读写速度低于CPU一个量级，但是高于磁盘不止一个量级。所以，程序和数据如果在内存的话，会有非常快的读写速度。但是，内存...

Elasticsearch性能调优(5):服务器配置选择

在选择elasticsearch服务器时，要尽可能地选择与当前业务量相匹配的服务器。如果服务器配置太低，则意味着需要更多的节点来满足需求，一个集群的节点太多时会增加集群管理的成本。如果服务器配置太高，...

Es如何落地

一、配置准备节点类型CPU内存硬盘网络机器数操作系统data节点16C64G2000G本地SSD所有es同一可用区3(ecs)Centos7master节点2C8G200G云SSD所有es同一可用区...

针对Linux内存管理知识学习总结

现在的服务器大部分都是运行在Linux上面的，所以，作为一个程序员有必要简单地了解一下系统是如何运行的。对于内存部分需要知道：地址映射内存管理的方式缺页异常先来看一些基本的知识，在进程看来，内存分为内...

MySQL进阶之性能优化

概述MySQL的性能优化，包括了服务器硬件优化、操作系统的优化、MySQL数据库配置优化、数据库表设计的优化、SQL语句优化等5个方面的优化。在进行优化之前，需要先掌握性能分析的思路和方法，找出问题，...

Linux Cgroups(Control Groups)原理

LinuxCgroups（ControlGroups）是内核提供的资源分配、限制和监控机制，通过层级化进程分组实现资源的精细化控制。以下从核心原理、操作示例和版本演进三方面详细分析：一、核心原理与...

linux 常用性能优化参数及理解

1.优化内核相关参数配置文件/etc/sysctl.conf配置方法直接将参数添加进文件每条一行.sysctl-a可以查看默认配置sysctl-p执行并检测是否有错误例如设置错了参数:[roo...

如何在 Linux 中使用 Sysctl 命令?

sysctl是一个用于配置和查询Linux内核参数的命令行工具。它通过与/proc/sys虚拟文件系统交互，允许用户在运行时动态修改内核参数。这些参数控制着系统的各种行为，包括网络设置、文件...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表