mui基础

mui基础

1、html5+是什么？

html5+是DCloud提供的html5强化引擎，可以把HTML5 App打包为原生App，并且达到原生的功能和体验。说白了就是原本只能原生APP才能实现的功能，现在可以通过html5+这个强化引擎作为桥梁，你通过调用plus.*方法实现，也就是你可以通过书写js代码实现android和ios两套的原生功能。html5+封装了一些最常用的功能，并向W3C提交了作为标准的提案。

3、html5+和native.js有什么区别？

html5+作为一种通用标准，只封装了最常用的一些API，如果你有其他需求但是5+里面没有怎么办，这个时候如果你懂原生应用开发，你可以基于native.js语法规范进行个性化封装。Native.js for Android封装一条通过JS语法直接调用Native Java接口通道，通过plus.android可调用几乎所有的系统API。Native.js for iOS封装一条通过JS语法直接调用Native Objective-C接口通道，通过plus.ios可调用几乎所有的系统API。

3、5+ sdk是什么？

我们经常看到html5+(即html5plus)、5+ sdk,其实本质是一样的，不过这里的5+ sdk是针对离线打包开发和Hybrid开发模式，因为用hbuilder在线打包，html5+和native.js的底层会被自动打包到安装包里面，开发者无需引用什么即可调用相关API。只要当开发者想要离线打包及Hybrid开发模式或者深入了解html5+的引擎实现原理，才需要去了解一下5+ sdk，一般情况下我们只需要知道5+标准里面的基本用法就足够我们开发出一个APP。

4、mui与html5+有什么关系？

mui是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件，原生组件依赖于html5+运行环境，也就是原生app里面的webview组件（能加载显示网页，可以将其视为一个浏览器），所以mui里面的原生组件不能用于浏览器环境，可以通过mui里面的mui.os.plus进行判断，如果是plus环境会返回true，否则会返回undefined。开发者可以根据自己的需要进行代码适配，对于APP使用增强的原生组件，对于普通浏览器里面运行的页面使用h5组件。同时用户还可以使用mui.os.android、mui.os.ios及mui.os.wechat对平台进行检测，然后书写不同的逻辑代码。对于mui里面没有封装的原生组件，大家可以根据自己的需要基于html5+标准和native.js语法进行个性化定制。因此这里我们可以有一个基本影响就是我们开始可以直接上手mui，不过需要明白mui与其他UI框架的区别在于，mui拥有独有的原生组件，而且这个是依赖于html5+标准的，所以mui里面的很多组件实现方法甚至用户就是html5+里面的标准写法，对html5+标准有一定了解有助于我们理解mui的一些使用方法。

 

5、webview基本知识：

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。不同的页面我们可以什么是不同的webview，我们可以通过控制webview的切换从而控制浏览不同的页面。

创建新的Webview窗口

创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。

WebviewObject plus.webview.create( url, id, styles, extras );

显示Webview窗口

显示已创建或隐藏的Webview窗口，需先获取窗口对象或窗口id，并可指定显示窗口的动画及动画持续时间。

plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

隐藏Webview窗口

 根据指定的WebviewObject对象或id隐藏Webview窗口，使得窗口不可见。 

plus.webview.hide( id_wvobj, aniHide, duration, extras );

获取当前窗口的WebviewObject对象

获取当前页面所属的Webview窗口对象。

WebviewObject plus.webview.currentWebview();

查找指定标识的WebviewObject窗口

在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null，若存在多个相同标识的Webview窗口，则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口，其标识为应用的%APPID%，可通过plus.runtime.appid获取。

WebviewObject plus.webview.getWebviewById( id );

创建并打开Webview窗口 

创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。

WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

6、 mui双webview模式

页面初始化

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用.

mui.init({

    //子页面    subpages: [{

        //...    }],

    //预加载    preloadPages:[

        //...     ],

    //下拉刷新、上拉加载     pullRefresh : {

       //...    },

    //手势配置      gestureConfig:{

       //...    },

    //侧滑关闭

    swipeBack:true, //Boolean(默认false)启用右滑关闭功能

 

    //监听Android手机的back、menu按键    keyEventBind: {

        backbutton: false,  //Boolean(默认truee)关闭back按键监听

        menubutton: false   //Boolean(默认true)关闭menu按键监听    },

    //处理窗口关闭前的业务

    beforeback: function() {

        //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看    },

    //设置状态栏颜色

    statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用

    preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制

})

创建子页面

在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。

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:{}//额外扩展参数    }]

  });

打开新页面

做web app，一个无法避开的问题就是转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁多，页面太大，转场动画不流畅甚至导致浏览器崩溃； mui的解决思路是：单webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现。

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毫秒；    },

    waiting:{

      autoShow:true,//自动显示等待框，默认为true

      title:'正在加载...',//等待对话框上显示的提示内容      options:{

        width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度

        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度        ......

      }

    }

})