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

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

来源：CSDN

作者：zZipSun

链接：https://blog.csdn.net/zspppppp/article/details/78918476

标签

webview

mui