MUI+Hbuilder之踩坑（三）

1.1获取input值单个

<input id="inputid" type="text" value="aaa"/>

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值列表

<div id="aaa" onclick="fn_()">click me</div>
    <div class="aaaa">
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </div>

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！】
列表是可以用的

<div id="vuelist">
    <h1 v-for="item in itemlist" @tap="fn_()">test</h1>
</div>
js:
var vm = new Vue({
    el:'#vuelist',
    data:{itemlist:[1,2,3]}
});
function fn_(){  //todo }

但是单个的就不行

//错误，用tap这个fn_()是无效的
<div id="aaa" @tap="fn_()">click me</div>
//简单的mbody元素中正确。但是这个尽量不要用，场景不同它不一定都生效
<div id="aaa" onclick="fn_()">click me</div>

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<a href = ""></a>跳转

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