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
