HBuilder+MUI那些事儿-原创手记-慕课网

自从移动端跨平台开发概念开始兴起后，出来很多解决方案，不管是框架生成原生控件，还是直接外面套个webview做个H5应用，这些方案都给移动开发带来了便利。Native+H5 hybrid、RN、ionic，以及jq mobile等等，还有我下面要讲的mui。

一、什么是MUI？

MUI-最接近原生APP体验的高性能前端框架

二、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的同学们一些帮助。

学习的路上总是充满难题，坚持下去，便会解决一题少一题。