那些年我用MUI开发遇过的坑

MUI号称是性能最接近原生的跨平台开发框架,我一开始也被它仿ios的设计吸引了,所以决定在项目中使用它。平心而论,用html5开发app在ios上的体验确实是蛮不错的,基本上可以与原生app的媲美。但是在android上性能的差别还是非常明显的,尤其是在低端的android手机中,性能体验就更加不堪入目了(当然这其中也可能有我优化没做好的原因。。。。)

言归正传,下面就开始来说一下我在开发中遇到的一些问题以及解决的方法(仅仅是本人的一些思路和做法,大神勿喷)。

1)mui.plusReady()这个方法只会执行一次
相信这个问题很多第一次使用这个框架的同学都会遇到。所幸的是现在新版的开发文档中已经标注了这个问题了(0.0不用像我第一次开发遇到这个问题时那样一脸懵逼)。关于这个问题详细的文档资料可以查看官方文档 —窗口管理 · MUI

由于这个问题的存在,这就会使我们一个返回刷新的操作变得困难。举个栗子,当我有一个列表类似于下图的一个列表,当我点击一条数据进入里面操作后,我希望返回时,列表的数据会刷新一下。就是这么一个简单的操作,如果我们只是简单的在mui.plusReady()中调用获取列表的函数,那么恭喜,当操作完再次进入这个页面时这个函数是不会再次执行的,除非你之前把这个页面彻底的close了。(但是这样做并不推荐,因为会很耗费资源)

我个人的做法是在操作页面,操作完之后通过plus.webview.getWebviewById()获取列表所在的webview,然后通过evalJs()的方法去执行获取列表的方法来实现刷新列表的操作。同理,在打开过一次页面之后,想再次对该页面进行操作,也可以使用这种方法实现。

这仅仅是我个人的一些心得体会,希望能跟大家分享一下。(大家不喜欢的也不要喷我。。。)希望以后能继续分享更多的东西给大家。

前些日子我开发的时候遇到了一个小问题(如图),在这个页面我有一个弹出菜单(popover),如果我不将菜单隐藏直接打开一个新的页面,那么神奇的事就发生了,这个菜单将会一直处于active状态,不会隐藏起来。
正常情况下,可能不是什么大问题,但是还是很影响用户体验的,也有可能会影响其他功能的实现。针对这个问题我上网百度了一下,有说利用mui(‘#popover’).popover(‘hide’)可以强制隐藏popover,但是我试过好像并不起作用。后来我在Dcloud的官方论坛上找到了一个比较靠谱的解决方案。原理就是在框架中重写一个隐藏的方法。具体的可以参见以下地址:

mui-popover如何强制隐藏 – DCloud问答

由于mui的不断更新,可能文章里面说的代码行数不一定正确,但是只要将代码复制到差不多的位置,还是可以运行成功的。我尝试了一下,这次popover总算是成功的藏起来了。但是又有一个问题衍生出来了,虽然popover隐藏起来了,但是我总感觉它好像一直存在。。。。。(多么灵异的事件啊)。。。于是我查看了一下代码,果然

他隐藏的方法只是将CLASS_ACTIVE这个class移除掉,那么这个CLASS_ACTIVE有是什么 呢,于是我又查看了一下源码,原来他只不过是将popover的透明度变回去了,难怪我觉得它一直都在。

对于这个问题修改起来其实也容易,我们只需要在上面hidePopover的方法中,添上一句或直接将popover.classList.remove(CLASS_ACTIVE)这句用popover.style.display=’none’,来代替就可以了。

MUI尝过的坑和重要知识点总结

1:自带的各种标签的 样式权重过高,重写不方便(和BootStrap比较来说,BootStrap更加灵活)
2:链接跳转。常规的a标签 加href是无法跳转的,浏览器有效,但是在手机上运行是无效的
需要添加mui的定义的点击事件。
分两种
(1):页面已存在的跳转标签

<script>
document.getElementById(‘user-guide’).addEventListener(‘tap’, function() {
//打开关于页面
var newsid=$(this).find(“.news-id”).html();
mui.openWindow({
url: ‘use-guide.html’,
id: ‘use-guide’
});
});
</script>

(2):页面不存在的跳转标签(还可以在链接跳转过程中 添加传递的参数)

<script>
mui(“body”).on(‘tap’,”#detail-news”, function() {
//打开关于页面
var newsid=$(this).find(“.news-id”).html();
console.log(“newsid”);
mui.openWindow({
url: ‘detail-news.html?’+newsid,
id: ‘detail-news’
});
});
</script>

接受页面的处理:

var newsid = window.location.href.split(‘?’)[1];
1
3:页面过长,滑动没有效果
关键类:mui-scroll-wrapper
添加一个js就可以实现 页面滑动

mui(‘.mui-scroll-wrapper’).scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
1
2
3
4:第三方 分享实现

在HBuilder中新创建新webapp项目 勾选 带登陆和设置的模板

里面包含
第三方登陆
分享
图案锁屏
5:关于模态框
模态框尽量放在根节点的子目录下(不要放在嵌套层),防止最外层的遮罩层的级别过高,覆盖模态框,导致点击事件无法触发响应
6:MUI修改手机物理back的方法
首页的退出修改:

<script>
document.addEventListener(“plusready”, function() {
// 注册返回按键事件
plus.key.addEventListener(‘backbutton’, function() {
// 事件处理
plus.nativeUI.confirm(“退出程序?”, function(event) {
if (event.index) {
plus.runtime.quit();
}
}, null, [“取消”, “确定”]);
}, false);
});
</script>

//方法二
<script>
var back_first = null;
mui.back = function() {
if(!back_first) {
back_first = new Date().getTime();
mui.toast(‘再按一次退出应用’);
setTimeout(function() {
back_first = null;
}, 2000);
} else {
if(new Date().getTime() – back_first < 2000) {
plus.runtime.quit();
}
}
return false;
}
</script>

首页进入子页面后 返回上一层的返回按钮注册

<script>
document.addEventListener(“plusready”, function() {
// 注册返回按键事件
plus.key.addEventListener(‘backbutton’, function() {
// 事件处理
window.history.back();
}, false);
});
</script>

屏蔽返回按钮

var old_back = mui.back;
mui.back = function(){
return false;
}
1
2
3
4
7:实现原生APP里的进入导航实现,还可以,对进入的次数做监听
首次进入显示导航,以后进入都不需要导航
首页需要添加的事件

// 设置启动时的轮播页
function launchScreen() {
//读取本地存储,检查是否为首次启动
var showGuide = plus.storage.getItem(“lauchFlag”);

// if(showGuide){
// //有值,说明已经显示过了,无需显示;
// //关闭splash页面;
// plus.navigator.closeSplashscreen();
// plus.navigator.setFullscreen(false);
// }else{
// //显示启动导航
// mui.openWindow({
// id:’guide’,
// url:’guide.html’,
// show:{
// aniShow:’none’
// },
// waiting:{
// autoShow:false
// }
// });
// }
//测试期间,为了让导航页每次显示,就不做以上判断
//显示启动导航
mui.openWindow({
id:’guide’,
url:’guide.html’,
show:{
aniShow:’none’
},
waiting:{
autoShow:false
}
});
}
</script>

调用方法

<script type=”text/javascript”>
//只要是MUI都会有初始化的过程
mui.init()
//创建子页面 初始化导航
mui.plusReady(function() {
launchScreen();
});
</script>

guide.html页面的实现

<body>
<div id=”slider” class=”mui-slider mui-fullscreen” style=”background-color: black;”>
<div class=”mui-slider-group”>

<!– 第1张 –>
<div class=”mui-slider-item”>
<img src=”img/leader1.jpg”>
</div>
<!– 第2张 –>
<div class=”mui-slider-item”>
<img src=”img/leader2.jpg”>
</div>
<!– 第3张 –>
<div class=”mui-slider-item”>
<img src=”img/leader3.jpg”>
<button id=’close’ class=”mui-btn mui-btn-warning mui-btn-outlined”></button>
</div>
</div>
<div class=”mui-slider-indicator”>
<div class=”mui-indicator mui-active”></div>
<div class=”mui-indicator”></div>
<div class=”mui-indicator”></div>
</div>
</div>
<script type=”text/javascript” src=”js/mui.min.js” ></script>
<script>
mui.back = function() {};
mui.plusReady(function() {
plus.navigator.setFullscreen(true);
plus.navigator.closeSplashscreen();
});
//立即体验按钮点击事件
document.getElementById(“close”).addEventListener(‘tap’, function(event) {
plus.storage.setItem(“lauchFlag”, “true”);
plus.navigator.setFullscreen(false);
plus.webview.currentWebview().close();
}, false);

</script>
</body>

thedarkside

这是一个最好的时代,这是一个最坏的时代。

stay connected

228,480

Fans

21,563

Followers

20,563

Followers

8,125

Subscribers

2,253

Subscribers

10,563

Followers

最新文章

entertainment
Buckingham Palace soil used in Tate exhibit
Oct 13, 2016
Sports
Legendary coach Steve Spurrier was truly
Oct 13, 2016
Technology
Acer reveals all-in-one Windows 10 PC
Oct 13, 2016
entertainment
Revival allows Selena Gomez to shed
Oct 13, 2016
entertainment
Buckingham Palace soil used in Tate exhibit
Oct 13, 2016
Sports
Legendary coach Steve Spurrier was truly
Oct 13, 2016
Technology
Acer reveals all-in-one Windows 10 PC
Oct 13, 2016
entertainment
Revival allows Selena Gomez to shed
Oct 13, 2016