第5章使用MUI与H5+构建移动端app

时间 2019-11-18

标签使用 mui h5 构建移动 app 栏目无线繁體版

原文原文链接

H5+是JS封装的工具集合，经过H5+咱们就可使用JS的方式去调用到咱们手机端上的一些原生的组件。javascript

http://dev.dcloud.net.cn/mui/css

http://dev.dcloud.net.cn/mui/ui/html

开发过微信小程序或者说Bootstrap，那么使用起来是很是的简单和方便。html5

http://ask.dcloud.net.cn/docs/java

http://www.html5plus.org/doc/ios

H5+和MUI作的一个大体的讲解。web

如今咱们建立的是MUI的项目，咱们会基于MUI去作相应的建立、开发。json

mui.css和mui.min.css是同样的，只不过mui.min.css是压缩过的。mui.js和mui.min.js是同样的，只不过mui.min.js是压缩过的。manifest.json是针对手机端的一些相应的配置。项目完成以后再去说如何去打包、如何去安装、如何去设置。小程序

content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"

content包含的这段内容可让咱们的页面适应到咱们的手机端。新建一个mui项目的时候咱们的页面它都会去帮咱们建立的，因此咱们不须要去多care。mui.min.css包含了一些封装好的类库。mui框架将不少功能配置都集中在mui.init方法中，它就至关因而一个开关。咱们不会在mui.init方法里面去作设置状态栏颜色。微信小程序

http://dev.dcloud.net.cn/mui/util/#init

微信分为两大块，微信的页面会在上面一部分它实际上是一个header标题栏，不少APP都是这样子，一开始会有一个标题栏，下面会有导航。咱们会使用MUI的方式去把咱们当前的页面来作一些相应的格局。第一个步骤把header标题栏写一下。

它的headerMUI为咱们作了一个相应的封装。咱们只须要写一个代码块(快捷字符串)，

http://dev.dcloud.net.cn/mui/snippet/

咱们的标题栏header就已经在页面上进行了展现。MUI为咱们提供了极简单的开发流程，缩短了开发时间，时间就是成本。标题有了，符合手机的基本布局。微信实际上是一个黑底白字，咱们这里采用慕课网官方的颜色。咱们只须要建立一个CSS样式覆盖它原有的就能够了。

#c9394a是慕课网的颜色。header.css编写完毕以后，导入到页面的mui.min.css下面。

<body>
    <header class="mui-bar mui-bar-nav title">
        <h1 class="mui-title title-color">标题</h1>
    </header>
</body>

.title{
    background-color: #c9394a;
}

.title-color{
    color: white;
}

    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/header.css" />
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>

header的底色和header文字的颜色都已是作了相应的改变。

经过自定义的样式去覆盖它原有的样式的颜色。

<body>
    <header class="mui-bar mui-bar-nav title">
        <h1 class="mui-title title-color"><b>慕信</b></h1>
    </header>
</body>

每当你开发一部分的页面，开发完一部分的功能，咱们就须要到手机上去调一调看一看。若是作真机测试，有两台设备，一台是安卓一台是ios，或者安卓的平板和ipad也没有问题。我准备了两台手机，一台是iphone，一台是安卓手机。ios设备必需要安装iTools，有了iTools才能够去作相应的调试。你的手机插入以后，开发工具没有显示的话，你把开发工具先关闭再打开重启一下，它就会去找到你的ios设备了。

安卓开发者确定要使用到debug，它其实有一个usb debug，你打开usb debug以后，设备才能够被开发工具给识别到，无论你使用的是安卓开发者工具，仍是HBuilder，其实都是同样的道理。你开启usb调试以后，你就能够经过HBuilder基座去运行去看一下咱们的项目。

在使用安卓的时候其实会有一些坑。若是手机的设备它的版本很是高，那么有可能会找不到。我在升级完手机版本以后，使用HBuilder开发者工具就不能够再去作真机调试。因为手机的UI定制化功能比较多，因此有可能会影响我们这个功能。降级完以后就能够去使用了。点击HBuilder基座运行，它其实就是把apk传输到手机上进行安装。

adb它是一个安卓的进程。不一样的电脑助手/病毒软件可能会帮你安装额外的adb.exe这样的进程。若是说它帮你安装了的话，你必定要去关掉杀掉。本节的真机的调试就是到这里。

咱们须要把标题栏的样式和header进行统一。如何去修改？那么咱们就须要用到plus的功能。用H5+原生的功能，原生的功能就是H5+，H5+能够操做你原生的机子上的相应的样式等等。

打开H5+的文档：http://www.html5plus.org/doc/zh_cn/navigator.html

Navigator就是手机端的导航。

什么是plusReady()？plus是指咱们的设备，Ready是指就绪准备完成。mui.plusReady();就是指咱们的移动设备就绪完毕以后，咱们能够去作一些一系列的操做。如今咱们是要去操做手机上原生的标题栏。咱们既然要去操做原生是经过咱们的手机设备，也就是咱们的plus，plus就表明咱们的手机设备，因此说必定要在咱们的整个项目、咱们的APP加载完毕以后，咱们的设备就绪完成以后，你才能够去对它原生的一些相应的API作操做。在function里面对咱们原生的样式作编写。setStatusBarBackground这个颜色咱们会使用慕课网官方的颜色。背景颜色有了还要有一个字体颜色。

    <script type="text/javascript" charset="utf-8">
          mui.init();
          mui.plusReady(function(){
              plus.navigator.setStatusBarStyle("light");
              plus.navigator.setStatusBarBackground("#C9394A");
          });
    </script>

标题栏就变成了和header一样的颜色，这样总体的样式就统一了。首页的基本的雏形有了。微信的首页的下方实际上是一个tab页面。对于这样的一个菜单栏，其实咱们称之为一个tab，它是一个选项卡。在作web开发的时候，其实也是有一个相似的相应的组件。MUI它为咱们提供了这样的方便。mTab有三种，第一种mTab是一个基础的、最简单的一种，当你点击切换的时候，咱们是须要进行一个不一样页面的切换，不一样的页面在咱们的混合APP里面来开发去讲的话，对于每个页面它其实都是一个WebView，当咱们点击不一样的选项卡的时候，进行一个item.type的切换，咱们实际上是不一样的WebView页面进行一个显示和秀。mTabSegmented是div的选项卡，这种选项卡是咱们不推荐的，由于它是经过div来进行的加载，mTabSegmented还有一种是左右能够拖动拉伸的选项卡，咱们不会使用这两种。由于它是一个div的，它经过一个相应的JS操做把不一样的div进行展示和隐藏。这种方式的话若是说咱们的页面上会有不少不少的项目，在这个时候，随着时间的推移和系统版本的迭代，咱们的页面的容量的体积会愈来愈大，这样子是很差的，尤为是在一些低端机子上，一些低端的安卓机上，会引发卡断，那么因此呢咱们会使用mTab底部选项卡。

在header下面就能够去作相应的构建了。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>

如今针对四个图标(icon)进行相应的设置。MUI的不少icon(图标)都已是加载到MUI库里面去了。http://dev.dcloud.net.cn/mui/ui/#icon

这一块代码是由一个nav组件所包含了。四个a标签所构成的一个单独的选项。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-weixin"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>

发现是一个小飞机。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-weixin"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">通信录</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-paperplane"></span>
            <span class="mui-tab-label">发现</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">我</span>
        </a>
    </nav>

如今咱们已经基于MUI它自带的icon库把咱们tab页里的图标进行了一个相应的替换，若是说咱们想使用某些tab页面，不论是tab页面仍是某些单独的页面，咱们会有一些其余的额外的图标。那么这个时候可能在咱们这个MUI里面它并无提供。其实咱们还有另一种方式去进行额外的扩展。引入另一个图标库，这是一个阿里提供的icon库：http://www.iconfont.cn/。

由于一个项目里面可能会有不少不少图标，咱们能够总体地进行一个相应的打包，比方说咱们添加至项目。

file:///G:/download/fontico/demo_fontclass.html

咱们自定义的图标实现了。

<nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-fire"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-tongxunlu"></span>
            <span class="mui-tab-label">通信录</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-zhinanzhen"></span>
            <span class="mui-tab-label">发现</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-wode"></span>
            <span class="mui-tab-label">我</span>
        </a>
    </nav>

图标选中的颜色是由系统自动分配的。第一个a标签里面，mui-active是指页面打开的时候默认地会由哪个tab显示。

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-fire"></span>
            <span class="mui-tab-label">慕信</span>
        </a>
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-tongxunlu"></span>
            <span class="mui-tab-label">通信录</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-zhinanzhen"></span>
            <span class="mui-tab-label">发现</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-wode"></span>
            <span class="mui-tab-label">我</span>
        </a>
    </nav>

修改mui-active就能够修改图标选中的颜色。mui-active是在mui-bar-tab之下，又是在每个mui-tab-item里面的，因此咱们把它们作一个相关联。

header.css

.mui-bar-tab .mui-tab-item.mui-active {
    color: #c9394a;
}

如何去自定义icon本身的图标库以及自定义的颜色。选项卡已是有了以及切换不一样选项的时候，那么它的颜色会发生相应的更改，其实就是选中某一个选项。页面在混合APP里面其实就是一个WebView。

若是建立一个项目，它带有一个index，那么它的一个css和js是放在一块儿的。若是咱们单首创建一个HTML的话，它的js是放在咱们页面的下方，也就是body标签的最尾部。

    <body>
        
        <h1>聊天记录</h1>
        
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
    </body>

把四个页面加入到主页面里面去，如今就须要编写JS代码了。建立一个子页面的数组，把全部的子页面都定义一下。这个数组里面会有四个页面级的对象。对象里面针对每个页面它会有一个页面的id以及每个页面的路径(页面的url)。pageId和页面是一一对应的。页面是什么名字，pageId也是什么名字，由于页面是惟一的，因此它对应的pageName和pageUrl所有都是惟一的。第一个页面级对象就已是建立了。这四个页面级对象都已经在咱们的muxinArray数组里面去了。

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
    </script>

有了数组以后咱们就须要对这个数组作一个循环，循环把每个页面进行建立，建立完以后再添加到咱们当前的页面里面去吧。页面添加的操做是基于WebView，WebView是plus里面，它是属于设备，它是属于设备里面的对象。咱们须要在这个设备就绪以后才能去作相应的操做。首先咱们要获取当前的index的WebView，由于咱们是要把不一样的子页面追加到当前的WebView，因此咱们要得到当前的WebView。如何获取当前首页的WebView？

http://www.html5plus.org/doc/zh_cn/webview.html

http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create

url就是咱们刚刚在定义一个Array的时候每个页面它所在的路径，id是咱们赋给它的，styles是指咱们要去展示的子页面它的一个显示样式是什么，extras这是一个额外的意思，extras能够作一个参数传递，不论是json对象仍是字符串仍是数字均可以作一些相应的属性的传递。

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        mui.plusReady(function(){
            // 获取当前的webview对象
            var indexWebview = plus.webview.currentWebview();
            
            // 向当前的主页webview追加子页的4张webview对象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId);
                // 隐藏webview窗口
                muxinPage.hide();
                // 追加每个子页面到当前的主页面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
        });
    </script>

WebView是plus里面的对象，plus是咱们的设备，浏览器不能够作设备上的测试，浏览器只能够看页面的样式以及调整页面的样式。设备上的测试必需要使用真机测试。

header和tab选项卡都被聊天记录这个页面所遮挡。对被展现的子页面进行设置，限制它的高度和距离。底部的位置分别是44和50。

作样式的修改。

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        var muxinStyle = {
            top: "44px",
            bottom: "50px"
        }
        
        mui.plusReady(function(){
            // 获取当前的webview对象
            var indexWebview = plus.webview.currentWebview();
            
            // 向当前的主页webview追加子页的4张webview对象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId,muxinStyle);
                // 隐藏webview窗口
                muxinPage.hide();
                // 追加每个子页面到当前的主页面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
        });
    </script>

找一下mui的文档，查一下事件管理。tab能够是一个批量的绑定，针对<nav>标签里面的每个<a>标签作一个事件的绑定。http://dev.dcloud.net.cn/mui/event/

tap是手指触摸的事件，就是单击事件，不推荐去使用click，由于click是针对web开发用的，对于咱们APP来说，大部分的触摸事件都是一个tap事件。之前在开发小程序的时候，小程序也是经过一个bindtap去作一个单击事件的绑定，mui也是同样，也是相似，因此统一使用tap作事件的类型。使用选择器找到这个class：mui-bar-tab，再去绑定到全部的<a>标签。webview的show方法plus.webview.show的第二个参数是动画效果。http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow。通常咱们会使用fade-in从透明到不透明逐渐显示效果，延迟时间通常咱们会使用200ms。

webview的隐藏也有相应的效果。可使用fade-out从不透明到透明逐渐隐藏的动画。http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        var muxinStyle = {
            top: "44px",
            bottom: "50px"
        }
        
        mui.plusReady(function(){
            // 获取当前的webview对象
            var indexWebview = plus.webview.currentWebview();
            
            // 向当前的主页webview追加子页的4张webview对象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId,muxinStyle);
                // 隐藏webview窗口
                muxinPage.hide();
                // 追加每个子页面到当前的主页面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
            
            // 批量绑定tap事件，展现不一样的页面
            mui(".mui-bar-tab").on("tap", "a", function() {
                var tabindex = this.getAttribute("tabindex");
            
                // 显示点击的tab选项所对应的页面
                plus.webview.show(muxinArray[tabindex].pageId,"fade-in",200);
                
                // 隐藏其余的不须要的页面
                for(var i=0; i< muxinArray.length ; i ++){
                            if(i != tabindex){
                               plus.webview.hide(muxinArray[i].pageId, "fade-out", 200);
                            }
                }
            
            
            });
            
        });
        

        
    </script>

    <script type="text/javascript">
        var muxinArray = [
              {
                  pageId: "imooc-chatlist.html",
                  pageUrl:"imooc-chatlist.html"                 
              },
              {
                  pageId: "imooc-contact.html",
                  pageUrl:"imooc-contact.html"                 
              },
              {
                  pageId: "imooc-discover.html",
                  pageUrl:"imooc-discover.html"                 
              },
              {
                  pageId: "imooc-me.html",
                  pageUrl:"imooc-me.html"                 
              }
        ];
        
        var muxinStyle = {
            top: "44px",
            bottom: "50px"
        }
        
        mui.plusReady(function(){
            // 获取当前的webview对象
            var indexWebview = plus.webview.currentWebview();
            
            // 向当前的主页webview追加子页的4张webview对象
            for (var i = 0;i < muxinArray.length ; i ++) {
                var muxinPage = plus.webview.create(muxinArray[i].pageUrl,muxinArray[i].pageId,muxinStyle);
                // 隐藏webview窗口
                muxinPage.hide();
                // 追加每个子页面到当前的主页面
                indexWebview.append(muxinPage);
                
            }
            plus.webview.show(muxinArray[0].pageId);
            
            // 批量绑定tap事件，展现不一样的页面
            mui(".mui-bar-tab").on("tap", ".mui-tab-item", function() {
                var tabindex = this.getAttribute("tabindex");
            
                // 显示点击的tab选项所对应的页面
                plus.webview.show(muxinArray[tabindex].pageId,"fade-in",200);
                
                // 隐藏其余的不须要的页面
                for(var i=0; i< muxinArray.length ; i ++){
                            if(i != tabindex){
                               plus.webview.hide(muxinArray[i].pageId, "fade-out", 200);
                            }
                }
            
            
            });
            
        });
        

        
    </script>

第5章 使用MUI与H5+构建移动端app

第5章使用MUI与H5+构建移动端app