1.1获取input值单个

js:

var input_ = document.getElementById('inputid');

var input_mui = mui('#inputid');

console.log(input_.value);//aaa

console.log(input_mui.value);//undefind

console.log(input_mui[0].value);//aaa

mui元素药转成DOM元素才能用。。什么鬼！

用mui元素+“[0]”来转

1.2获取input值列表

js:

function fn_(){

mui('#formid input').each(function(k,v){

console.log(v.value);//ok的，该什么是什么

});

}

1.3点击问题(tap)

【此处注意一下，像带mui，addEventListener("tap"很像mui标签的代码的时候，都写在mui.init()这句话的后面！！！skr！skr！】

列表是可以用的

js:

var vm = new Vue({

el:'#vuelist',

data:{itemlist:[1,2,3]}

});

function fn_(){ //todo }

但是单个的就不行

//错误，用tap这个fn_()是无效的

//简单的mbody元素中正确。但是这个尽量不要用，场景不同它不一定都生效

1.4点击问题(单个元素)

//错误

mui('#addlisten').on("tap",function () {

console.log('mmm');

appendCon.appendChild(children);

});

//正确,有效的

var btn = document.getElementById("addlisten");

//监听点击事件

btn.addEventListener("tap",function () {

console.log("tap event trigger");

});

//错误

mui("addlisten").addEventListener("tap",function () {

console.log("tap event trigger");

});

//正确,有效的

mui('#addlistenCon').on("tap","#addlisten",function () {

console.log("tap event trigger");

});

1.5mui元素动态添加

mui('#addlistenCon').on("tap","#addlisten",function () {

var div_ = document.createElement('div');//这个div你如果定义在外面的话，就只能用一次

div_.innerHTML = 'get!!';

document.getElementById('lazyCon').appendChild(div_);

});

1.6事件代理

div是#lazyCon中动态生成的元素

//正确

mui('#lazyCon').on("tap","div",function () {

});

//正确

mui('#lazyCon').on("click","div",function () {

});

嗯，动态生产的a标签也是可以点击跳转的哈

1.7vue和mui结合的数据加载

这么写哈！！！一天整那些乱七八糟的！！

mui.init();

var vm = new Vue({

el: '.mui-content',

data: {

content:'ori'

},

mounted: function (){

this.content = 'jack'

mui.ajax('../datatest/test.json', {

type:'GET',

dataType: 'json', //服务器返回json格式数据

success: function(res) {

vm.content = 'Jack1...'

console.log(this.content);

},

error: function(xhr, type, errorThrown) {

mui.toast('获取文章内容失败');

//TODO 此处可以向服务端告警

}

});

},

methods:{

}

});

1.8询问框

mui.confirm('确定要删除该订单吗？','',['取消','确定'],function(e){

if(e.index == 1){

mui.toast('shanchu ');

}else{

mui.toast('nonono ');

}

});

1.9跳转

mui('body').on('tap','a',function(){

window.top.location.href=this.href;

});

2.0复制粘贴功能实现

document.getElementById('span_copy').addEventListener('tap',function(){

var vbillno = document.getElementById('vbillno').innerText;

switch(plus.os.name){

case 'iOS':

//获取剪切板

var UIPasteboard = plus.ios.importClass("UIPasteboard");

var generalPasteboard = UIPasteboard.generalPasteboard();

// 设置/获取文本内容

generalPasteboard.setValueforPasteboardType(vbillno, "public.utf8-plain-text");

var value = generalPasteboard.valueForPasteboardType("public.utf8-plain-text");

break;

case 'Android':

var Context = plus.android.importClass("android.content.Context");

var main = plus.android.runtimeMainActivity();

var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);

plus.android.invoke(clip,"setText",vbillno);

break;

}

mui.toast("订单号已复制成功");

});

2.1返回上一页并刷新

这个很常用，一个list表单，点其中一个跳到编辑页面，提交返回并刷新

//返回上一页

mui.oldback = mui.back;

function goback(){

plus.webview.currentWebview().opener().reload();

mui.oldback();

}

//但有时我们会a-b-c

希望直接返回上上一页,从c返回a

a-b时用formpage_id = plus.webview.currentWebview().opener().id获取a的页面id，

为什么不直接传值呢？因为真实的项目情况是如果b页面变得经常被复用，那么你是否要给a1，a2，a3....页面都去加一个专属id？很麻烦不好维护

b-c时将该值formpage_id 传给c

plus.webview.getWebviewById(formpage_id).reload();

唉~~~(>_

image.png