mui

MUI + SDK 使用筆記：

 

MUI是什麼：http://ask.dcloud.net.cn/article/91

 

/* 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名字

<span class="mui-icon iconfont icon-nanzhuang"></span>

 

 

'''【如何判斷預加載是否生效】-------------------------------------------------------------------------------

 

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")：選取全部<p>元素

mui("p.title")：選取全部包含.title類的<p>元素

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);

}

});