自从移动端跨平台开发概念开始兴起后，出来很多解决方案，不管是框架生成原生控件，还是直接外面套个webview做个H5应用，这些方案都给移动开发带来了便利。Native+H5 hybrid、RN、ionic，以及jq mobile等等，还有我下面要讲的mui。
一、什么是MUI？
二、MUI有什么特点，为什么要用MUI？
在回答这个问题之前，我要先声明一下我的一个个人观点：我们在使用一个框架或者库的时候，应该尽量去迁就这个框架自身的特点，并且充分利用好这些特点，这样才有意义，不然你为什么不自己去写个框架呢？
1、专门为移动开发设计的。
MUI是专门为移动开发而设计的框架，来自DCloud的团队，不是从PC搬过来的，也没有过于冗余的设计，专注则必然专业。
2、轻巧。
正因为是专为移动开发而设计的，所以才轻巧。体积相比其他类似框架要小很多，H5在先天上确实比不上原生的体验和性能，所以我们更加要考虑它的精确而不冗余，不希望我们的页面加载过程中需要去初始化一些用不到的内容。
3、HBuilder开发工具的强力支持。
毕竟是一家的产品，可以说HBuilder为MUI的发展插上了翅膀，强大的提示功能以及代码块的实现真的非常方便，很多常用的功能都提供了快捷生成的功能，比如导航栏、Tab、图片轮播等等。另外打包过程也变得非常easy，云端打包，或者本地打包都可以。
4、HTML5+的支持。
H5+的提供了众多原生API可以调用，使得H5开发过程中能够更加逼近原生体验，包括UI、硬件调用、文件操作等等。
三、MUI开发中可能遇到的问题
1、MUI官方默认提供的App开发常用的字体图标没有合适的怎么办，是否可以自定义，如何扩展？
这个问题在官网文档中其实已经有给出答案了，也有相应的链接，我这里就搬个砖头，再链接一遍。
2、MUI中scroll不能滚动
- 第一种可能性：
检查dom层级是否有问题，这一点建议直接参考官方demo中的例子。
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>看看你写的层级是否跟上面一致，尽量不要修改。
- 第二种可能性：
检查scroll控件是否初始化了。scroll是区域滚动组件，需手动初始化scroll控件。
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});- 第三种可能性：
给scroll设置一个固定高度试试。
<div class="mui-scroll-wrapper" style="height: 300px;">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>或者如果你scroll里面包的是ul列表的话，试着给ul设置个固定高度试试。
- 第四种可能性：
代码中是否引用了其他第三方js库，比如Vue等等。MUI在跟其他库混用的时候可能会有一些冲突，这时候可以先把第三方库注释掉，逐个排查问题，或者调换一下执行顺序，说不定有意外发现哦，比如下面这种：
var movies = new Vue({
el: '.mui-scroll-wrapper',
data: {
list: []
},
methods: {
open_detail: function(item) {
//触发详情页面的newsId事件
mui.fire(detailPage, 'movieId', {
id: item.id,
title: item.title
});
//打开详情页面
mui.openWindow({
id: 'movie-detail'
});
}
}
});
mui('.mui-scroll-wrapper').scroll({
indicators: true
});如果把scroll的初始化写在前面的化，可能就出现不能滚动的情况哦～，这类混用导致的问题要慢慢排查，别着急～
3、MUI中scroll出现两个滚动条
可能大家在使用scroll的时候会遇到滑着滑着就出现了两个滚动条，别着急，这也很正常，一个是div的滚动条，一个是scroll的滚动条，隐藏一个就行了，比如：
mui('.mui-scroll-wrapper').scroll({
indicators: false
});4、MUI如何跳转页面
MUI加载新页面一共有三种方式，第一种是在当前页面加载子页面；第二种是直接打开新页面；第三种是在当前页面预加载下一个页面，跳转的时候直接跳到加载好的页面并更新数据；我们分别看一下：
- 在当前页面加载子页面：
如果我们一个界面过于复杂的化，尤其使用局部滚动，在android手机上会出现滚动不流畅的问题，这时我们可以把中间内容或者要滚动的内容做成子页面，避免出现卡头卡尾的现象：mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpage-bottom-position,//子页面底部位置 width:subpage-width,//子页面宽度，默认为100% height:subpage-height,//子页面高度，默认为100% ...... }, extras:{}//额外扩展参数 }] }); - 直接打开新页面：
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度，默认为100% height:newpage-height,//新页面高度，默认为100% ...... }, extras:{ .....//自定义扩展参数，可以用来处理页面间传值 }, createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示 show:{ autoShow:true,//页面loaded事件发生后自动显示，默认为true aniShow:animationType,//页面显示动画，默认为”slide-in-right“； duration:animationTime,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； event:'titleUpdate',//页面显示时机，默认为titleUpdate事件时显示 extras:{}//窗口动画是否使用图片加速 }, waiting:{ autoShow:true,//自动显示等待框，默认为true title:'正在加载...',//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度 ...... } } })有一点要注意，如果你是预加载页面的化，那么下面这个传值方法是不起作用的
extras:{ .....//自定义扩展参数，可以用来处理页面间传值 },
打开带原生导航栏的新页面：
mui.openWindowWithTitle(WebviewOptions,{
title:{//标题配置
text:"",//标题文字
},
back:{//左上角返回箭头
image:{//图片格式
base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头
}
}
})- 在当前页面预加载下一个页面：
预加载也有两种方法，当然，两种之间也有区别，我们往下看。
方式一：通过mui.init方法中的preloadPages参数进行配置。
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，例如如下代码：
mui.init({
preloadPages:[
{
url:'list.html',
id:'list'
}
]
});
var list = plus.webview.getWebviewByid('list');//这里可能返回空；方式二：通过mui.preload方法预加载。
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；
5、MUI页面之间如何传递参数？
如果是直接打开页面openWindow的话，可以使用：
extras:{
id:10000
},然后在接收的页面：
var id = plus.webview.currentWebview().id;如果是预加载的话，上面这个方法是不起作用的。预加载可以使用自定义事件来传递数据，比如A跳转到B，B页面中：
window.addEventListener('event', function(event) {
//获得事件参数
var id = event.detail.id;
plus.nativeUI.showWaiting('加载中', {
width: '100px',
height: '100px'
});
});A页面中：
mui.fire(webview, 'event', {
id: item.id,
});上面的webview就是之前预加载得到的webview。
希望能够给初学MUI的同学们一些帮助。
学习的路上总是充满难题，坚持下去，便会解决一题少一题。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
