mui -笔记

最新推荐文章于 2024-09-13 20:00:32 发布

原创最新推荐文章于 2024-09-13 20:00:32 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

mui 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了mui的一些关键操作，包括webview的创建、显示与隐藏，事件绑定，页面初始化，正则表达式使用，自定义刷新事件以及gallery组件的使用。通过实例展示了如何在不同场景下使用mui进行应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，var self=plus.webview.currentWebview();//拿到当前窗体。
var se=plus.webview.create(当前url,id,样式);//创建窗体。
plus.webview.show(id);//显示窗体
se.hide();//隐藏窗体
self.append(se);//把se集合到self中。

2，mui 选择器：

mui("#id");

mui(".class");

var head=document.querySelector('.class');//得到一个对象。

批量绑定事件：
mui("").on("tap","a",functin);

mui.openWindow({url,id,style});//打开页面新页

单个绑定事件：

var btn = document.getElementById("director-wp-btn");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//自动触发，不用触及屏幕。
mui.trigger(btn,'tap');//如果要点击触发，那么不用写这行

3，页面初始化的时候创建子页面：
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px'//默认为0px，可不定义；
}
}]
});

4，正则表达式：
var regex1 = /$(.+?)$/g; // () 小括号
var regex2 = /\[(.+?)\]/g; // [] 中括号
var regex3 = /\{(.+?)\}/g; // {} 花括号，大括号

5，自定义刷新事件：
如：有2个页面，list.html 和desc.html
（1）,在list.html的mui.plusReady中添加刷新事件如：
mui.plusReady(function() {

   //当前页的mui.plueReady里添加刷新方法
   window.addEventListener('refresh', function(e){//执行刷新
       // location.reload();
       //alert(222);
       refreshPage();//调用刷新方法，方法中初始化各种条件
   })
}

（2），在desc.html的页面，如点击后退按钮时候要刷新list.html中页面
在 mui.init初始化中写，如：
   mui.init({
       beforeback: function(){

           //获得列表界面的webview
           var list = plus.webview.getWebviewById('list.html');
           // var list = plus.webview.currentWebview().opener();//或者这样获取list页面对象
           //触发列表界面的自定义事件（refresh）,从而进行数据刷新
           mui.fire(list,'refresh');

           //返回true，继续页面关闭逻辑（即调用mui.back()；关闭方法）
           return true;
       }
   });

可在后退图标上添加class="mui-action-back",然后点击后退图标就触发 list页面上自定义的监听的refresh();

6，plus.gallery.pick 打开手机相册或者照相，http://www.html5plus.org/doc/zh_cn/gallery.html

7，
a.appendChild(li);//追加到后面
a.insertBefore(li,a.firstChild);//添加到第一个对象的前面

阿里小图标：https://www.iconfont.cn/

var class= $(".class").prop("outerHTML");//获取div里的所有值（包含标签），包含本div
$(".class").remove();//删除节点

js根据class属性值获取所有有该class属性值的对象集合。
var a= document.getElementsByClassName("classname");//a[i].value

plus.gallery.pick 打开手机相册或者照相，http://www.html5plus.org/doc/zh_cn/gallery.html