上一篇：前言

創建項目方式

創建基於mui的app的項目的方式有很多種：

筆者選用最簡單的模板（因爲這樣才能最靈活的演示整個mui開發app的教程）：

點擊創建(其中guide.html是我自己創建成功後新建的文件)：

功能1：引導頁

初次使用app，或者版本更迭，都需要引導頁來展示app的新功能。

引導頁一般需要全屏顯示，這樣看起來效果更好如下：

引導頁顯示

引導頁的顯示程序直接放在首頁裏頭，即index.html裏頭

代碼如下：

mui.init({
		statusBarBackground: '#f7f7f7'
	});
	mui.plusReady(function() {
		//讀取本地存儲，檢查是否爲首次啓動
		var showGuide = plus.storage.getItem("lauchFlag");
		//僅支持豎屏顯示
		plus.screen.lockOrientation("portrait-primary");
		if(showGuide) {
			//有值，說明已經顯示過了，無需顯示；
			//關閉splash頁面；
			plus.navigator.closeSplashscreen();
			plus.navigator.setFullscreen(false);
		} else {
			//顯示啓動導航
			mui.openWindow({
				id: 'guide',
				url: 'guide.html',
				styles: {
					popGesture: "none"
				},
				show: {
					aniShow: 'none'
				},
				waiting: {
					autoShow: false
				}
			});
		}
	})

引導頁代碼模板

引導頁的程序模板即guide.html,如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello GAT</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<style>
			#close {
				position: absolute;
				width: 160px;
				left: 50%;
				margin-left: -80px;
				bottom: 15%;
				padding: 10px;
				color: #fff;
				border-color: #fff;
			}
			.item-logo {
				width: 100%;
				height: 100%;
				position: relative;
			}
			.item-logo a {
				width: 200px;
				height: 200px;
				display: block;
				border: 1px solid #FFFFFF;
				border-color: rgba(255, 255, 255, 0.5);
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
				font-size: 40px;
				color: #fff;
				position: absolute;
				top: 15%;
				left: 50%;
				margin-left: -100px;
			}
			.animate {
				position: absolute;
				left: 0;
				bottom: 15%;
				width: 100%;
				color: #fff;
				display: -moz-box;
			}
			.animate h2 {
				text-align: center;
				margin-bottom: 20px;
			}
			.animate li {
				width: 50%;
				height: 30px;
				line-height: 30px;
				list-style: none;
				font-size: 16px;
				text-align: right;
			}
			.animate li:nth-child(3) {
				text-align: left;
				float: right;
			}
			.animated {
				-webkit-animation-duration: 1s;
				-webkit-animation-play-state: paused;
				-webkit-animation-fill-mode: both;
			}
			.guide-show .bounceInDown {
				-webkit-animation-name: bounceInDown;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 1s;
				display: block;
			}
			.guide-show .bounceInLeft {
				-webkit-animation-name: bounceInLeft;
				display: block;
				-webkit-animation-play-state: running;
			}
			.guide-show .bounceInRight {
				-webkit-animation-name: bounceInRight;
				display: block;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 0.5s;
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -3000px, 0);
					transform: translate3d(0, -3000px, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -5px, 0);
					transform: translate3d(0, -5px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 3px, 0);
					transform: translate3d(0, 3px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInLeft {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(-3000px, 0, 0);
					transform: translate3d(-3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(25px, 0, 0);
					transform: translate3d(25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(-10px, 0, 0);
					transform: translate3d(-10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(5px, 0, 0);
					transform: translate3d(5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInRight {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(3000px, 0, 0);
					transform: translate3d(3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(-25px, 0, 0);
					transform: translate3d(-25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(10px, 0, 0);
					transform: translate3d(10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(-5px, 0, 0);
					transform: translate3d(-5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
		</style>
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">
				<!-- 第一張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #D74B28">
						<a href="#">
						GAT
						</a>
						<div class="animate guide-show">
							<h2 class="animated bounceInDown">小巧高能</h2>
							<li class="animated bounceInLeft">熱點、備忘錄</li>
							<li class="animated bounceInRight">點名...一應俱全</li>
						</div>
					</div>
				</div>
				<!-- 第二張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #02C1ED;">
						<a href="#">
						GAT
						</a>
						<div id="tips-2" class="animate mui-hidden">
							<h2 class="animated bounceInDown">可愛主題</h2>
							<li class="animated bounceInLeft">學生的視角爲設計思路</li>
							<li class="animated bounceInRight">老師的審美爲審覈標準</li>
						</div>
					</div>
				</div>
				<!-- 第三張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #67C962;">
						<a href="#">
						GAT
						</a>
						<div id="tips-3" class="animate mui-hidden">
							<h2 class="animated bounceInDown">流暢體驗</h2>
							<li class="animated bounceInLeft">h5+技術的應用</li>
							<li class="animated bounceInRight">讓你嗨起來不卡頓</li>
						</div>
					</div>
				</div>
				<!-- 第四張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #FCD208;">
						<a href="#">
						GAT
						</a>
						<div class="animate">
							<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即體驗</button>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script>
			mui.plusReady(function() {
				plus.navigator.setFullscreen(true);
				plus.navigator.closeSplashscreen();
			});
			//立即體驗按鈕點擊事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("lauchFlag", "true");
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
			}, false);
			//圖片切換時，觸發動畫
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是從0開始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3){
			 		var item = document.getElementById("tips-"+index);
			 		if(item.classList.contains("mui-hidden")){
			 			item.classList.remove("mui-hidden");
			 			item.classList.add("guide-show");
			 		}
			 	}
			});
			
		</script>
	</body>

</html>

引導頁全屏顯示設置

如果沒有設置全屏，那麼手機屏幕的上面的狀態欄會是白色的，下面確實引導頁的頁面顏色，看起來很不協調

全屏設置需要再manifest.json文件裏頭添加屬性。

manifest.json文件就是：

添加的代碼如下：

"fullScreen":true

引導頁跳轉首頁

關閉引導頁，並進入首頁：

此時首頁是最簡單的，什麼內容都沒有（看到的首頁兩個字，也是我手動添加到index.html的body裏頭去的）。

功能2：首頁選項卡設計

類似qq、微信底部有四個選項這樣的內容。我們也需要給我們app設計這麼一些內容。大致如下：

其實mui提供的組件非常全面，基本上我們需要用到的方方面面都有。

選項卡依賴文件

選項卡只要用默認的依賴文件，即mui.min.js 和mui.min.css即可

選項卡代碼模板

<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active" href="#tabbar">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首頁</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-chat">
		<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
		<span class="mui-tab-label">消息</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-contact">
		<span class="mui-icon mui-icon-contact"></span>
		<span class="mui-tab-label">通訊錄</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-map">
		<span class="mui-icon mui-icon-gear"></span>
		<span class="mui-tab-label">設置</span>
	</a>
</nav>

效果如下：

選項卡更改圖標

更改圖標只要上mui的官方網站找對應的圖標庫（訪問地址：https://dev.dcloud.net.cn/mui/ui/#icon）即可。

注意一點：mui官網的圖標庫有兩種：

一種是默認的圖標庫

一種是拓展的圖標庫。

這兩種的用法不太一樣。

個人推薦：所有的選項卡統一使用一種圖標，因爲這兩種圖標的樣式有點差別。

使用成果展示和代碼

使用如下代碼：

<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首頁</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-list"></span>
			<span class="mui-tab-label">點名</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">聯繫人</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-paperplane"></span>
			<span class="mui-tab-label">通知</span>
		</a>
	</nav>
</body>

效果如下：

教程-1源碼分享：

至此，我們已完成了引導頁的設計以及首頁底部選項卡的設計。涉及到兩個頁面：

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>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首頁</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-list"></span>
			<span class="mui-tab-label">點名</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">聯繫人</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-paperplane"></span>
			<span class="mui-tab-label">通知</span>
		</a>
	</nav>
</body>
<script src="./js/mui.min.js"></script>
<script>
	mui.init({
		statusBarBackground: '#f7f7f7'
	});
	mui.plusReady(function() {
		//讀取本地存儲，檢查是否爲首次啓動
		var showGuide = plus.storage.getItem("lauchFlag");
		//僅支持豎屏顯示
		plus.screen.lockOrientation("portrait-primary");
		if(showGuide) {
			//有值，說明已經顯示過了，無需顯示；
			//關閉splash頁面；
			plus.navigator.closeSplashscreen();
			plus.navigator.setFullscreen(false);
		} else {
			//顯示啓動導航
			mui.openWindow({
				id: 'guide',
				url: 'guide.html',
				styles: {
					popGesture: "none"
				},
				show: {
					aniShow: 'none'
				},
				waiting: {
					autoShow: false
				}
			});
		}
	})
</script>
</html>

guide.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello GAT</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<style>
			#close {
				position: absolute;
				width: 160px;
				left: 50%;
				margin-left: -80px;
				bottom: 15%;
				padding: 10px;
				color: #fff;
				border-color: #fff;
			}
			.item-logo {
				width: 100%;
				height: 100%;
				position: relative;
			}
			.item-logo a {
				width: 200px;
				height: 200px;
				display: block;
				border: 1px solid #FFFFFF;
				border-color: rgba(255, 255, 255, 0.5);
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
				font-size: 40px;
				color: #fff;
				position: absolute;
				top: 15%;
				left: 50%;
				margin-left: -100px;
			}
			.animate {
				position: absolute;
				left: 0;
				bottom: 15%;
				width: 100%;
				color: #fff;
				display: -moz-box;
			}
			.animate h2 {
				text-align: center;
				margin-bottom: 20px;
			}
			.animate li {
				width: 50%;
				height: 30px;
				line-height: 30px;
				list-style: none;
				font-size: 16px;
				text-align: right;
			}
			.animate li:nth-child(3) {
				text-align: left;
				float: right;
			}
			.animated {
				-webkit-animation-duration: 1s;
				-webkit-animation-play-state: paused;
				-webkit-animation-fill-mode: both;
			}
			.guide-show .bounceInDown {
				-webkit-animation-name: bounceInDown;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 1s;
				display: block;
			}
			.guide-show .bounceInLeft {
				-webkit-animation-name: bounceInLeft;
				display: block;
				-webkit-animation-play-state: running;
			}
			.guide-show .bounceInRight {
				-webkit-animation-name: bounceInRight;
				display: block;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 0.5s;
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -3000px, 0);
					transform: translate3d(0, -3000px, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -5px, 0);
					transform: translate3d(0, -5px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 3px, 0);
					transform: translate3d(0, 3px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInLeft {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(-3000px, 0, 0);
					transform: translate3d(-3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(25px, 0, 0);
					transform: translate3d(25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(-10px, 0, 0);
					transform: translate3d(-10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(5px, 0, 0);
					transform: translate3d(5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInRight {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(3000px, 0, 0);
					transform: translate3d(3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(-25px, 0, 0);
					transform: translate3d(-25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(10px, 0, 0);
					transform: translate3d(10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(-5px, 0, 0);
					transform: translate3d(-5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
		</style>
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">
				<!-- 第一張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #D74B28">
						<a href="#">
						GAT
						</a>
						<div class="animate guide-show">
							<h2 class="animated bounceInDown">小巧高能</h2>
							<li class="animated bounceInLeft">熱點、備忘錄</li>
							<li class="animated bounceInRight">點名...一應俱全</li>
						</div>
					</div>
				</div>
				<!-- 第二張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #02C1ED;">
						<a href="#">
						GAT
						</a>
						<div id="tips-2" class="animate mui-hidden">
							<h2 class="animated bounceInDown">可愛主題</h2>
							<li class="animated bounceInLeft">學生的視角爲設計思路</li>
							<li class="animated bounceInRight">老師的審美爲審覈標準</li>
						</div>
					</div>
				</div>
				<!-- 第三張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #67C962;">
						<a href="#">
						GAT
						</a>
						<div id="tips-3" class="animate mui-hidden">
							<h2 class="animated bounceInDown">流暢體驗</h2>
							<li class="animated bounceInLeft">h5+技術的應用</li>
							<li class="animated bounceInRight">讓你嗨起來不卡頓</li>
						</div>
					</div>
				</div>
				<!-- 第四張 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #FCD208;">
						<a href="#">
						GAT
						</a>
						<div class="animate">
							<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即體驗</button>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script>
			mui.plusReady(function() {
				plus.navigator.setFullscreen(true);
				plus.navigator.closeSplashscreen();
			});
			//立即體驗按鈕點擊事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("lauchFlag", "true");
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
			}, false);
			//圖片切換時，觸發動畫
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是從0開始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3){
			 		var item = document.getElementById("tips-"+index);
			 		if(item.classList.contains("mui-hidden")){
			 			item.classList.remove("mui-hidden");
			 			item.classList.add("guide-show");
			 		}
			 	}
			});
			
		</script>
	</body>

</html>

mui開發app教程-1

創建項目方式

功能1：引導頁

引導頁顯示

引導頁代碼模板

引導頁全屏顯示設置

引導頁跳轉首頁

功能2：首頁選項卡設計

選項卡依賴文件

選項卡代碼模板

選項卡更改圖標

使用成果展示和代碼

教程-1源碼分享：

index.html

guide.html

ziw2pdf

apisix~helm方式的部署到k8s

firmeye - IoT固件漏洞挖掘工具

QComboBox使用的細節

pyinstaller打包exe運行exe報錯看不到錯誤內容（pyinstaller打包的exe怎麼查看運行錯誤）

mui開發app教程-前言

mui開發app教程-2

PyQt5 打包沒有icon圖標，百度方法沒用，終極解決之道究竟在哪（pyinstaller打包成exe文件，雙擊打開，沒有顯示圖標）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結