mui 啟動頁和引導頁
一、啟動頁和引導頁的概念 “啟動頁”（splash）：app的啟動介面，每次啟動都會看到的（每次開啟QQ都會看到一隻企鵝）。 “引導頁”（guide）：guide是否展示是可控的，通常首次啟動時顯示，從第二次啟動開始，引導頁就不再顯示，而是直接進入App主介面了。 二、啟動頁的設定
-
在manifest.json檔案中 在manifest.json檔案的“啟動圖片（splash）配置”裡設定，可以設定“延時關閉啟動介面”或者“手動關閉啟動介面”，實際開發中，通常需要設定手動關閉splash（HBuilder7.1版本後，啟動介面不呼叫此方法超過6秒後會自動關閉）。
-
在main.html檔案中 手動關閉啟動頁的程式碼
plus.navigator.closeSplashscreen();
二、引導頁的設定 1.在index.html中： 按照Hello mui啟動頁的邏輯，首次啟動展示引導頁，之後啟動不再展示。那麼就意味著，我們需要一個標識來確定，App是否已經啟動過。我們可以在本地儲存一個key，（如下例launchFlag），來作為已經啟動過App的標識。在入口index.html中，就可以讀取這個key，來決定是否展示引導頁。 index.html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>入口頁面</title> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> body { background-color: black; } </style> </head> <body> <script src="js/mui.min.js"></script> <script type="text/javascript" charset="utf-8"> mui.init(); mui.plusReady(function() { /** * 獲取本地儲存中launchFlag的值 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem * 若存在，說明不是首次啟動，直接進入首頁； * 若不存在，說明是首次啟動，進入引導頁； */ var launchFlag = plus.storage.getItem("launchFlag"); if(launchFlag) { mui.openWindow({ url: "main.html", id: "main", extras: { mark: "index" //額外的引數，僅僅是個標識，實際開發中不用； } }); } else { mui.openWindow({ url: "guide.html", id: "guide" }); } }); </script> </body> </html>
- 在guide.html中：
我們需要放置我們想要展示的內容，利用mui的slider元件，來製作一套引導資訊。 如果使用圖片的話，建議大家按照iPhone6 Plus的尺寸製作（其實就是往大了做），然後利用5+提供的方法計算螢幕正確的寬高，設定圖片的寬高來撐滿螢幕。 在最後一個引導介面提供一個App主介面入口，也就是“開始體驗”這種按鈕。（點選“開始體驗”的同時，設定表示App已經啟動過的標識。）
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> body { background-color: black; } .guide-img { width: 100%; } #start { position: absolute; bottom: 40px; width: 60%; left: 20%; } </style> </head> <body> <div class="mui-content"> <div class="mui-slider mui-fullscreen"> <div class="mui-slider-group"> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="images/1.jpg"> </a> </div> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="images/2.jpg"> </a> </div> <div class="mui-slider-item"> <a href="javascript:;"> <img class="guide-img" src="images/3.jpg"> </a> </div> <div class="mui-slider-item"> <a href="javascript:;"><!--javascript: 是一個偽協議,javascript:是表示在觸發<a>預設動作時，執行一段JavaScript程式碼，而 javascript:; 表示什麼都不執行，這樣點選<a>時就沒有任何反應。--> <img class="guide-img" src="images/4.jpg"> <button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">開始體驗</button> </a> </div> </div> </div> </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function() { /** * 獲取系統狀態列高度 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight */ var sh = plus.navigator.getStatusbarHeight(); /** * 獲取裝置螢幕高度解析度以及寬度解析度 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth */ var h = plus.screen.resolutionHeight; var w = plus.screen.resolutionWidth; /** * 設定圖片高度，這裡圖片並不規範； * 實際開發中，建議大家制作iphone6plus規格的圖片； */ var imgs = document.querySelectorAll(".guide-img"); for(var i = 0, len = imgs.length; i < len; i++) { imgs[i].style.height = (h - sh) + "px"; imgs[i].style.width = w + "px"; } /** * 手動關閉啟動頁 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen */ plus.navigator.closeSplashscreen(); document.getElementById("start").addEventListener("tap", function() { /** * 向本地儲存中設定launchFlag的值，即啟動標識； * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem */ plus.storage.setItem("launchFlag", "true"); mui.openWindow({ url: "main.html", id: "main", extras: { mark: "gudie" //同樣，這裡也只是個標識，實際開發中並不用； } }); }); }); /** * 重寫mui.back()，什麼都不執行，反之使用者返回到入口頁； */ mui.back = function() {}; </script> </body> </html>
注意：關於及 ： ”javascript: 是一個偽協議。它可以讓我們通過一個連結來呼叫javascript函式。但是由於這個函式為空，所以我們呼叫的就是一個空函式，並不會發生任何實質性的改變。同時可以實現a標籤的點選執行。 ： href="#"是指聯接到當前頁面，其實是無意義的，頁面也不會重新整理。這是一個錨鏈接。 如果當頁面裡面的內容很多的時候，有了上下滾動條，使用href=“#"會發生跳轉到頁面頂部的問題。而使用href=“javascript:;” 就可以避免頁面的亂跳！所以，如果我們想要寫一個死的a標籤，使用會更有利於增加我們的頁面的使用者友好度！ 如果引導頁不能流暢切換，可以參見http://www.cnblogs.com/nangong/p/7e3200a9374c993a1e94b3005ee2a71e.html
感謝分享https://blog.csdn.net/sophiafei_2000/article/details/78142162