mui

时间:2022-02-12 14:52:28
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);
}
});