基於mui的H5套殼APP開發web框架分享

qch發表於2020-04-18
UIH5APPWeb框架

　　前言

　　建立一個main主頁面，只有主頁面有頭部、尾部，中間內容嵌入iframe內容子頁面，如果在當前頁面進行跳轉操作，也是在iframe中進行跳轉，而如果點選尾部按鈕切換模組、頁面，那就切換iframe標籤的src進行更新url，這樣我們在跳轉頁面時，頭部、尾部都不會重新整理，瀏覽效果更佳，配合mui前端框架，使操作體驗更接近原生App

　　如果不用考慮APP上架稽核的問題，可以採用H5套殼的方式開發APP，可以降低開發人員的學習成本，uni-app + H5這樣的套殼Web App，會Web專案開發的開發就能輕鬆上手

　　得益於之前的總結（https://www.cnblogs.com/huanzi-qch/p/11972723.html），基於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彈窗效果，請移步官網文件檢視！

 

　　自定義封裝

 

　　物理按鈕監聽

 

 

 

　　後記

　　注意，瀏覽器訪問需要開啟控制檯，切換到移動端模式，還有我們的介面卡判斷過於簡單，有些情況下會判斷錯誤，例如360瀏覽器

　　

　　程式碼其實不多，主要涉及都父、子視窗相互呼叫的問題，基於mui的H5套殼APP開發web框架暫時記錄到這，後續再進行補充

 

　　程式碼開源

　　程式碼已經開源、託管到我的GitHub、碼雲：

　　GitHub：https://github.com/huanzi-qch/springBoot

　　碼雲：https://gitee.com/huanzi-qch/springBoot

相關文章