继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

HBuilder+MUI那些事儿

天哥在奔跑
关注TA
已关注
手记 1
粉丝 106
获赞 173

自从移动端跨平台开发概念开始兴起后,出来很多解决方案,不管是框架生成原生控件,还是直接外面套个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的同学们一些帮助。

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

打开App,阅读手记
34人推荐
发表评论
随时随地看视频慕课网APP

热门评论

感恩你的分享

MUI经常遇到传值问题


h5+还是能实现很多功能,界面的东西还是自己写稳妥些

查看全部评论