使用hubuild,mui开发微信app

写在前面

本系列文章我将介绍一下从零开始利用hubuild,mui实现微信app的开发，该系列是个人学习记录，所以在每篇文章中，都是从怎么去实现开始讲解，然后再把实例中涉及知识点做一个概述。

创建一个mui项目

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE,因为HBuilder内部集成了很多mui组件，所以用HBuilder可以实现mui的快速开发，在开始开发之前，我们首先需要利用HBuilder创建一个mui的项目，文件-新建-移动App,如下图：

布局篇

首页我们来看一下首页的布局，在首页中，页面可以分成三部分头部+主体部分+底部菜单，接下来我们将去讲解每一部分具体怎样实现

头部实现

在Hbuild中输入mh选择mHeader(标题栏)，即可以快速生成一个app的头部，如下代码：

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">微信</h1>
    </header>

底部菜单栏

在Hbuild中输入mt选择mTab(底部选项卡)，即可以快速生成app的底部菜单栏，如下代码：

效果预览：

通过上面两步，我们已经基本完成了微信的头部跟底部，但是这个跟微信首页还是有一些不一样的，首先微信的头部是那种黑灰色，而我们自动生成的微信头部是白色，底部菜单栏的图标也不一致，下面我们就针对这两个做一下微调

头部样式重写：

.mui-bar-nav{
    background-color: #242A2D;
}

.mui-bar-nav .mui-title{
    color: #fff;
}

底部菜单栏自定义图标：

mui添加自定义图标

底部菜单栏的图标有的在mui的图标库中找不到匹配的，所以这里我们用到自定义的字体图标，字体图标可以在阿里巴巴矢量图标库中（http://www.iconfont.cn/）找到，图标找到之后全部添加入库，然后下载代码，为了统一目录，将下载下来的文件包里面的字体文件拷贝到我们项目的fonts文件夹中，将css文件拷贝到我们项目的css文件中，这里需要注意的是，拷贝之后，css中的字体css需要将路径改一下，如下图

引用自定义图标

图标找到并且按照上面的方法设置好之后，接下来我们就可以在我们的项目中引用我们的图标了，引用的时候，只需要添加.icontfont类，字体图标相关的类，如下图：

主体部分实现

在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容。所以接下来我们先将创建子页面的相关知识点做一个概述。

Webview

首先我们介绍一个非常重要的知识点webview，Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。关于webviewde的详细介绍以及下面罗列知识点参数说明，可以查阅文档：http://www.html5plus.org/doc/zh_cn/webview.html

create

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

//语法：
WebviewObject plus.webview.create( url, id, styles, extras );

currentWebview

currentWebview用于获取当前窗口的WebviewObject对象

//语法
WebviewObject plus.webview.currentWebview();

hide

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

//语法
void plus.webview.hide( id_wvobj, aniHide, duration, extras );

show

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

//语法
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

append

将另一个Webview窗口作为子窗口添加到当前Webview窗口中，添加后其所有权归父Webview窗口，当父窗口关闭时子窗口自动关闭。

void wobj.append( webview );

以上知识点只是接下来要用到的知识点，更多的关于webview的知识点可以自己查询上面链接学习

mui.plusReady()

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。

事件绑定

除了可以使用addEventListener()方法监听某个特定元素上的事件外，也可以使用.on()方法实现批量元素的事件绑定。在开发移动端应用的时候，单击事件是tap，而在web页面中，是click

具体实现：

首先，我们需要创建4个子页面，分别对应底部菜单栏，在本实例中四个子页面分别为'weixin.html','contact.html','find.html','own.html'。下面是创建子页面，已经实现tab切换的具体实现：

    <script type="text/javascript">
          var subPages=['weixin.html','contact.html','find.html','own.html'];  //创建一个数组，存放子页面
          var subPageStyle={
              top:'44px',
              bottom:'50px'
          }; //subPageStyle为子页面的样式
          mui.plusReady(function () {
              var self=plus.webview.currentWebview();  //获取到当前窗体
              for (var i=0;i<subPages.length;i++) {
                  var sub=plus.webview.create(subPages[i],subPages[i],subPageStyle); //创建子页面
                  sub.hide();   //隐藏子页面
                  self.append(sub); //将子页面插入到当前窗体中
              }
              plus.webview.show(subPages[0]);//让第一个子页面显示出来
          });

          mui('.mui-bar-tab').on('tap','a',function(e){
              var tagPage=this.getAttribute('href');
              plus.webview.show(tagPage,"fade-in",100);
          })    //点击切换对应子页面
    </script>

通过上面这些步骤的完成，我们基本上完成了一个微信首页的开发，也实现了底部菜单栏的切换