1、HTML5+ 初識
HTML5 Plus應用概述
HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App能夠經過擴展的JS API任意調用手機的原生能力，實現與原生App一樣強大的功能和性能。javascript
HTML5 Plus規範
經過HTML5開發移動App時，會發現HTML5不少能力不具有。爲彌補HTML5能力的不足，在W3C中國的指導下成立了www.html5plus.org組織，推出HTML5+規範。php
HTML5+規範是一個開放規範，容許三方瀏覽器廠商或其餘手機runtime製造商實現。css
HTML5+擴展了JavaScript對象plus，使得js能夠調用各類瀏覽器沒法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。html
HBuilder的手機原生能力調用分2個層面：前端
- 跨手機平臺的能力調用都在HTML5+規範裏，好比二維碼、語音輸入，使用plus.barcode和plus.speech。編寫一次，可跨平臺運行。
- Native.js是另外一項創新技術。手機OS的原生API有四十多萬，大量的API沒法被HTML5使用。Native.js把幾十萬原生API封裝成了js對象，經過js能夠直接調ios和android的原生API。這部分就再也不跨平臺，寫法分別是plus.ios和plus.android，好比調ios game center，或在android手機桌面建立快捷方式。html5
Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，將一個原生對象android.content.Intent映射爲js對象obj，而後在js裏操做obj對象的方法屬性就能夠了。java
HTML5+ App
使用HTML5+開發的移動App並不是mobile web頁面。這是新手最容易混淆的地方。mobile web的文件存放在web服務器上，而移動App的文件存放在手機本地，編寫移動App的html、js、css文件被打包到ipa或apk等原生安裝包，在手機客戶端運行。node
用個更形象的列子，web app仍然是b/s結構，而移動App是c/s結構甚至是徹底脫線的單機應用。
這或許有點超過一些人的想象，他們認爲HTML就是web、就是b/s，事實上javascript早已可經過nodejs等技術運行在服務器側，而在HBuilder的移動App裏，HTML、JS等文件也能夠被打包成原生安裝包。android
固然這些移動App裏某些頁面也能夠繼續從服務器端以網頁方式下行，就像任何原生應用（如微信）均可之內嵌網頁同樣。ios
因此mobile web，在HBuilder裏新建項目時，屬於web項目。不要放置到移動App項目下。mobile web項目也不能真機聯調和打包。
舉幾個例子說明mobile web和移動App的區別。
例1：把一個mobile web項目，打包成移動App。
1. 在HBuilder裏新建一個web項目，把mobile web代碼放進去。
2. 在HBuilder裏新建移動App
3. 在新建的移動App下找到manifest.json，將其中的入口頁面配置爲mobile web的網絡地址。
4. 而後點發行打包，就獲得一個移動App的安裝包。除了有個安裝包和桌面有個快捷方式外，與瀏覽器的體驗不會有其餘區別。
5. 不過注意，這樣的移動App體驗不好，它在頁面跳轉時會像瀏覽器那樣切換而且白屏，它徹底沒法脫線使用，沒有網絡時點開這個app只能看到一片白板。這樣的app在Apple的Appstore審覈時是沒法經過的，其餘大的安卓市場也不會容許發行。
例子2：正規的移動App
1. 在HBuilder裏新建移動App項目
2. 在移動App裏編寫html、Js、css文件，本地js經過ajax方式請求服務器數據，經過plus.net對象避開跨域限制
3. 移動App裏的js能夠經過plus對象調用手機原生能力
4. 編寫好的移動App點打包變成安裝包，這纔是一個體驗良好的、可上線的移動App。
例子3：混合型移動App
這裏的混合型移動App，所指並不是是原生和HTML5的hybrid App，而是指一部分頁面是本地的HTML，經過ajax與服務器交互，另外一部分頁面是從服務器下行的mobile web頁面。
1. 分別新建一個web項目和一個移動App項目
2. 在移動App裏的某個html裏經過<a href= 或者location.href=或者webview對象的loadURL方法指定mobile web的頁面地址。
3. 在服務器下行的mobile web頁面中，同樣能夠經過js調用本地HTML5Plus api對硬件層進行訪問。相似微信JS SDK。
HTML5+ 應用架構
HTML5+ 規範 API 及demo示例
最新規範請參考http://www.html5plus.org/#specification
手機端體驗各個API的實現效果，ios手機在Appstore搜索Hello H5+，Android手機下載地址。
在HBuilder中新建移動App，選Hello H5+，便可看到這個demo的源代碼。
建議：在進行開發以前先把DCloud公司提供的實例都運行一遍，這樣可以利用許多現有的功能模塊，省去不少開發時間和成本。
開發環境HBuilder
HBuilder內置HTML5+ APP開發環境，提供一套完整的移動應用開發解決方案。內置HTML5+ API語法提示，提升開發效率；集成真機運行環境，方便開發後即時在真機上查看運行效果；集成應用雲端打包系統，不用部署xcode和Android sdk就能夠打包應用。使開發者只須要使用HTML五、Javascript、CSS技術就能夠快速開發跨平臺的移動應用。
下載地址：http://www.dcloud.io/
平臺支持
- iOS 5.0及以上
- Android 2.3及以上
本文參考連接：
http://www.javashuo.com/article/p-pozzlhau-cn.html
2、HBuilder
使用HBuilder開發移動App，HBuilder是基於Eclipse進行二次開發的，因此新建項目等各項操做與Eclipse相似。
這是綠色版，解壓便可。下載地址以下：
連接：https://pan.baidu.com/s/1dw1mtTGwFltkear8hKGnRA 密碼：o738
進入官網：
看到右邊有一個手機黑框，裏面有不少功能，能夠點擊看看。好比這個：
只須要3個字母，就能幫你生成了！是否是很6？這個是HBuilder的代碼塊功能的其中一個，下面會慢慢介紹！
經過十幾個代碼，就能幫你快速生成一個APP首頁！
新建移動APP
首先新建一個移動App項目，文件-->新建-->移動APP
雙擊index.html，選擇右邊的 邊改邊看模式
默認是一個空白頁面
代碼塊
打開官方文檔
http://dev.dcloud.net.cn/mui/snippet/
接下來會用到5個代碼塊，分別是
- mhe 標題欄
- msl 圖片輪播
- mgr 九宮格
- mli 圖文列表圖片居左
- mta 底部選項卡
mhe 標題欄
輸入mhe，選擇下面的。而後回車！Ctrl+s保存。效果以下：
注意： 必定要保存代碼，不然右邊的效果是不會有的！
msl 圖片輪播
mgr 九宮格
mli 圖文列表圖片居左
mta 底部選項卡
首頁效果就出來了，因爲輪播圖，沒有圖片。能夠加一個圖片，完整代碼以下：
<!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"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--###圖片輪播###-->
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
</html>
效果以下：
2、夜神模擬器
介紹
夜神安卓模擬器(夜神模擬器),是全新一代的安卓模擬器,與傳統安卓模擬器相比,基於android4.4.2,兼容X86/AMD,在性能、穩定性、兼容性等方面有着巨大優點。
官方地址：
安裝
從官網下載或者從百度網盤下載
連接：https://pan.baidu.com/s/17xBT2H_p7vHe6SxCxSpJAQ 密碼：bwsk
注意：安裝的時候，路徑必定要和HBuilder在同一個盤，好比D盤！
由於待會有一個bat腳本須要運行，它會調用HBuilder和夜神模擬器
個人夜神模擬器 安裝路徑是 D:\Program Files\Nox
HBuilder 安裝路徑是 D:\Program Files (x86)\HBuilder.9.1.13.windows\HBuilder
啓動夜神模擬器，設置爲手機模式
模擬器訪問移動APP
進入目錄 D:\Program Files\Nox，新建一個adb.bat文件，內容以下：
cd D:\Program Files\Nox\bin D: nox_adb connect 127.0.0.1:62001 nox_adb devices cd D:\Program Files (x86)\HBuilder.9.1.13.windows\HBuilder\tools\adbs adb connect 127.0.0.1:62001 adb devices pause
注意：要修改 2個軟件的路徑。
右鍵adb.bat，以管理員身份運行
出現 successfully 表示鏈接成功
注意：千萬不要進行任何操做，這個窗口不能關閉
等待幾秒，會出現這個提示
親們，必需要等待至少10秒
查看HBuilder編輯器，點擊如圖所示的圖標，選擇基座運行
若是提示沒有手機鏈接，請重啓 HBuilder，夜神模擬器，以及adb.bat
若是重試2遍還不行，註銷電腦。再試一次，應該就能夠了！
若是鏈接成功，HBuilder控制檯會有提示
點擊 基座運行後，HBuilder控制檯會有提示
此時，模擬器會自動安裝HBuilder APP，並打開頁面
那麼以後頁面有改動時，模擬器會同步顯示！
注意：上面的九宮格顯示不對稱，須要將全部的mui-col-sm-3 改爲mui-col-sm-4
修改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"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--###圖片輪播###-->
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
</html>
效果以下：
3、Webview
Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操做。經過plus.webview可獲取應用界面管理對象。
文檔連接：
http://www.html5plus.org/doc/zh_cn/webview.html
plusReady
擴展API加載完成事件
document.addEventListener("plusready", plusreadyCallback, capture);
說明：
String 類型
爲了保證擴展API的有效調用，全部應用頁面都會用到的重要事件。 應用頁面顯示時須要首先加載擴展和API代碼庫，當擴展API代碼庫加載完成時會觸發pluseready事件，當設備觸發該事件後，用戶就能夠安全的調用擴展API。 若是程序中打開多個頁面，每一個都會收到此事件。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
// 擴展API加載完畢，如今能夠正常調用擴展API
// ......
}
</script>
</head>
<body >
</body>
</html>
參考連接：
http://www.html5plus.org/doc/zh_cn/events.html#plus.Events.%22plusready%22
事件綁定
除了可使用addEventListener()方法監聽某個特定元素上的事件外， 也可使用.on()方法實現批量元素的事件綁定。
參考連接：
http://dev.dcloud.net.cn/mui/event/#
事件監聽
單個元素上的事件監聽，直接使用addEventListener()便可，以下：
elem.addEventListener("swipeleft",function(){ console.log("你正在向左滑動"); });
若多個元素執行相同邏輯，則建議使用事件綁定(on())
手勢事件
在開發移動端的應用時，會用到不少的手勢操做，好比滑動、長按等，爲了方便開放者快速集成這些手勢，mui內置了經常使用的手勢事件，目前支持的手勢事件見以下列表：
dialog（對話框）
建立並顯示對話框，彈出的對話框爲非阻塞模式，用戶點擊對話框上的按鈕後關閉( h5模式的對話框也可經過 closepopup關閉 )，並經過callback函數返回用戶點擊按鈕的索引值或輸入框中的值。
Dialog 組件包含:
mui會根據ua判斷,彈出原生對話框仍是h5繪製的對話框,在基座中默認會彈出原生對話框,能夠配置type屬性,使得彈出h5模式對話框
二者區別:1.原生對話框能夠跨webview,2.h5對話框樣式統一併且能夠修改對話框屬性或樣式
alert是調用安卓原生的提示框，不太好看，通常不用！
通常使用toast
參考連接：
http://dev.dcloud.net.cn/mui/ui/#dialog
修改快捷鍵
默認的整理代碼格式，快捷鍵是Ctrl+Shift+F，它和搜狗拼音有衝突！
這裏須要修改成和Pycharm同樣的快捷鍵，Ctrl+Alt+Shift+L
那麼代碼就會自動排序，看着舒服！
舉例
須要點擊底部選項卡的電話，跳轉到電話頁面！
修改 index.html，給選項卡增長id爲phone
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
注意： 是給整個a標籤添加id，而不是span標籤添加id。假設是這樣的
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label" id="phone">電話</span>
</a>
那麼js和id爲phone綁定點擊事件時，必需要點擊到文字才能觸發，點擊電話圖標，是沒有用的！
這樣體驗很差！
修改index.html，將js代碼，移動到</body>下面。增長plusReady事件
<!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>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
mui.init();
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
})
</script>
</html>
保存以後，點擊底部選項卡的電話圖標，就會有提示！
調轉頁面
須要點擊電話圖標以後，跳轉到電話頁面！
新建一個 phone.html
若是新建的是一個空的html文件，輸入md，回車，就是 含mui的html
修改phone.html，增長 帶返回箭頭的標題
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <!--帶返回箭頭的標題--> <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> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() </script> </html>
保存以後，雙擊phone.html，效果以下：
那麼要打開新頁面，怎麼操做？使用openWindow事件
打開新頁面
作web app，一個沒法避開的問題就是轉場動畫；web是基於連接構建的，從一個頁面點擊連接跳轉到另外一個頁面，若是經過有刷新的打開方式，用戶要面對一個空白的頁面等待；若是經過無刷新的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的性能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至致使瀏覽器崩潰； mui的解決思路是：單webview只承載單個頁面的dom，減小dom層級及頁面大小；頁面切換使用原生動畫，將最耗性能的部分交給原生實現.
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新頁面頂部位置 bottom:newage-bottom-position,//新頁面底部位置 width:newpage-width,//新頁面寬度，默認爲100% height:newpage-height,//新頁面高度，默認爲100% ...... }, extras:{ .....//自定義擴展參數，能夠用來處理頁面間傳值 }, createNew:false,//是否重複建立一樣id的webview，默認爲false:不重複建立，直接顯示 show:{ autoShow:true,//頁面loaded事件發生後自動顯示，默認爲true aniShow:animationType,//頁面顯示動畫，默認爲」slide-in-right「； duration:animationTime//頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒； }, waiting:{ autoShow:true,//自動顯示等待框，默認爲true title:'正在加載...',//等待對話框上顯示的提示內容 options:{ width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度 height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度 ...... } } })
參考連接：
http://dev.dcloud.net.cn/mui/window/#openwindow
修改index.html，增長openWindow事件，並設置styles。
<!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>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
mui.init();
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
})
})
</script>
</html>
設置styles的目的是爲了打開電話頁面時，能展現底部選項卡
注意：使用HBuilder預覽時，跳轉到電話頁面是，底部選項卡沒法展現！
必須使用夜神模擬器，打開電話頁面。纔是正常的！
使用模擬器訪問，效果以下：
如何給電話窗口傳遞一個參數呢？這個時候須要用到extras
extras
新窗口的額外擴展參數，可用來處理頁面間傳值；例如：
var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui' //擴展參數 } }); console.log(webview.name);//輸出mui字符串
注意：擴展參數僅在打開新窗口時有效，若目標窗口爲預加載頁面，則經過mui.openWindow方法打開時傳遞的extras參數無效。
參考連接：
http://dev.dcloud.net.cn/mui/window/#openwindow
修改index.html，增長extras
<!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>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
mui.init();
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
// 額外擴展參數
extras:{
user_id:123456
}
})
})
</script>
</html>
修改phone.html，獲取參數，並彈框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <!--帶返回箭頭的標題--> <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> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() //加載完擴展和API代碼庫,調用plusReady事件 mui.plusReady(function() { // 獲取當前Webview窗口對象的native層實例對象 var Sdata = plus.webview.currentWebview(); // 調用安卓原生的彈框 mui.alert(Sdata.user_id); }) </script> </html>
注意：必須在 plusReady方法裏面或者外面，不然報錯。由於它須要調用plus！
使用模擬器訪問，效果以下：
還能夠把代碼，寫在plusReady的下面
修改phone.html，增長一個button按鈕。點擊時，就彈框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <!--帶返回箭頭的標題--> <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"> <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btn">顯示個人User_id</button> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() //加載完擴展和API代碼庫,調用plusReady事件 mui.plusReady(function() { }); document.getElementById("btn").addEventListener("tap", function() { // 只要用到 plus 就必定要在 mui.plusReady 以後 // 獲取當前Webview窗口對象的native層實例對象 var Sdata = plus.webview.currentWebview(); // 調用安卓原生的彈框 mui.alert(Sdata.user_id); }) </script> </html>
使用模擬器訪問，效果以下：
因爲 底部選項卡 是公共部分。所以index.html的代碼須要分離出來
新建main.html，用來放首頁的內容
修改mian.html，先增長header，再增長<div class="mui-content">，它表示內容主體部分。
將index.html的部分代碼剪貼過來！
mian.html代碼以下：
<!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" />
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--必定要添加<div class="mui-content">，它表示內容主體部分-->
<div class="mui-content">
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</html>
修改index.html，刪除多餘的html代碼，增長首頁點擊事件，加載main.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" id="index">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
mui.init();
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
// 額外擴展參數
extras:{
user_id:123456
}
})
});
document.getElementById("index").addEventListener("tap", function() {
mui.openWindow({
url:"main.html",
id:"main.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
// 額外擴展參數
extras:{
user_id:123456
}
})
})
</script>
</html>
打開模擬器，關閉進程
從新打開HBuilder
效果以下：
發現，默認打開時，首頁是空的。只有點擊首頁時，纔會加載首頁！
注意：點擊首頁加載，是由index.html定義的點擊事件觸發的！
那麼如何打開APP時，自動加載首頁呢？使用subpage
subpage
子頁面至關於在html中使用iframe，全部的瀏覽器都支持，不依賴h5+api
mui.init({ subpages:[{ url:your-subpage-url,//子頁面HTML地址，支持本地地址和網絡地址 id:your-subpage-id,//子頁面標誌 styles:{ top:subpage-top-position,//子頁面頂部位置 bottom:subpage-bottom-position,//子頁面底部位置 width:subpage-width,//子頁面寬度，默認爲100% height:subpage-height,//子頁面高度，默認爲100% ...... }, extras:{}//額外擴展參數 }] }
參考連接：
http://dev.dcloud.net.cn/mui/window/#subpage
修改index.html，在mui.init裏面增長subpage
<!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" id="index">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
mui.init(
{
// 子頁面
subpages:[
{
url:"main.html",
id:"main.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
}
]
}
);
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
// 額外擴展參數
extras:{
user_id:123456
}
})
});
document.getElementById("index").addEventListener("tap", function() {
mui.openWindow({
url:"main.html",
id:"main.html",
styles:{
top:"0px",//新頁面頂部位置
bottom:"50px",//新頁面底部位置
},
})
})
</script>
</html>
注意：mui.init裏面是一個對象，必須先寫{}，再寫 subpage。不然沒有下面的效果！
打開模擬器，關閉HBuilder進程，從新打開，效果以下：
頁面就加載出來了，注意：這不是繼承。前面沒有繼承的概念。
如今有一個問題，這裏面大量用到了
styles:{ top:"0px",//新頁面頂部位置 bottom:"50px",//新頁面底部位置 },
如何設置一個全局變量呢？
因爲mui模板的html頁面，都加載了mui.js文件，那麼將變量寫入到這個文件，就能夠了
使用windows，注意：js全局變量聲明，使用windows
修改mui.js，因爲代碼過多，使用...省略了
/** * MUI核心JS * @type _L4.$|Function */ window.styles = { top: "0px", //新頁面頂部位置 bottom: "50px" //新頁面底部位置 }; ...
下面沒有完整的mui.js代碼了！
修改index.html，將mui.min.js改爲mui.js
由於mui.js好修改，mui.min.js代碼都壓縮了，很差修改！
<!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" />
</head>
<body>
<!--底部選項卡-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="index">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init(
{
// 子頁面
subpages:[
{
url: "main.html",
id: "main.html",
styles: window.styles
}
]
}
);
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles: window.styles,
// 額外擴展參數
extras:{
user_id:123456
}
})
});
document.getElementById("index").addEventListener("tap", function() {
mui.openWindow({
url:"main.html",
id:"main.html",
styles: window.styles
})
})
</script>
</html>
從新訪問，效果同上！
修改index.html，在圖文列表中，多增長几個li標籤。
<!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" />
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--必定要添加<div class="mui-content">，它表示內容主體部分-->
<div class="mui-content">
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
</html>
從新範圍，發現列表沒法拖動。爲何呢？須要設置滾動區域
scroll(區域滾動)
在App開發中，div區域滾動的需求是廣泛存在的，但系統默認實現又有以下問題：
- Android平臺4.0如下不支持div滾動
- Android平臺4.0以上支持div滾動，但不顯示滾動條
- 彈出層的div滾動在iOS平臺存在事件透傳的問題
初始化scroll控件
mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，默認值0.0006 });
本文參考：
http://dev.dcloud.net.cn/mui/ui/#scroll
修改main.html，初始化滾動
<!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" />
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--必定要添加<div class="mui-content">，它表示內容主體部分-->
<div class="mui-content">
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui('.mui-scroll-wrapper').scroll(); //初始化滾動
</script>
</html>
從新訪問，就能夠滾動了
修改index.html， 打印webview的id
<!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" />
</head>
<body>
<!--底部選項卡-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="index">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init(
{
// 子頁面
subpages:[
{
url: "main.html",
id: "main.html",
styles: window.styles
}
]
}
);
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
mui.toast(plus.webview.currentWebview().id)
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles: window.styles,
// 額外擴展參數
extras:{
user_id:123456
}
})
});
document.getElementById("index").addEventListener("tap", function() {
mui.openWindow({
url:"main.html",
id:"main.html",
styles: window.styles
})
})
</script>
</html>
打開模擬器，關係進程，從新開啓。底部提示以下：
它的id就是HBuilder，它是特殊的id
登陸
input(表單)
全部包裹在.mui-input-row 類中的 input、textarea等元素都將被默認設置寬度屬性爲width: 100%; 。 將 label 元素和上述控件控件包裹在.mui-input-group中能夠得到最好的排列。
本文參考
http://dev.dcloud.net.cn/mui/ui/#input
新建login.html，將上面的代碼拷貝過來
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">登錄</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row" style="margin-top: 15px;"> <label>用戶名</label> <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username"> </div> <div class="mui-input-row"> <label>密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-red" id="login">登錄</button> <button type="button" class="mui-btn mui-btn-green" id="reg">註冊</button> </div> </form> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> </script> <script type="text/javascript"> mui.init(); </script> </html>
修改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" />
</head>
<body>
<!--底部選項卡-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="index">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item" id="login">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init(
{
// 子頁面
subpages:[
{
url: "main.html",
id: "main.html",
styles: window.styles
}
]
}
);
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
mui.toast(plus.webview.currentWebview().id)
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles: window.styles,
// 額外擴展參數
extras:{
user_id:123456
}
})
});
document.getElementById("index").addEventListener("tap", function() {
mui.openWindow({
url:"main.html",
id:"main.html",
styles: window.styles
})
});
document.getElementById("login").addEventListener("tap", function() {
mui.openWindow({
url: "login.html",
id: "login.html",
styles: window.styles
})
})
</script>
</html>
點擊設置，效果以下：
ajax請求
mui框架基於htm5plus的XMLHttpRequest，封裝了經常使用的Ajax函數，支持GET、POST請求方式，支持返回json、xml、html、text、script數據類型； 本着極簡的設計原則，mui提供了mui.ajax方法，並在mui.ajax方法基礎上，進一步簡化出最經常使用的mui.get()、mui.getJSON()、mui.post()三個方法。
mui.post()
mui.post()方法是對mui.ajax()的一個簡化方法，直接使用POST請求方式向服務器發送數據、且不處理timeout和異常（若需處理異常及超時，請使用mui.ajax()方法），使用方法： mui.post(url[,data][,success][,dataType])，如上登陸鑑權代碼換成mui.post()後，代碼更爲簡潔，以下：
mui.post('http://server-name/login.php',{ username:'username', password:'password' },function(data){ //服務器返回響應，根據響應結果，分析是否登陸成功； ... },'json' );
參考連接：
http://dev.dcloud.net.cn/mui/ajax/
修改mui.js，增長全局變量serv。它是後端程序的IP和端口
注意：ip不能是127.0.0.1，由於模擬器會發給本身自己！然而並無什麼卵用！
修改login.html，發送ajax請求。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">登錄</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row" style="margin-top: 15px;"> <label>用戶名</label> <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username"> </div> <div class="mui-input-row"> <label>密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-red" id="login">登錄</button> <button type="button" class="mui-btn mui-btn-green" id="reg">註冊</button> </div> </form> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> </script> <script type="text/javascript"> mui.init(); document.getElementById("login").addEventListener("tap", function() { var uname = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; mui.post( window.serv + "/login", { username: uname, password: pwd }, function(data) { mui.toast(data); } ); }); </script> </html>
後端程序
新建一個目錄banana，新建文件manager.py
from flask import Flask, request app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' @app.route('/login',methods=["POST"]) def login(): username = request.form.get("username") password = request.form.get("password") if username == "xiao" and password == "123": return "歡迎登錄" return "登錄失敗" @app.route('/reg',methods=["POST"]) def reg(): return "123" if __name__ == '__main__': app.run("0.0.0.0", 9527, debug=True)
啓動manager.py
使用模擬器登陸，效果以下：
註冊
新建reg.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <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"> <form class="mui-input-group" style="margin-top: 15px;"> <div class="mui-input-row"> <label>用戶名</label> <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username"> </div> <div class="mui-input-row"> <label>密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd"> </div> <div class="mui-input-row"> <label>確認密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="repwd"> </div> <div class="mui-input-row"> <label>暱稱</label> <input type="text" class="mui-input-clear" placeholder="請輸入暱稱" id="nickname"> </div> <div class="mui-input-row mui-radio mui-left"> <label>男</label> <input name="gender" type="radio" value="1"> </div> <div class="mui-input-row mui-radio mui-left"> <label>女</label> <input name="gender" type="radio" value="2" checked> </div> <div class="mui-input-row"> <label>年齡</label> <input type="text" class="mui-input-clear" placeholder="請輸入年齡" id="age"> </div> <div class="mui-input-row"> <label>電話</label> <input type="text" class="mui-input-clear" placeholder="請輸入電話" id="phone"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-primary" id="reg">註冊</button> <button type="button" class="mui-btn mui-btn-danger mui-action-back">返回</button> </div> </form> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <!--加載md5--> <script src="js/md5.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() // id爲reg的標籤綁定點擊事件 document.getElementById("reg").addEventListener("tap",function(){ // 獲取全部性別列表 var gender_list = document.getElementsByName("gender") var pwd = document.getElementById("pwd").value; //密碼 if (pwd.length == 0){ mui.toast("密碼不能爲空") return } var repwd = document.getElementById("repwd").value; //確認密碼 // 判斷2次密碼 if(pwd != repwd) { mui.toast("兩次密碼輸入不一致") return } var username = document.getElementById("username").value; //用戶名 var age = document.getElementById("age").value; //年齡 var nickname = document.getElementById("nickname").value; //暱稱 var phone = document.getElementById("phone").value; //電話 var gender = null; //性別 // 遍歷性別列表 for(var i = 0; i < gender_list.length; i++) { // checked表示選中，當標籤被被選中時 if(gender_list[i].checked) { // 獲取選中的性別，i表示索引 gender = gender_list[i].value; } } // 發送POST請求 mui.post( // window.serv + "/reg"表示 http://192.168.11.86:9527/reg window.serv + "/reg", { // 下面是須要發送的鍵值對 username: username, password: pwd, gender: gender, age: age, nickname: nickname, phone: phone }, function(data){ console.log(data) } ) }) </script> </html>
修改login.html，點擊註冊時，切換到註冊頁面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">登錄</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row" style="margin-top: 15px;"> <label>用戶名</label> <input type="text" class="mui-input-clear" placeholder="請輸入用戶名" id="username"> </div> <div class="mui-input-row"> <label>密碼</label> <input type="password" class="mui-input-password" placeholder="請輸入密碼" id="pwd"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-red" id="login">登錄</button> <button type="button" class="mui-btn mui-btn-green" id="reg">註冊</button> </div> </form> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); document.getElementById("login").addEventListener("tap", function() { var uname = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; console.log(111); mui.post( window.serv + "/login", { username: uname, password: pwd }, function(data) { mui.toast(data); } ); }); document.getElementById("reg").addEventListener("tap", function() { mui.openWindow({ url: "reg.html", id: "reg.html" }) }) </script> </html>
使用模擬器訪問，點擊註冊按鈕，效果以下：
自定義事件fire
經過自定義事件，用戶能夠輕鬆實現多webview間數據傳遞。
觸發自定義事件
經過mui.fire()方法可觸發目標窗口的自定義事件：
.fire( target , event , data )
data是一個json數據，它的key必須和事件名一致才行！不然Undefined
注意：目標窗口，必須監聽，纔有效果！
目錄接收參數時，使用 data.detail.事件名
參考連接：
http://dev.dcloud.net.cn/mui/event/#customevent
舉例：phone頁面向mian頁面，使用fire事件，事件名爲talk
修改phone.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <!--帶返回箭頭的標題--> <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"> <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btn">顯示個人User_id</button> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() // mui.back = function(){}; //加載完擴展和API代碼庫,調用plusReady事件 mui.plusReady(function() { }); document.getElementById("btn").addEventListener("tap", function() { // 只要用到 plus 就必定要在 mui.plusReady 以後 // 獲取當前Webview窗口對象的native層實例對象 // var Sdata = plus.webview.currentWebview(); // // 調用安卓原生的彈框 // mui.alert(Sdata.user_id); // 獲取目標窗口id var main = plus.webview.getWebviewById("main.html"); // 使用fire事件,發送一個數據對象 mui.fire(main,"talk",{talk:"我讓你說啥，你就給我說啥"}) }) </script> </html>
修改main.html，監聽talk事件
<!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" />
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--必定要添加<div class="mui-content">，它表示內容主體部分-->
<div class="mui-content">
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init();
mui('.mui-scroll-wrapper').scroll(); //初始化滾動
document.addEventListener("talk",function(data){
// 顯示獲取的值
mui.toast(data);
})
</script>
</html>
使用模擬器訪問，點擊電話圖標-->顯示個人userid，底部顯示
提示它是一個自定義對象。
修改mail.html，打印真正的值
<!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" />
</head>
<body>
<!--###標題欄###-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首頁</h1>
</header>
<!--必定要添加<div class="mui-content">，它表示內容主體部分-->
<div class="mui-content">
<!--###圖片輪播###-->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</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>
<!--###九宮格###-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--mli 圖文列表圖片居左-->
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<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="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init();
mui('.mui-scroll-wrapper').scroll(); //初始化滾動
document.addEventListener("talk",function(data){
// 顯示獲取的值
mui.toast(data.detail.talk);
})
</script>
</html>
從新點擊，效果以下：
若是向index.html傳值呢？
注意：index頁面的id爲HBuilder
修改phone.html，指定id爲HBuilder
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <!--帶返回箭頭的標題--> <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"> <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btn">顯示個人User_id</button> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init() // mui.back = function(){}; //加載完擴展和API代碼庫,調用plusReady事件 mui.plusReady(function() { }); document.getElementById("btn").addEventListener("tap", function() { // 只要用到 plus 就必定要在 mui.plusReady 以後 // 獲取當前Webview窗口對象的native層實例對象 // var Sdata = plus.webview.currentWebview(); // // 調用安卓原生的彈框 // mui.alert(Sdata.user_id); // 獲取目標窗口id var main = plus.webview.getWebviewById("HBuilder"); // 使用fire事件,發送一個數據對象 mui.fire(main,"talk",{talk:"我讓你說啥，你就給我說啥"}) }) </script> </html>
修改index.html，監聽talk事件
<!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" />
</head>
<body>
<!--底部選項卡-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="index">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" id="phone">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item" id="login">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init(
{
// 子頁面
subpages:[
{
url: "main.html",
id: "main.html",
styles: window.styles
}
]
}
);
//加載完擴展和API代碼庫,調用plusReady事件
mui.plusReady(function() {
mui.toast(plus.webview.currentWebview().id)
})
//id爲phone綁定tag(點擊)事件
document.getElementById("phone").addEventListener("tap", function() {
// 自動消失提示框
mui.toast("你點擊了電話頁面");
mui.openWindow({
url:"phone.html",
id:"phone.html",
styles: window.styles,
// 額外擴展參數
extras:{
user_id:123456
}
})
});
document.getElementById("index").addEventListener("tap", function() {
mui.openWindow({
url:"main.html",
id:"main.html",
styles: window.styles
})
});
document.getElementById("login").addEventListener("tap", function() {
mui.openWindow({
url: "login.html",
id: "login.html",
styles: window.styles
})
});
document.addEventListener("talk",function(data){
// 顯示獲取的值
mui.toast('index'+data.detail.talk);
})
</script>
</html>
從新點擊，效果以下：
附上最終代碼：
HBuilder APP和flask後端登陸
連接：https://pan.baidu.com/s/1eBwd1sVXTNLdHwKRM2-ytg 密碼：4pcw
下載MyAPP.zip後，解壓文件，使用HBuilder打開
點擊 文件-->打開目錄
關閉其餘APP項目，重啓運行 基座運行。
使用Pycharm，運行flask項目！
使用夜神模擬器，從新打開APP，效果以下：
總結：
MUI:dcloud 前端佈局框架，手機app，很是簡潔很是方便，基於HBuilder（代碼塊） 快速搭建app HTML5Plus（H5+ ）： 移動端操做系統的系統調用 Mui 中 爲咱們打包了 H5+ Mui的手勢事件： tap hold ---- longtap = True Mui 中的 Scroll 每次動態加載時須要初始化一下 radio 如何去獲取已選定的值 mui 是一個佈局框架 包含了 HTML5Plus mui.init()初始化 mui.js subpages:[{url:"",id:"",styles:{}}] # 加載子頁面，若是隻有一個，就會在加載後直接打開 gestureConfig:{ tap: true, //默認爲true doubletap: true, //默認爲false longtap: true, //默認爲false swipe: true, //默認爲true drag: true, //默認爲true hold:false,//默認爲false，不監聽 release:false//默認爲false，不監聽 }# 手勢事件配置 mui.plusReady(function(){ }) # 初始HTML5Plus API 在調用 plus 以前都要初始化plusReady plus 必定要出如今function裏面 mui.toast("你點擊了電話按鈕") # 消失的提示框 mui.openWindow({url:"",id:"",styles:{},extras:{user_id:123}}) # 經過mui封裝的openwindow打開新的窗口 mui.back # 返回上一級的函數 mui.fire(webview,"事件",data) # 開火事件 document.addEventListener("事件",function(data){data.detail}) mui.post(url,{id:1},function(data){}) # POST請求 HTML5Plus API 封裝了移動端 安卓操做系統 和 IOS操做系統 的系統調用 plus.webview.currentWebview() # 獲取當前操做的webview 頁面信息 plus.webview.getWebviewById("HBuilder")#index 經過id獲取Webview 頁面信息