这篇文章就是在MUI项目开发中碰到的一点东西，很基础的杂项，等后面回头看的时候，算是一个小总结，如有错误，欢迎指正。
一、数据相关
1.1、JSON相关
1.1.1、把字符串转换为json对象
JSON.parse('{"p": 5}');当然后面还有一个可选函数，可以用，可以不用
JSON.parse('{"p": 5}', function(k, v) { if (k === '') { return v; }
return v * 2;
});
1.1.2、json对象转换为字符串
JSON.stringify(data)
1.2、界面传值<br/>
1.2.1、可以使用storage存储本地
存储<br/>
plus.storage.setItem("idfa", "123456");获取
plus.storage.getItem("idfa");1.2.2、可以在创建界面的时候，使用extras关键字
创建界面
mui.openWindow("telphone.html","tlephone.html",{styles:{
"top":"45px",//新页面顶部位置
"bottom":"60px",//新页面底部位置
},
"extras":{
"musicId":id,
"audioUrl":audioUrl,
"songPic":songsPic//自定义扩展参数，可以用来处理页面间传值
},
});
新界面接收
mui.plusReady(function () {var self = plus.webview.currentWebview();
var musicId =self.musicId;
var audioUrl =self.audioUrl;
var songPic =self.songPic;
});
1.3、URL结构解析
1.3.1、获取当前界面url
var urlss= window.location.href;
1.3.2、截取URL字段
从http://www.hudongdong.com/?code=1234567890&;state=888;截取1234567890<br/>
var s = urlss.substring(urlss.indexOf("?code")+6,urlss.indexOf("&state"));1.3.3、系统函数
这几个系统函数的总结是在《jQuery获取地址栏中的链接参数》看到的，直接复制过来了
对于像下面这样的网址
<br/>http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
我们可以用javascript获得其中的各个部分
<br/>1, window.location.href-----------整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
<br/>2,window.location.protocol---------URL 的协议部分
本例返回值:http:
<br/>3,window.location.host----------URL 的主机部分
本例返回值:www.caibaojian.com
<br/>4,window.location.port-----URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:""
<br/>5,window.location.pathname(URL 的路径部分(就是文件地址)）
本例返回值:/fisker/post/0703/window.location.html
<br/>6,window.location.search-------查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6
<br/>7,window.location.hash-------锚点
本例返回值:#imhere
二、界面相关
2.1、杂项<br/>
2.1.1、JS文件引入<br/>
js引入时，js/mui.min.js和js/mui.js引用一个即可，不要重复引入，否则会造成按钮响应tap事件的时候，响应两次tap的函数
2.1.2、添加点击事件<br/>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars"></a>
<h1 class="mui-title">标题2</h1>
</header>
<script type="text/javascript">
//如果on里面function想设置成其他函数，只要函数名即可
mui(".mui-bar").on("tap",".mui-icon-bars",function () {
console.log("ssss");
});
//或者
document.querySelector(".mui-icon-bars").addEventListener('tap',function (e) {console.log("ssss");});
</script>
2.1.3、调用oc
JS调用OC完整可以看这个文章《MUI框架之js和oc互调》
var s = plus.ios.importClass("testDemo");
var m =s.Instantce();
var l = m.testss();
m.testLog("1000");
console.log("s:"+s);
plus.nativeUI.toast("@@@@@@");2.1.4、定时器
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。使用之后，要释放
//创建
settime = setInterval(function() { showtime();}, 1000);
//释放
if(true) {
clearInterval(settime);
}
setTimeout()可以指定时间延迟调用函数
setTimeout(function() {new CountUp("p_balance", 0, amount, 2, 2).start();
}, 100);</pre><h2>2.2、确认框</h2><pre class="prettyprint lang-cpp linenums">mui.confirm(m,s,["q","p"],function (e) {
console.log(e.index);
})
2.3、飘窗<br/>
飘窗可以使用mui的，也可以h5+的
plus.nativeUI.toast("@@@@@@")
mui.toast("ssss");提醒窗可以使用mui的或者自带的
mui.alert("ssss");
alert("mmmm");等待窗
plus.nativeUI.showWaiting();
2.4、原图片不该样式只变黑白
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); filter: gray;
}
<img src="mm1.jpg" />
<img src="mm1.jpg" class="gray" />
2.5、获取指定节点
可以通过id或者class两种方式获取符合条件的节点，使用mui()的方法，也可以使用document自己的方法
mui的方法就是mui()，比如
mui(".mui-bar")document的函数
//获取页面ID属性为test的元素,三种都可以：
document.getElementById("test");
document.querySelector("#test");
document.querySelectorAll("#test")[0];//获取页面class属性为”red”的元素，三种都可以:
document.getElementsByClassName('red')
//or
document.querySelector('.red')
//or
document.querySelectorAll('.red')
为指定节点添加响应函数，在函数中可以使用this来标识当前响应节点，而function里面的参数是标识的响应主体，就是鼠标的左右键
<section class="page1">
<div class="question_And_Options">
<p class="question_Title">正在获取问题...</p>
<ul class="options_List">
<li class="option_choseA" id="ll">
<input class="redio" type="radio" name="ss" id="11"/>
<label>A:是</label>
</li>
<li class="option_choseA" id="mm">
<input class="redio" type="radio" name="ss" id="22"/>
<label>B:不是</label>
</li>
</ul>
</div>
</section>
<hr />
<script type="text/javascript">
for (var i = 0; i < document.querySelectorAll(".option_choseA").length; i++) {
var m =document.querySelectorAll(".option_choseA")[i];
m.addEventListener("click",function (e) {
//alert(m.id);
alert(this.id);
});
}
如果是一个div的class使用了多个类，可以直接用.class1.class2过滤，中间不要有空格，比如
<div class="mm nn">ooooooooo;</div>
可以使用下面这个过滤获取，比如设置隐藏
document.querySelector(".mm.nn").style.display = "none"
//如果只有这一个节点是mm，使用下面这个也可以获得.mm.nn
document.querySelector(".mm").setAttribute("class","ll");也可以使用jquery过滤获取
//依次过滤
$(“.good”).filter(“.list”).filter(“.Card”)//属性选择
$(“[class='good list Card']“);此处 顺序必须一致才行//直接
$(“.good.list.Card”)
2.6、窗口响应事件<br/>
h5+中，窗口事件可以参考：WebviewEvent，doc的事件可以参考：HTML DOM 事件
因为手机和pc不同，所以mui内置了几个手势事件
//通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件。
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false，不监听
release:false//默认为false，不监听
}
});
//注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关
MUI自定义事件：事件管理，
自定义的事件仅能在5+ App及流应用中使用，无法在手机浏览器、微信中使用；
addEventListener绑定自定义函数，或者通过mui的on绑定，使用mui.trigger()方法可以动态触发特定DOM元素上的事件。通过mui.fire()方法可触发目标窗口的自定义事件
//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
//获得事件参数
var id = event.detail.id;
});
//窗口fire响应监听事件
detailPage = plus.webview.getWebviewById('detail.html');
//触发详情页面的newsId事件
mui.fire(detailPage,'newsId',{
id:id
});//doc节点响应函数
var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');
2.7、获取window窗口大小<br/>
var width = window.innerWidth || document.documentElement.clientWidth;
三、参考文章<br/>
版权属于：胡东东博客
本文链接：http://blog.hudongdong.com/mui/375.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！
☟☟如文章有用，可点击一次下方广告支持一下☟☟
