前言
大致原理：創建一個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
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、碼雲：