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

}

});