mui初探筆記
/* MUI 使用說明：
*
* 1.每一個用到mui的頁面都調用下mui.init。
* 2.若是須要使用大H5+對象，就寫到plusReady中，如plus對象。
*/
'''【MUI開發注意事項】-----------------------------------------------------------------------------------
//1.【固定欄靠前】
所謂的固定欄：也就是帶有.mui-bar屬性的節點
(.mui-bar-nav）
(.mui-bar-footer)
(.mui-bar-tab）
這些元素使用時需遵循一個規則：放在.mui-content元素以前
//2.【一切內容都要包裹在mui-content中】
除了固定欄以外，其它內容都要包裹在.mui-content中
//3.【始終爲button按鈕添加type屬性】
若button按鈕沒有type屬性，瀏覽器默認按照type=submit邏輯處理，
這樣若將沒有type的button放在form表單中，點擊按鈕就會執行form表單提交，頁面就會刷新，用戶體驗極差
//4.【窗口管理】
//4.1 頁面初始化：必須執行mui.init方法
mui在頁面初始化時，初始化了不少參數配置，好比：
按鍵監聽、手勢監聽等，所以mui頁面都必須調用一次mui.init()方法；
//4.2 頁面跳轉：拋棄href跳轉
mui.openWindow方法打開一個新的webview，mui會自動監聽新頁面的loaded事件，
若加載完畢，再自動顯示新頁面；
//4.3 頁面關閉：勿重複監聽backbutton
則須要重寫mui.back方法，切勿簡單經過addEventListener添加backbutton監聽，
由於addEventListener只會增長新的執行程序，mui默認封裝的監聽執行邏輯依然會繼續執行，
所以若僅addEventListener添加用戶確認框，則用戶即便選擇了取消，也會繼續關閉窗口。
//5.【手勢操做】
// 點擊：忘記click
mui爲了解決這個問題，封裝了tap事件，所以在任何點擊的時候，請忘記click及onclick操做，
通通使用以下代碼：
element.addEventListener('tap',function(){
//點擊響應邏輯
});
// 或者
mui.(#select).on("tap","li".funcation(){
//點擊響應邏輯
});
//6.【常見錯誤 Uncaught ReferenceError: plus is not defined】
在app開發中，若要使用HTML5+擴展api，必須等plusready事件發生後才能正常使用，
不然可能會報「plus is not defined」的錯誤；
mui爲簡化開發，將plusReady事件封裝成了mui.plusReady()方法，
凡涉及到HTML5+的api，建議都寫在mui.plusReady方法中；
'''【mui適用場景說明】-------------------------------------------------------------------------------------
爲解決HTML5在低端Android機上的性能缺陷，mui引入了原生加速，其中最關鍵的就是webview控件，
所以mui若要發揮其所有能力，需和5+ App配合適用，若脫離5+ App，mui功能會受限，主要涉及三個部分：
詳細參考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/113
'''【如何自定義mui控件樣式】-------------------------------------------------------------------------------
參考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/87
'''【如何自定義icon圖標】-------------------------------------------------------------------------------
//1. 選擇圖庫：(以淘寶素材庫爲例)
淘寶： http://iconfont.cn/collections?spm=a313x.7781069.0.0.KmfS4h
ICO Moon： https://icomoon.io/app/#/select
Font Awesome: http://www.bootcss.com/p/font-awesome/
//2. 找到所需素材下載到本地（包含 css 和ttf文件）
//3. 修改 iconfont.css 文件中的 【@font-face】
保留所需的 ttf字體便可,以下:修改url增長相對路徑 src:url('.../fonts/');
@font-face {font-family: "iconfont";
src:url('.../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}
//4. 將 iconfont.css 拷貝到項目的fonts目錄下，iconfont.ttf 拷貝到項目的css目錄下。
//5. mui中使用：
// class ：
// mui-icon ：寫死
// iconfont ：自定義圖片字體的類名
// icon-nanzhuang ： 自定義的icon名字
'''【如何判斷預加載是否生效】-------------------------------------------------------------------------------
1. 直觀判斷，預加載成功打開新頁面很快不會有加載等待
2. log分析
'''【MUI_JavaScript 函數 http://dev.dcloud.net.cn/mui/util/】-------------------------------------------------------------------------------
【窗口管理】
//1.初始化MUI 和 準備 mui.init(); / mui.plusReady()；
目前支持在mui.init方法中配置的功能包括：
建立子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色
代碼案列：
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:{}//額外擴展參數
}],
//預加載
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口參數
extras:{},//自定義擴展參數
subpages:[{},{}]//預加載頁面的子頁面
}
],
//下拉刷新
pullRefresh : {
//...
},
//上拉加載
pullRefresh : {
//...
},
//手勢配置
gestureConfig:{
//...
},
//側滑關閉
swipeBack:true, //Boolean(默認false)啓用右滑關閉功能
//監聽Android手機的back、menu按鍵
keyEventBind: {
backbutton: false, //Boolean(默認truee)關閉back按鍵監聽
menubutton: false //Boolean(默認true)關閉back按鍵監聽
},
//處理窗口關閉前的業務
beforeback: function() {
//... //窗口關閉前處理其餘業務詳情點擊 ↑ "關閉頁面"連接查看
},
//設置狀態欄顏色
statusBarBackground: '#9defbcg', //設置狀態欄顏色,僅iOS可用
});
//在app開發中，若要使用HTML5+擴展api，必須等plusready事件發生後才能正常使用mui.plusReady();
// 2.打開新頁面
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,//等待框背景區域高度，默認根據內容自動計算合適高度
......
}
}
})
// 3.關閉頁面
mui框架將窗口關閉功能封裝在mui.back方法中，具體執行邏輯是：
若當前webview爲預加載頁面，則hide當前webview；
不然，close當前webview；
在mui框架中，有三種操做會觸發頁面關閉（執行mui.back方法）：
// 使用參考（http://dev.dcloud.net.cn/mui/window/#openwindow）
1. 點擊包含.mui-action-back類的控件
2. 在屏幕內，向右快速滑動
3. Android手機按下back按鍵
''''' 除了如上三種操做外，也能夠直接調用mui.back()方法，執行窗口關閉邏輯；
// 4.預加載頁面
方式一：經過mui.init方法中的preloadPages參數進行配置.
/*
優勢:1.可預加載多個頁面
缺點:1. 不會返回預加載每一個頁面的引用，
2.得到對應webview引用，plus.webview.getWebviewById方式得到
3.是異步執行，執行完mui.init方法後當即得到對應webview引用可能會失敗
*/
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口參數
extras:{},//自定義擴展參數
subpages:[{},{}]//預加載頁面的子頁面
}
],
preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
});
方式二：經過mui.preload方法預加載.// 可當即返回對應webview的引用，但一次僅能預加載一個頁面
/*
優勢:1.可當即返回對應webview的引用
缺點:1. 但一次僅能預加載一個頁面
*/
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默認使用當前頁面的url做爲id
styles:{},//窗口參數
extras:{}//自定義擴展參數
});
【事件管理】
// 1.事件綁定：addEventListener() / .on()
除了可使用[【addEventListener()】方法監聽某個特定元素上的事件外， 也可使用【.on()】方法實現批量元素的事件綁定。
''''' 【 .on( event , selector , handler ) 】
event
Type: String
需監聽的事件名稱，例如：'tap'
selector
Type: String
選擇器
handler
Type: Function( Event event )
事件觸發時的回調函數，經過回調中的event參數能夠得到事件詳情
//2.事件取消：off()
''''' 【 .off( event , selector , handler ) 】
event
Type: String
需取消綁定的事件名稱，例如：'tap'
selector
Type: String
選擇器
handler
Type: Function
以前綁定到該元素上的事件函數，不支持匿名函數
''''' 【 .off( event , selector) 】
event
Type: String
需取消綁定的事件名稱，例如：'tap'
selector
Type: String
選擇器
''''' 【 .off( event ) 】
event
Type: String
需取消綁定的事件名稱，例如：'tap'
''''' 【 .off( ) 】
空參數，刪除該元素上全部事件
// 3. 事件觸發 mui.trigger() 使用mui.trigger()方法能夠動態觸發特定DOM元素上的事件。
''''' 【.trigger( element , event , data )】
element
Type: Element
觸發事件的DOM元素
event
Type: String
事件名字，例如：'tap'、'swipeleft'
data
Type: Object
須要傳遞給事件的業務參數
// 示例 自動觸發按鈕的點擊事件：
var btn = document.getElementById("submit");
//監聽點擊事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//觸發submit按鈕的點擊事件
mui.trigger(btn,'tap');
//4. 手勢事件
分類 參數 描述
----------------------------------------
| tap | 單擊屏幕
點擊 -------------------------------
| doubletap | 雙擊屏幕
----------------------------------------
| longtap | 長按屏幕
-------------------------------
長按 | hold | 按住屏幕
-------------------------------
| release | 離開屏幕
----------------------------------------
| swipeleft | 向左滑動
-------------------------------
| swiperight | 向右滑動
滑動 -------------------------------
| swipeup | 向上滑動
-------------------------------
| swipedown | 向下滑動
-----------------------------------------
| dragstart | 開始拖動
-------------------------------
| drag | 拖動中
拖動 -------------------------------
| dragend | 拖動結束
-----------------------------------------
使用：經過mui.init方法中的gestureConfig參數，配置具體須要監聽的手勢事
/**
注意:dragstart、drag、dragend共用drag開關，swipeleft、swiperight、swipeup、swipedown共用swipe開關*/
// 配置：
mui.init({
gestureConfig:{
tap: true, //默認爲true
doubletap: true, //默認爲false
longtap: true, //默認爲false
swipe: true, //默認爲true
drag: true, //默認爲true
hold:false, //默認爲false，不監聽
release:false //默認爲false，不監聽
}
});
// 使用：
單個元素上的事件監聽，直接使用addEventListener(0便可，以下：
elem.addEventListener("swipeleft",function(){
console.log("你正在向左滑動");
});
若多個元素執行相同邏輯，則建議使用事件綁定(on())。
*/
//5. 自定義事件：（頁面傳值）
5.1 添加自定義事件監聽操做和標準js事件監聽相似，可直接經過window對象添加，以下：
window.addEventListener('customEvent',function(event){
//經過event.detail可得到傳遞過來的參數內容
....
});
5.2 觸發自定義事件,經過mui.fire()方法可觸發目標窗口的自定義事件：
目標webview必須觸發loaded事件後才能使用自定義事件
''''' 【 .fire( target , event , data ) 】
target
Type: WebviewObject
需傳值的目標webview
event
Type: String
自定義事件名稱
data
Type: JSON
json格式的數據
/** 實列：
【A.html】
1. 預加載B.html頁面 preload()
mui.plusReady(function() {
var page = mui.preload({
url:'examples/zidingyi.html',
id:'zcmain'
});
});
2. 觸發自定義事件
var webviews = plus.webview.getWebviewById("zcmain"); // 根據Id 獲取B.html 的webview
alert("webviews = " + webviews);
mui.fire(webviews,'intents',{zcmains:'zhangchao'}); // 像B.html頁面傳遞參數
mui.openWindow({ // 打開B.html
url:'examples/zidingyi.html',
id:'zcmain'
});
【B.html】
1. 監聽自定義事件 獲取去A.html 頁面傳遞過來的數據
window.addEventListener('intents',function(event){
//得到事件參數
var id = event.detail.zcmains;
alert("id = " + id);
//根據id向服務器請求新聞詳情
});
*
*/
【utils】
1. init(); // 初始化
建立子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色（僅支持ios）。
2. mui(); // mui使用css選擇器獲取HTML元素，返回mui對象數組。
mui("p")：選取全部元素
mui("p.title")：選取全部包含.title類的元素
mui("#loginbt"); 選取id爲loginbt的元素
mui(".registerbt");選取class爲registerbt的元素
//若要將mui對象轉化成dom對象，可以使用以下方法（相似jquery對象轉成dom對象）：
//obj1是mui對象 var obj1 = mui("#title");
//obj2是dom對象 var obj2 = obj1[0];
3. each() // 既是一個類方法，同時也是一個對象方法
mui.each( obj , handler ) obj Type: Array||JSONObj 需遍歷的對象或數組；
若爲對象，僅遍歷對象根節點下的key handler Type: Function( Integer||String index,Anything element) 爲每一個元素執行的回調函數；其中，index表示當前元素的下標或key，element表示當前匹配元素
// each 遍歷數組/json字符串 var array = [1,2,3];
// 數組 var str = {"name":"zcmain","age":"30","sex":"男"};
// json字符串 each_array.addEventListener('tap',function(){
// 遍歷json字符串 mui.each(str,function(index,item){ log("index = " + index + "\nitem = " + item); });
// 遍歷數組 mui.each(array,function(index,item){ log("index = " + index + "\nitem = " + item); }); });
4. scrollTo();
// 滑動（僅支付縱向） mui.scrollTo(500,1000,functioin(){});
// 500-華東距離；1000-執行動時間（毫秒）；function-滑動結束回調函數
5. os
// 判斷當前運行環境的需求, 使用： mui.os.XXX便可
// Android(能夠訪問的參數爲:) .wechat 返回是否爲微信端 .android 返回是否爲安卓手機 .version 安卓版本號 .isBadAndroid android非Chrome環境
// iOS(能夠訪問的參數爲:) .iOS 返回是否爲蘋果設備 .version 返回手機版本號 .iphone 返回是否爲蘋果手機 .ipad 返回是否爲ipad
// plus(能夠訪問的參數爲:) .plus 返回是否在基座中運行 .stream 返回是否爲流應用 【Ajax】
// MUI封裝Ajax函數 支持GET、POST請求方式，
// 支持返回json、xml、html、text、script數據類型 mui.ajax('http://server-name/login.php',{ data:{ // 發送到服務器的業務數據 username:'username', password:'password' },
/* dataType,預期服務器返回的數據類型，可選值以下： "xml": 返回XML文檔 "html": 返回純文本HTML信息； "script": 返回純文本JavaScript代碼 "json": 返回JSON數據 "text": 返回純文本字符串 */ dataType:'json', type:'post', //HTTP請求類型，目前僅支持'GET'和'POST'，默認爲'GET'方式 timeout:10000, //請求超時時間（毫秒），默認值爲0，表示永不超時，若是超時會觸發 error 回調。 success:function(data){ //服務器返回響應，根據響應結果，分析是否登陸成功； ... }, error:function(xhr,type,errorThrown){ //異常處理； console.log(type); } });
相關文章
- 1. Mui筆記
- 2. mui筆記
- 3. websocket 初探·練習筆記
- 4. CSS-MUI：筆記-01
- 5. mui學習筆記
- 6. mui框架探索
- 7. 菜渣初探mongodb--筆記篇
- 8. python 筆記 提示與pydoc初探——12.25
- 9. nginx 學習筆記之nginx初探（一）
- 10. cocos2d-x初探學習筆記（18）--Lable
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • 探索Redis事務回滾 - Redis教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Mui筆記
- 2. mui筆記
- 3. websocket 初探·練習筆記
- 4. CSS-MUI：筆記-01
- 5. mui學習筆記
- 6. mui框架探索
- 7. 菜渣初探mongodb--筆記篇
- 8. python 筆記 提示與pydoc初探——12.25
- 9. nginx 學習筆記之nginx初探（一）
- 10. cocos2d-x初探學習筆記（18）--Lable