當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

mui 启动页和引导页

發(fā)布時(shí)間：2024/1/18 编程问答 45 豆豆

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

一、啟動(dòng)頁(yè)和引導(dǎo)頁(yè)的概念

“啟動(dòng)頁(yè)”（splash）：app的啟動(dòng)界面，每次啟動(dòng)都會(huì)看到的（每次打開(kāi)QQ都會(huì)看到一只企鵝）。
“引導(dǎo)頁(yè)”（guide）：guide是否展示是可控的，通常首次啟動(dòng)時(shí)顯示，從第二次啟動(dòng)開(kāi)始，引導(dǎo)頁(yè)就不再顯示，而是直接進(jìn)入App主界面了。

二、啟動(dòng)頁(yè)的設(shè)置

1.?在manifest.json文件中

在manifest.json文件的“啟動(dòng)圖片（splash）配置”里設(shè)置，可以設(shè)置“延時(shí)關(guān)閉啟動(dòng)界面”或者“手動(dòng)關(guān)閉啟動(dòng)界面”，實(shí)際開(kāi)發(fā)中，通常需要設(shè)置手動(dòng)關(guān)閉splash（HBuilder7.1版本后，啟動(dòng)界面不調(diào)用此方法超過(guò)6秒后會(huì)自動(dòng)關(guān)閉）。

2.?在main.html文件中

手動(dòng)關(guān)閉啟動(dòng)頁(yè)的代碼

plus.navigator.closeSplashscreen();二、引導(dǎo)頁(yè)的設(shè)置

1.在index.html中：

按照Hello mui啟動(dòng)頁(yè)的邏輯，首次啟動(dòng)展示引導(dǎo)頁(yè)，之后啟動(dòng)不再展示。那么就意味著，我們需要一個(gè)標(biāo)識(shí)來(lái)確定，App是否已經(jīng)啟動(dòng)過(guò)。我們可以在本地存儲(chǔ)一個(gè)key，（如下例launchFlag），來(lái)作為已經(jīng)啟動(dòng)過(guò)App的標(biāo)識(shí)。在入口index.html中，就可以讀取這個(gè)key，來(lái)決定是否展示引導(dǎo)頁(yè)。

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>入口頁(yè)面</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() {/*** 獲取本地存儲(chǔ)中l(wèi)aunchFlag的值* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem* 若存在，說(shuō)明不是首次啟動(dòng)，直接進(jìn)入首頁(yè)；* 若不存在，說(shuō)明是首次啟動(dòng)，進(jìn)入引導(dǎo)頁(yè)；*/var launchFlag = plus.storage.getItem("launchFlag");if(launchFlag) {mui.openWindow({url: "main.html",id: "main",extras: {mark: "index" //額外的參數(shù)，僅僅是個(gè)標(biāo)識(shí)，實(shí)際開(kāi)發(fā)中不用；}});} else {mui.openWindow({url: "guide.html",id: "guide"});}});</script></body></html>

2. 在guide.html中：

我們需要放置我們想要展示的內(nèi)容，利用mui的slider組件，來(lái)制作一套引導(dǎo)信息。
如果使用圖片的話，建議大家按照iPhone6 Plus的尺寸制作（其實(shí)就是往大了做），然后利用5+提供的方法計(jì)算屏幕正確的寬高，設(shè)置圖片的寬高來(lái)?yè)螡M屏幕。

在最后一個(gè)引導(dǎo)界面提供一個(gè)App主界面入口，也就是“開(kāi)始體驗(yàn)”這種按鈕。（點(diǎn)擊“開(kāi)始體驗(yàn)”的同時(shí)，設(shè)置表示App已經(jīng)啟動(dòng)過(guò)的標(biāo)識(shí)。）

<!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">開(kāi)始體驗(yàn)</button></a></div></div></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.plusReady(function() {/*** 獲取系統(tǒng)狀態(tài)欄高度* http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight*/var sh = plus.navigator.getStatusbarHeight();/*** 獲取設(shè)備屏幕高度分辨率以及寬度分辨率* 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;/*** 設(shè)置圖片高度，這里圖片并不規(guī)范；* 實(shí)際開(kāi)發(fā)中，建議大家制作iphone6plus規(guī)格的圖片；*/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";}/*** 手動(dòng)關(guān)閉啟動(dòng)頁(yè)* http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen*/plus.navigator.closeSplashscreen();document.getElementById("start").addEventListener("tap", function() {/*** 向本地存儲(chǔ)中設(shè)置launchFlag的值，即啟動(dòng)標(biāo)識(shí)；* 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" //同樣，這里也只是個(gè)標(biāo)識(shí)，實(shí)際開(kāi)發(fā)中并不用；}});});});/*** 重寫(xiě)mui.back()，什么都不執(zhí)行，反之用戶返回到入口頁(yè)；*/mui.back = function() {};</script></body></html>

注意：關(guān)于<a href="javascript:;"></a>及<a href="#"></a>

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

”javascript: 是一個(gè)偽協(xié)議。它可以讓我們通過(guò)一個(gè)鏈接來(lái)調(diào)用javascript函數(shù)。但是由于這個(gè)函數(shù)為空，所以我們調(diào)用的就是一個(gè)空函數(shù)，并不會(huì)發(fā)生任何實(shí)質(zhì)性的改變。同時(shí)可以實(shí)現(xiàn)a標(biāo)簽的點(diǎn)擊運(yùn)行。

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

href="#"是指聯(lián)接到當(dāng)前頁(yè)面，其實(shí)是無(wú)意義的，頁(yè)面也不會(huì)刷新。這是一個(gè)錨鏈接。

如果當(dāng)頁(yè)面里面的內(nèi)容很多的時(shí)候，有了上下滾動(dòng)條，使用href=“#"會(huì)發(fā)生跳轉(zhuǎn)到頁(yè)面頂部的問(wèn)題。而使用href="javascript:;" 就可以避免頁(yè)面的亂跳！所以，如果我們想要寫(xiě)一個(gè)死的a標(biāo)簽，使用<a href="javascript:;"></a>會(huì)更有利于增加我們的頁(yè)面的用戶友好度！

如果引導(dǎo)頁(yè)不能流暢切換，可以參見(jiàn)http://www.cnblogs.com/nangong/p/7e3200a9374c993a1e94b3005ee2a71e.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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