前言

  大致原理:创建一个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 切换仅回显页面,在当前页面点击才加载(切换为首次加载除外)

  切换方式也很简单,在配置文件进行修改即可

#底部按钮切换模式:1 切换立即加载初始url  2 切换仅回显页面,在当前页面点击才加载(切换为首次加载除外)
huanzi.buttom.switch.mode=

  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

基于mui的H5套壳APP开发web框架分享的更多相关文章

  1. webview的简单介绍和手写一个H5套壳的webview

    1.webview是什么?作用是什么?和浏览器有什么关系? Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做 ...

  2. [h5+api]移动app开发用到的微信好友,朋友圈,qq好友,新浪微博分享合集

    适用H5+环境,能够使用plus方法的移动app中 /** * Created by HBuilder. * User: tyx * Date: 2018-11-21 * Time: 17:28:51 ...

  3. Python全栈开发-web框架之django

    一:web框架 什么是web框架? Web应用框架(Web application framework)是一种开发框架,用来支持动态网站.网络应用程序及网络服务的开发.这种框架有助于减轻网页开发时共通 ...

  4. [Python web开发] Web框架开发基础 (一)

    Python WEB框架 WSGI,WEB Server Gateway Interface,可以看做是一种底层协议,它规定了服务器程序和应用程序各自实现上面接口.Python的实现称为wsgiref ...

  5. 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

    定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...

  6. 基于Mui与H5+开发webapp的Android原生工程打包步骤(使用新版本5+SDK与Android studio)(部分内容转自dcloud官网)

    文章背景: dcloud官网给出的打包步骤对于有一定安卓打包基础的同学来说比较容易掌握,但是对于webapp小白来讲有的地方可能没有说的太具体.下面我给大家介绍的详细一点,保证大家按照步骤就能学会打包 ...

  7. 基于EF6的快速开发Web框架——Swift.Net

    Swift.Net This Is A Light-Weight And Fast-Develop .Net Framework. Usage STEP 1 Create Your Entities ...

  8. python开发-web框架之diango-----Models

    这篇博客是紧连上一篇博客的,因为内容较多,这里介绍的是Models这一部分的内容 七:Models 数据库的配置 1    django默认支持sqlite,mysql, oracle,postgre ...

  9. 第5章 使用MUI与H5+构建移动端app

    H5+是JS封装的工具集合,通过H5+我们就可以使用JS的方式去调用到我们手机端上的一些原生的组件. http://dev.dcloud.net.cn/mui/ http://dev.dcloud.n ...

随机推荐

  1. 1. chromedriver的下载和配置

    使用selenium时,需要用到不同浏览器的driver. 我常用chromedriver,所以先记录chromedriver的使用和配置.其他浏览器的driver配置大同小异. 一. 确定浏览器的版 ...

  2. 居家办公之后,鹅厂小哥发现Web开发竟能助力身体健康!

    疫情特殊时期,各企业.学校纷纷启用远程办公和学习的方式,在办公期间,除了要完成日常工作安排,还要照顾自身的饮食起居,在高强度的工作节奏和缺少运动锻炼的情况之下,如何及早发现健康隐患,快乐办公?且看鹅厂 ...

  3. [剑指offer]6.从尾到头打印链表+18.删除链表节点

    链表 6.从尾到头打印链表 输入一个链表的头节点,从尾到头反过来返回每个节点的值(用数组返回). 方法一 迭代 创建空列表res,将链表值head.val依次存进res,返回翻转后的res 代码 cl ...

  4. HTTPS加密传输过程

    HTTPS加密传输过程 HTTPS全称Hyper Text Transfer Protocol over SecureSocket Layer,是以安全为目标的HTTP通道,在HTTP的基础上通过传输 ...

  5. css第二波

    目录 css第二波 盒子模型 浮动 三种取值 清除浮动 浮动页面布局 溢出 定位 相对定位 relative(相对定位) 绝对定位 absolute(绝对定位) 固定定位 fixed(固定) 模糊框 ...

  6. ML-Agents(三)3DBall例子

    ML-Agents(三)3DBall例子 前一周忙着公司的考试,都没有怎么学新的,今天补上~ 之后的记录,我准备先只研究官方的示例,主要是把研究过程中的疑惑和想法记下来.首先我先补充一下如何利用GPU ...

  7. 题解 P2755 【洗牌问题】

    这是本人的第一篇题解 请多多宽恕 这一道题其实不要用数组 我们来观察一下n=3时的情况: 原: 1 2 3 4 5 6 4 1 5 2 6 3 2 4 6 1 3 5 1 2 3 4 5 6 我们去观 ...

  8. 为什么你的程序配了classpath还是找不到类

    classpath简介 classpath是java程序时拥有的一个系统变量,这个变量可以通过如下方式获取 System.out.println(System.getProperty("ja ...

  9. TensorFlow系列专题(五):BP算法原理

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/ ,学习更多的机器学习.深度学习的知识! 一.反向传播算法简介 二.前馈计算的过程 第一层隐藏层的计算 第 ...

  10. spring源码阅读笔记06:bean加载之准备创建bean

    上文中我们学习了bean加载的整个过程,我们知道从spring容器中获取单例bean时会先从缓存尝试获取,如果缓存中不存在已经加载的单例bean就需要从头开始bean的创建,而bean的创建过程是非常 ...