混合開發

混合開發，是介於H5和原生之間的一種開發模式，既有原生的部分，也有H5的部分，結合了各自有優點，這種開發模式，既可以做到跨平臺，也能上各大應用市場。

MUI 初步的認識

https://dev.dcloud.net.cn/mui/
這是他的官網

HBulid初入時遇到的坑

Q0：Uncaught ReferenceError: plus is not defined (提示: 請在plus ready後再調用plus api)

這個報錯的話應該是你沒有添加事件，上來就運行 mui .XXX 的控件了
我解決的方案就是加個事件來觸發mui.XXX

Q1：上機運行報錯error

修改文件夾的名字，不要有橫槓 - 或是下劃線 _ 之類的符號（我找了好久的錯誤，瀏覽器能運行，到手機上就不好使了）

報錯信息如下

Q2：手機上顯示主頁怎麼調？

不用每次都修改index，而是

Q3：mui 是 5+ 封裝的

所以5+的方法一定要上手機真機上測試，手遊模擬器也行，chrome等pc瀏覽器是測不出來的，因爲沒有安卓環境
他倆的封裝關係類似 Bootstrap 和 css 之間的關係，Bootstrap 是 css 的封裝

MUI框架

Dialog 消息框

如果想要一個消息框類似如下，可以寫這樣的代碼

	<body>
		<script src="../../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<button class="btn1">彈出提示框</button>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('.btn1')
		var arr = ['取消','確定'];
		btn.onclick = function(){
			mui.confirm('這是一段內容','標題',arr,function(e){
				console.log(e);
			});
		}
	</script>

如果想把她的樣式變成IOS的，可以在confrim的參數裏添加 div

		btn.onclick = function(){
			mui.confirm('這是一段內容','標題',arr,function(e){
				console.log(e);
				/* 在下面添加	'div'	 */
			},'div');
		}

圖文列表

樣式如下
代碼如下

<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png">
		            <div class="mui-media-body">
		                幸福
		                <p class='mui-ellipsis'>能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎麼辦？</p>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png">
		            <div class="mui-media-body">
		                木屋
		                <p class='mui-ellipsis'>想要這樣一間小木屋，夏天挫冰喫瓜，冬天圍爐取暖.</p>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <img class="mui-media-object mui-pull-left" src="../../imgs/girl1.png">
		            <div class="mui-media-body">
		                CBD
		                <p class='mui-ellipsis'>烤爐模式的城，到黃昏，如同打翻的調色盤一般.</p>
		            </div>
		        </a>
		    </li>
		</ul>

側滑菜單

樣式類似這樣的

		<!-- 在最外層這個類裏改變樣式
		 mui-scalable 類似手機qq
		 mui-slide-in 菜單也會跟隨着滑動
		 -->
		<!-- 側滑導航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
		  <!-- 菜單容器 -->
		  <aside class="mui-off-canvas-left">
		    <div class="mui-scroll-wrapper">
		      <div class="mui-scroll">
		        <!-- 菜單具體展示內容 -->
		        菜單具體展示內容
		      </div>
		    </div>
		  </aside>
		  <!-- 主頁面容器 -->
		  <div class="mui-inner-wrap">
		    <!-- 主頁面標題 -->
		    <header class="mui-bar mui-bar-nav">
		      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
		      <h1 class="mui-title">標題</h1>
		    </header>
		    <div class="mui-content mui-scroll-wrapper">
		      <div class="mui-scroll">
		        <!-- 主界面具體展示內容 -->
		        主界面具體展示內容
		      </div>
		    </div>  
		  </div>
		</div>

選擇器

樣式如下

代碼如下

<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.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/mui.picker.css">
		<link rel="stylesheet" href="../../css/mui.poppicker.css">
		
	</head>

	<body>
		<script src="../../js/mui.js"></script>
		<!-- picker的引入要在mui 的下面 -->
		<script src="../../js/mui.picker.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<button class="btn1">點我觸發選擇器</button>
	</body>
	
	<script>
		(function($,doc){
			$.init();
			var user = new $.PopPicker();
			user.setData([
				{value:'cxq',text:'陳曉晴'},
				{value:'zzh',text:'張子涵'},
				{value:'hsj',text:'黃聖傑'}
			])
			var btn = doc.querySelector('.btn1');
			btn.addEventListener('tap',function(){
				user.show(function(items){
					console.log(items);
					//return false 彈框不會自動關閉
				})
			})
		}
		)(mui,document)
	</script>

城市三級聯動

想要做這個需要以下文件

鏈接：https://pan.baidu.com/s/1vGK2rjoTJ4SLpPdiv6UgDg
提取碼：219x

樣式如下

代碼如下

<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.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/mui.picker.css">
		<link rel="stylesheet" href="../../css/mui.poppicker.css">
	</head>

	<body>
		<script src="../../js/mui.js"></script>
		<script src="../../js/mui.picker.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script src="../../js/city.data-3.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<!-- 顯示的容器 -->
		<div id="what"></div>
	</body>
	<script>
		/* 設置選擇器的層級 */
		var picker = new mui.PopPicker({
		    layer: 3
		});
		picker.setData(cityData3);
		picker.pickers[0].setSelectedIndex(1);
		picker.pickers[1].setSelectedIndex(1);
		picker.show(function(SelectedItem) {
			console.log(SelectedItem);
			//顯示你選的是那個城市
			what.innerHTML = SelectedItem[0].text + SelectedItem[1].text;
		})
	</script>

選項卡

樣式如下

代碼如下

<body>
		<script src="../../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a href="" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
			<h1 class="mui-title">標題你好</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a href="#fir" class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首頁</span>
			</a>
			<a href="#sec" class="mui-tab-item ">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">help</span>
			</a>
			<a href="#thr" class="mui-tab-item ">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">charset</span>
			</a>
			<a href="#for" class="mui-tab-item ">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首頁</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="fir" class="mui-control-content mui-active">
				1
			</div>
			<div id="sec" class="mui-control-content">
				22
			</div>
			<div id="thr" class="mui-control-content ">
				333
			</div>
			<div id="for" class="mui-control-content">
				4444
			</div>
		</div>
	</body>

導航欄滑動透明度

臥槽不知道咋寫標題了，看效果吧

具體實現如下

	<!-- 導航欄滑動逐漸變得不透明，只需要這裏的一個類 mui-bar-transparent-->
		<header class="mui-bar mui-bar-transparent">
			<h1 class="mui-title">標題</h1>
		</header>
		<div id="" class="mui-content">
			<img src="../../imgs/girl1.png">
		</div>

滑動選項

樣式如下

代碼如下

<div class="mui-content">
			<ul class="mui-table-view">
				<!-- 左滑刪除 -->
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">刪除</a>
					</div>
					<div class="mui-slider-handle">
						左滑刪除
					</div>
				</li>
				
				<!-- 右滑刪除 -->
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red">刪除</a>
						<a class="mui-btn mui-btn-blue">刪除</a>
					</div>
					<div class="mui-slider-handle">
						右滑刪除
					</div>
				</li>
	
				<!-- 左右滑刪除 -->
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red">刪除</a>
					</div>
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">刪除</a>
					</div>
					<div class="mui-slider-handle">
						左右滑刪除
					</div>
				</li>
			</ul>
		</div>

圖片查看

所需要的插件如下
鏈接：https://pan.baidu.com/s/1ISSSYmnqYv8br8qZOaNtlA
提取碼：d8k6

代碼如下

<!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.css" rel="stylesheet" />
		<!-- 引入應在mui.css下面 防止不必要的錯誤 -->
		<link rel="stylesheet" href="../../css/imageV.css">
	</head>

	<body>
		<script src="../../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<!-- 敲mheader就會出來了 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">標題</h1>
		</header>
		<div class="mui-content">
			<!-- 爲了層級結構一樣 -->
			<div class="mui-content-padded"></div>
			
			<!-- 如果data-preview-group="1" 組相等的話就會在放大的時候滑動查看一族內的圖片-->
			<p>這是第一張圖</p>
			<p>
				<img src="../../imgs/girl1.png" alt="" data-preview-src="" data-preview-group="1">
			</p>
			<p>這是第2張圖</p>
			<p>
				<img src="../../imgs/girl2.png" alt="" data-preview-src="" data-preview-group="1">
			</p>
		</div>
	</body>
	<script type="text/javascript" src="../../js/mui.zoom.js"></script>
	<script type="text/javascript" src="../../js/mui.previewimage.js"></script>
	<script type="text/javascript">
		/* 初始化控件是必須的 */
		mui.previewImage();
	</script>
</html>

窗口管理

雙webview模式

Q1:在mobile app開發過程中，經常會出現 共用的導航欄或者選項卡，每次打開頁面都需要重新渲染，而且容易出現卡頭卡尾的現象。並且此時若使用局部滾動，在android手機上會出現滾動不流暢的問題；

解決如上問題，官方給了兩種方法，這裏說其中一種叫 雙webview模式
在index中插入腳本

/* 嵌入 
	url爲你要插入的頁面路徑
	id就是給它起名字
	*/
	mui.init({
	    subpages:[{
	      url:'html/0318/image.html',
	      id:'image.html',
	      styles:{
	        top:'45px',//mui標題欄默認高度爲45px；
	        bottom:'0px'//默認爲0px，可不定義；
	      }
	    }]
	  });

官方給的工作原理如下

頁面協值跳轉

使用的方法mui.openWindow

		/* 這是傳值的頁面 ,我傳遞一個 name:"cao" 給B頁面*/
		mui.openWindow({
			    url:"bPage.html",
			    id:"bPage.html",
			    extras:{
			      name:"cao"
			    }
			})

接收

		/* 這是接收值的頁面 */
		mui.plusReady(function(){
			//這個plusReady只能在手機上顯示!!!!!!!
		    var self = plus.webview.currentWebview();
		    //吐司顯示
		    mui.toast(self.name);
		});

預加載

預加載的測試思路

通過mui.openWindow()打開預加載的頁面，看是否帶有轉圈圈的loading框，如果有，就說明沒有預加載，如果秒跳轉就說明預加載成功
var array = plus.webview.all();來獲取所有webview，看是否有預加載的webview

官方文檔給了兩種方法

	mui.init	mui.preload
優點	可以預加載多個頁面	性能好
缺點	可能造成的頁面棧過多	只能預加載一個頁面
特性	異步（解決：設置延時定時器）	同步

HTML5+ API

具體使用詳見如下鏈接，這裏敘述些重要的API
https://www.dcloud.io/docs/api/zh_cn/webview.html

create

用途：創建新的Webview窗口

WebviewObject plus.webview.create( url, id, styles, extras );

這是創建一個webview窗口，而不是新的網頁！！，新創建的窗口等待我們show方法使用
如果style對象是空的，那麼寫個空對象就行 let newWindow = plus.webview.create("new.html","new.html",{},{msg:'nima'});

下拉刷新

單 webview 模式

樣式如下

代碼如下

	<body>
		<div id="pullfresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">
					
				</ul>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		/* 下拉刷新更新信息 */
		mui.init({
			pullRefresh:{
				container:"#pullfresh",
				down:{
					style:"circle",
					callback:pulldownRefresh
				}
			}
		})
		
		window.onload = function(){
			// 初始化20條數據
			addDate(20);
		}
		function addDate(item){
			var table = document.querySelector('.mui-table-view');
			var cell = document.querySelectorAll(".mui-table-view-cell");
			// console.log(cell.length);
			for(let i = cell.length,len = i + item; i < len;i++){
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell'
				li.innerHTML = "<a class='mui-navigate-right'> " +  (i + 1) +  " </a>";
				
				// 在末尾追加
				// table.appendChild(li,table.firstChild);
				
				table.insertBefore(li,table.firstChild);
			}
		}
		
		function pulldownRefresh(){
			setTimeout(function(){
				addDate(5);
				mui('#pullfresh').pullRefresh().endPulldownToRefresh();
				mui.toast("已經刷新5個元素");
			},1500)
		}
	</script>

【前端22_MUI】初步認識MUI、UI組件、窗口管理

文章目錄

混合開發

MUI 初步的認識

HBulid初入時遇到的坑

Q0：Uncaught ReferenceError: plus is not defined (提示: 請在plus ready後再調用plus api)

Q1：上機運行報錯error

Q2：手機上顯示主頁怎麼調？

Q3：mui 是 5+ 封裝的

MUI框架

Dialog 消息框

圖文列表

側滑菜單

選擇器

城市三級聯動

選項卡

導航欄滑動透明度

滑動選項

圖片查看

窗口管理

雙webview模式

頁面協值跳轉

預加載

HTML5+ API

create

下拉刷新

單 webview 模式