MUI项目的开发杂记

Author：东东
发布时间：October 18, 2016
7465 views
No comments
12798 字数
Categories： mui框架

这篇文章就是在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、界面传值

1.2.1、可以使用storage存储本地

存储

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

var s = urlss.substring(urlss.indexOf("?code")+6,urlss.indexOf("&state"));

1.3.3、系统函数

这几个系统函数的总结是在《jQuery获取地址栏中的链接参数》看到的，直接复制过来了

对于像下面这样的网址

http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分

1, window.location.href-----------整个URl字符串(在浏览器中就是完整的地址栏)

本例返回值: http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

2,window.location.protocol---------URL 的协议部分

本例返回值:http:

3,window.location.host----------URL 的主机部分

本例返回值:www.caibaojian.com

4,window.location.port-----URL 的端口部分

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符

本例返回值:""

5,window.location.pathname(URL 的路径部分(就是文件地址)）

本例返回值:/fisker/post/0703/window.location.html

6,window.location.search-------查询(参数)部分

除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

本例返回值:?ver=1.0&id=6

7,window.location.hash-------锚点

本例返回值:#imhere

二、界面相关

2.1、杂项

2.1.1、JS文件引入

js引入时，js/mui.min.js和js/mui.js引用一个即可，不要重复引入，否则会造成按钮响应tap事件的时候，响应两次tap的函数

2.1.2、添加点击事件

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

2.2、确认框

mui.confirm(m,s,["q","p"],function (e) {
    console.log(e.index);
})

2.3、飘窗

飘窗可以使用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、窗口响应事件

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窗口大小

var width = window.innerWidth || document.documentElement.clientWidth;

三、参考文章

版权属于：胡东东博客
本文链接：http://blog.hudongdong.com/mui/375.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！

☟☟如文章有用，可点击一次下方广告支持一下☟☟

Last modification：January 1st, 1970 at 08:00 am

如果觉得我的文章对你有用，请随意打赏: ☞已打赏列表

MUI项目的开发杂记

东东 • 2016 年 10 月 18 日

这篇文章就是在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、界面传值

1.2.1、可以使用storage存储本地

存储

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

var s = urlss.substring(urlss.indexOf("?code")+6,urlss.indexOf("&state"));

1.3.3、系统函数

这几个系统函数的总结是在《jQuery获取地址栏中的链接参数》看到的，直接复制过来了

对于像下面这样的网址

http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分

1, window.location.href-----------整个URl字符串(在浏览器中就是完整的地址栏)

本例返回值: http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

2,window.location.protocol---------URL 的协议部分

本例返回值:http:

3,window.location.host----------URL 的主机部分

本例返回值:www.caibaojian.com

4,window.location.port-----URL 的端口部分

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符

本例返回值:""

5,window.location.pathname(URL 的路径部分(就是文件地址)）

本例返回值:/fisker/post/0703/window.location.html

6,window.location.search-------查询(参数)部分

除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

本例返回值:?ver=1.0&id=6

7,window.location.hash-------锚点

本例返回值:#imhere

二、界面相关

2.1、杂项

2.1.1、JS文件引入

js引入时，js/mui.min.js和js/mui.js引用一个即可，不要重复引入，否则会造成按钮响应tap事件的时候，响应两次tap的函数

2.1.2、添加点击事件

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

2.2、确认框

mui.confirm(m,s,["q","p"],function (e) {
    console.log(e.index);
})

2.3、飘窗

飘窗可以使用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、窗口响应事件

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及流应用中使用，无法在手机浏览器、微信中使用；

//添加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窗口大小

var width = window.innerWidth || document.documentElement.clientWidth;

三、参考文章

版权属于：胡东东博客
本文链接：http://blog.hudongdong.com/mui/375.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！

☟☟如文章有用，可点击一次下方广告支持一下☟☟

一、数据相关

1.1、JSON相关

1.1.1、把字符串转换为json对象

1.1.2、json对象转换为字符串

1.2、界面传值

1.2.1、可以使用storage存储本地

1.2.2、可以在创建界面的时候，使用extras关键字

1.3、URL结构解析

1.3.1、获取当前界面url

1.3.2、截取URL字段

1.3.3、系统函数

二、界面相关

2.1、杂项

2.1.1、JS文件引入

2.1.2、添加点击事件

2.1.3、调用oc

2.1.4、定时器

2.2、确认框

2.3、飘窗

2.4、原图片不该样式只变黑白

2.5、获取指定节点

2.6、窗口响应事件

2.7、获取window窗口大小

三、参考文章