查看: 2046|回复: 0

[IOS开发教程] HBuilder+MUI那些事儿

发表于 2018-1-29 08:00:02

自从移动端跨平台开发概念开始兴起后,出来很多解决方案,不管是框架生成原生控件,还是直接外面套个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开发常用的字体图标没有合适的怎么办,是否可以自定义,如何扩展?

这个问题在官网文档中其实已经有给出答案了,也有相应的链接,我这里就搬个砖头,再链接一遍。

mui如何增加自定义icon图标 mui扩展字体 2、MUI中scroll不能滚动 第一种可能性:

检查dom层级是否有问题,这一点建议直接参考官方demo中的例子。

  1. <div class="mui-scroll-wrapper">
  2. <div class="mui-scroll">
  3. <!--这里放置真实显示的DOM内容-->
  4. </div>
  5. </div>
复制代码

看看你写的层级是否跟上面一致,尽量不要修改。

第二种可能性:

检查scroll控件是否初始化了。scroll是区域滚动组件,需手动初始化scroll控件。

  1. mui('.mui-scroll-wrapper').scroll({
  2. deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
  3. });
复制代码
第三种可能性:

给scroll设置一个固定高度试试。

  1. <div class="mui-scroll-wrapper" style="height: 300px;">
  2. <div class="mui-scroll">
  3. <!--这里放置真实显示的DOM内容-->
  4. </div>
  5. </div>
复制代码

或者如果你scroll里面包的是ul列表的话,试着给ul设置个固定高度试试。

第四种可能性:

代码中是否引用了其他第三方js库,比如Vue等等。MUI在跟其他库混用的时候可能会有一些冲突,这时候可以先把第三方库注释掉,逐个排查问题,或者调换一下执行顺序,说不定有意外发现哦,比如下面这种:

  1. var movies = new Vue({
  2. el: '.mui-scroll-wrapper',
  3. data: {
  4. list: []
  5. },
  6. methods: {
  7. open_detail: function(item) {
  8. //触发详情页面的newsId事件
  9. mui.fire(detailPage, 'movieId', {
  10. id: item.id,
  11. title: item.title
  12. });
  13. //打开详情页面
  14. mui.openWindow({
  15. id: 'movie-detail'
  16. });
  17. }
  18. }
  19. });
  20. mui('.mui-scroll-wrapper').scroll({
  21. indicators: true
  22. });
复制代码

如果把scroll的初始化写在前面的化,可能就出现不能滚动的情况哦~,这类混用导致的问题要慢慢排查,别着急~

3、MUI中scroll出现两个滚动条

可能大家在使用scroll的时候会遇到滑着滑着就出现了两个滚动条,别着急,这也很正常,一个是div的滚动条,一个是scroll的滚动条,隐藏一个就行了,比如:

  1. mui('.mui-scroll-wrapper').scroll({
  2. indicators: false
  3. });
复制代码
4、MUI如何跳转页面

MUI加载新页面一共有三种方式,第一种是在当前页面加载子页面;第二种是直接打开新页面;第三种是在当前页面预加载下一个页面,跳转的时候直接跳到加载好的页面并更新数据;我们分别看一下:

在当前页面加载子页面:
如果我们一个界面过于复杂的化,尤其使用局部滚动,在android手机上会出现滚动不流畅的问题,这时我们可以把中间内容或者要滚动的内容做成子页面,避免出现卡头卡尾的现象:
  1. mui.init({
  2. subpages:[{
  3. url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
  4. id:your-subpage-id,//子页面标志
  5. styles:{
  6. top:subpage-top-position,//子页面顶部位置
  7. bottom:subpage-bottom-position,//子页面底部位置
  8. width:subpage-width,//子页面宽度,默认为100%
  9. height:subpage-height,//子页面高度,默认为100%
  10. ......
  11. },
  12. extras:{}//额外扩展参数
  13. }]
  14. });
复制代码
直接打开新页面:
  1. mui.openWindow({
  2. url:new-page-url,
  3. id:new-page-id,
  4. styles:{
  5. top:newpage-top-position,//新页面顶部位置
  6. bottom:newage-bottom-position,//新页面底部位置
  7. width:newpage-width,//新页面宽度,默认为100%
  8. height:newpage-height,//新页面高度,默认为100%
  9. ......
  10. },
  11. extras:{
  12. .....//自定义扩展参数,可以用来处理页面间传值
  13. },
  14. createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
  15. show:{
  16. autoShow:true,//页面loaded事件发生后自动显示,默认为true
  17. aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
  18. duration:animationTime,//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
  19. event:'titleUpdate',//页面显示时机,默认为titleUpdate事件时显示
  20. extras:{}//窗口动画是否使用图片加速
  21. },
  22. waiting:{
  23. autoShow:true,//自动显示等待框,默认为true
  24. title:'正在加载...',//等待对话框上显示的提示内容
  25. options:{
  26. width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
  27. height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
  28. ......
  29. }
  30. }
  31. })
复制代码

有一点要注意,如果你是预加载页面的化,那么下面这个传值方法是不起作用的

  1. extras:{
  2. .....//自定义扩展参数,可以用来处理页面间传值
  3. },
复制代码

打开带原生导航栏的新页面:

  1. mui.openWindowWithTitle(WebviewOptions,{
  2. title:{//标题配置
  3. text:"",//标题文字
  4. },
  5. back:{//左上角返回箭头
  6. image:{//图片格式
  7. base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头
  8. }
  9. }
  10. })
复制代码
在当前页面预加载下一个页面:

预加载也有两种方法,当然,两种之间也有区别,我们往下看。
方式一:通过mui.init方法中的preloadPages参数进行配置。

  1. mui.init({
  2. preloadPages:[
  3. {
  4. url:prelaod-page-url,
  5. id:preload-page-id,
  6. styles:{},//窗口参数
  7. extras:{},//自定义扩展参数
  8. subpages:[{},{}]//预加载页面的子页面
  9. }
  10. ],
  11. preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
  12. });
复制代码

该种方案使用简单、可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById方式获得;另外,因为mui.init是异步执行,执行完mui.init方法后立即获得对应webview引用,可能会失败,例如如下代码:

  1. mui.init({
  2. preloadPages:[
  3. {
  4. url:'list.html',
  5. id:'list'
  6. }
  7. ]
  8. });
  9. var list = plus.webview.getWebviewByid('list');//这里可能返回空;
复制代码

方式二:通过mui.preload方法预加载。

  1. var page = mui.preload({
  2. url:new-page-url,
  3. id:new-page-id,//默认使用当前页面的url作为id
  4. styles:{},//窗口参数
  5. extras:{}//自定义扩展参数
  6. });
复制代码

通过mui.preload()方法预加载,可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用mui.preload()方法;

5、MUI页面之间如何传递参数?

如果是直接打开页面openWindow的话,可以使用:

  1. extras:{
  2. id:10000
  3. },
复制代码

然后在接收的页面:

  1. var id = plus.webview.currentWebview().id;
复制代码

如果是预加载的话,上面这个方法是不起作用的。预加载可以使用自定义事件来传递数据,比如A跳转到B,B页面中:

  1. window.addEventListener('event', function(event) {
  2. //获得事件参数
  3. var id = event.detail.id;
  4. plus.nativeUI.showWaiting('加载中', {
  5. width: '100px',
  6. height: '100px'
  7. });
  8. });
复制代码

A页面中:

  1. mui.fire(webview, 'event', {
  2. id: item.id,
  3. });
复制代码

上面的webview就是之前预加载得到的webview。

希望能够给初学MUI的同学们一些帮助。

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



回复

使用道具 举报