當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

mui 启动页和引导页

發布時間：2024/1/18 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 mui 启动页和引导页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、啟動頁和引導頁的概念

“啟動頁”（splash）：app的啟動界面，每次啟動都會看到的（每次打開QQ都會看到一只企鵝）。
“引導頁”（guide）：guide是否展示是可控的，通常首次啟動時顯示，從第二次啟動開始，引導頁就不再顯示，而是直接進入App主界面了。

二、啟動頁的設置

1.?在manifest.json文件中

在manifest.json文件的“啟動圖片（splash）配置”里設置，可以設置“延時關閉啟動界面”或者“手動關閉啟動界面”，實際開發中，通常需要設置手動關閉splash（HBuilder7.1版本后，啟動界面不調用此方法超過6秒后會自動關閉）。

2.?在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>

2. 在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:;"><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>

注意：關于<a href="javascript:;"></a>及<a href="#"></a>

<a href="javascript:;"></a>：

”javascript: 是一個偽協議。它可以讓我們通過一個鏈接來調用javascript函數。但是由于這個函數為空，所以我們調用的就是一個空函數，并不會發生任何實質性的改變。同時可以實現a標簽的點擊運行。

<a href="#"></a>：

href="#"是指聯接到當前頁面，其實是無意義的，頁面也不會刷新。這是一個錨鏈接。

如果當頁面里面的內容很多的時候，有了上下滾動條，使用href=“#"會發生跳轉到頁面頂部的問題。而使用href="javascript:;" 就可以避免頁面的亂跳！所以，如果我們想要寫一個死的a標簽，使用<a href="javascript:;"></a>會更有利于增加我們的頁面的用戶友好度！

如果引導頁不能流暢切換，可以參見http://www.cnblogs.com/nangong/p/7e3200a9374c993a1e94b3005ee2a71e.html

總結

以上是生活随笔為你收集整理的mui 启动页和引导页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： eNSP华为模拟器使用——（9）eNSP
下一篇： [zz] 数字芯片后端实现：LVT, R