Hbuilder 开发 APP（一）——底部导航条简单实现

猿小侯
2,245 阅读15分钟

        Hbuilder是由DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，它最大的特点及优势就是——快，通过完整的语法提示和代码输入法、代码块及很多配套，Hbuilder能大幅度提升HTML、js、css的开发效率。并且HBuilder本身主体就是基于Eclipse，所以能够兼容Eclipse的插件。作为一款快速开发的IDE，其不仅能开发前端，还能开发APP，利用H5+技术，结合mui框架模板，就可以开发出非常漂亮的 Android程序及iOS程序，想想是不是就很兴奋呢，没错，从此你不再只是前端得意

        更多Hbuilder的更多介绍大家自行百度，使用教程点击这里。

        这篇文章主要介绍一下简单的 底部导航条 的实现，效果截图：

（录屏工具不能用了，小伙伴们自己可以在手机上跑一下，看一下效果）

        看代码：

首先是index.html，所有的代码基本上都在这里了：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
  6.     <title></title>  
  7.     <script src="js/mui.min.js" ></script>  
  8.     <script src="js/login.js"> </script>  
  9.     <link href="css/mui.min.css"  rel="stylesheet"/>  
  10.       
  11. </head>  
  12. <body>  
  13.     <nav class="mui-bar mui-bar-tab"  id="nav">  
  14.         <a id="tab_home"  class="mui-tab-item mui-active" >  
  15.             <span class="mui-icon mui-icon-home"  ></span>  
  16.             <span class="mui-tab-label" >首页</span>  
  17.         </a>  
  18.         <a id="tab_message"  class="mui-tab-item">  
  19.             <span class="mui-icon mui-icon-email" ></span>  
  20.             <span class="mui-tab-label" >消息</span>  
  21.         </a>  
  22.         <a id="tab_contact"  class="mui-tab-item">  
  23.             <span class="mui-icon mui-icon-contact" ></span>  
  24.             <span class="mui-tab-label" >通讯录</span>  
  25.         </a>  
  26.         <a id="tab_setting"  class="mui-tab-item" >  
  27.             <span class="mui-icon mui-icon-gear" ></span>  
  28.             <span class="mui-tab-label" >设置</span>  
  29.         </a>  
  30.     </nav>  
  31.       
  32.     <script type="text/javascript"  charset="utf-8">  
  33.         mui.init({  
  34.             subpages:[//首先加载首页    
  35.                         {    
  36.                             url:'html/home.html',    
  37.                             id:'tab_home',    
  38.                             styles:{    
  39.                                 top:'0px',    
  40.                                 bottom:'60px'    
  41.                             }    
  42.                         }    
  43.                     ],    
  44.             preloadPages:[//预加载其他页面    
  45.                 {    
  46.                     url:'html/message.html',    
  47.                     id:'tab_message',    
  48.                     styles:{  
  49.                     top:'0px',  
  50.                     bottom:'60px'    
  51.                     }    
  52.                 },    
  53.                 {    
  54.                     url:'html/contact.html',    
  55.                     id:'tab_contact',    
  56.                     styles:{    
  57.                         top:'0px',    
  58.                         bottom:'60px'    
  59.                     }    
  60.                 },  
  61.                 {  
  62.                     url:'html/setting.html',  
  63.                     id:'tab_setting',  
  64.                     styles:{  
  65.                     <span  style= "white-space:pre">  </span >top:'0px',  
  66.                         bottom:'60px'  
  67.                     }  
  68.                 }  
  69.             ]   
  70.         });  
  71.         mui.plusReady(function(){  
  72.             var tab_home,tab_message,tab_contact    
  73.                 mui("#nav").on("tap","#tab_home",function(){//点击触发     
  74.                     tab_home= plus.webview.getWebviewById("tab_home");    
  75.                     tab_home.show()    
  76.                     tab_message.hide()  
  77.                     tab_contact.hide()  
  78.                     tab_setting.hide()  
  79.                 })    
  80.                 mui("#nav").on("tap","#tab_message",function(){//点击触发    
  81.                     tab_message= plus.webview.getWebviewById("tab_message");    
  82.                     tab_message.show()    
  83.                         
  84.                 })    
  85.                 mui("#nav").on("tap","#tab_contact",function(){//点击触发    
  86.                     tab_contact= plus.webview.getWebviewById("tab_contact");    
  87.                     tab_contact.show()    
  88.                         
  89.                 })    
  90.                 mui("#nav").on("tap","#tab_setting",function(){//点击触发    
  91.                     tab_setting= plus.webview.getWebviewById("tab_setting");  
  92.                     tab_setting.show()  
  93.                 })  
  94.         })  
  95.           
  96.     </script>  
  97.       
  98. </body>  
  99. </html>   
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/login.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    
</head>
<body>
	<nav class="mui-bar mui-bar-tab" id="nav">
		<a id="tab_home" class="mui-tab-item mui-active" >
			<span class="mui-icon mui-icon-home" ></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a id="tab_message" class="mui-tab-item">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a id="tab_contact" class="mui-tab-item">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">通讯录</span>
		</a>
		<a id="tab_setting" class="mui-tab-item" >
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">设置</span>
		</a>
	</nav>
	
	<script type="text/javascript" charset="utf-8">
      	mui.init({
      		subpages:[//首先加载首页  
                        {  
                            url:'html/home.html',  
                            id:'tab_home',  
                            styles:{  
                                top:'0px',  
                                bottom:'60px'  
                            }  
                        }  
                    ],  
            preloadPages:[//预加载其他页面  
                {  
                    url:'html/message.html',  
                    id:'tab_message',  
                    styles:{
	                top:'0px',
	                bottom:'60px'  
                    }  
                },  
                {  
	                url:'html/contact.html',  
	                id:'tab_contact',  
	                styles:{  
	                    top:'0px',  
	                    bottom:'60px'  
	                }  
                },
                {
                	url:'html/setting.html',
                	id:'tab_setting',
                	styles:{
                		top:'0px',
                		bottom:'60px'
                	}
                }
            ] 
      	});
      	mui.plusReady(function(){
      		var tab_home,tab_message,tab_contact  
                mui("#nav").on("tap","#tab_home",function(){//点击触发   
                    tab_home=plus.webview.getWebviewById("tab_home");  
                    tab_home.show()  
                    tab_message.hide()
                    tab_contact.hide()
                    tab_setting.hide()
                })  
                mui("#nav").on("tap","#tab_message",function(){//点击触发  
                    tab_message=plus.webview.getWebviewById("tab_message");  
                    tab_message.show()  
                      
                })  
                mui("#nav").on("tap","#tab_contact",function(){//点击触发  
                    tab_contact=plus.webview.getWebviewById("tab_contact");  
                    tab_contact.show()  
                      
                })  
                mui("#nav").on("tap","#tab_setting",function(){//点击触发  
                	tab_setting=plus.webview.getWebviewById("tab_setting");
                	tab_setting.show()
                })
      	})
      	
    </script>
	
</body>
</html>
我们来看一下上边的代码，底部导航条标签<nav>以及class属性这些没啥好说的，记住就行了，我们主要看mui中的函数。

首先是mui.init()，mui框架将很多的功能配置都集中在mui.init()中，如果我们要使用某项功能，只需要在init中配置对应的参数即可，目前支持在init中配置的功能包括：创建子页面、预加载、手势事件配置、上拉加载、下拉刷新、关闭页面、设置系统状态栏背景颜色。如上代码所示，我们在init方法中配置了subpages:[{...}]（创建子页面）、preloadPages:[{...}]（预加载），至于里面的属性 url、id、styles等不用解释，都是老司机，当然还有一些其他的属性，在此也不赘述。

注意：mui.init()是每个mui页面都必须调用的，官方指出，页面初始化，必须执行init方法。

接下来是mui.plusReady()，说这个之前有必要说说H5+了。

H5，即Html5，万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）第5次重大修改，2014年发布，之后的浏览器都必须遵守这个开发规范实现对html、css、 JavaScript的解释。

H5+，即HTML5 Plus，其实还是H5，只不过是在H5的基础上增加了大量手机原生功能支持，包括wifi、gps、震动、摄像头等软硬件功能，通过js封装调用Android原生接口使得H5开发APP更加强大，更加的接近原生。APP的开发必须使用H5+。

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

再来就是mui().on()方法了，事件绑定。

[html] view plain copy print?
  1. .on( event , selector , handler )  
  2.   
  3.     event：Type: String，需监听的事件名称，例如：‘tap‘  
  4.   
  5.     selector：Type: String，选择器  
  6.   
  7.     handler：Type: Function( Event event )，事件触发时的回调函数，通过回调中的event参数可以获得事件详情  
.on( event , selector , handler )

    event：Type: String，需监听的事件名称，例如：‘tap‘

    selector：Type: String，选择器

    handler：Type: Function( Event event )，事件触发时的回调函数，通过回调中的event参数可以获得事件详情

除了使用.on()方法实现批量元素的事件绑定外，也可以使用addEventListener()方法监听某个特定元素上的事件（自行百度）。

最后就是 plus.webview.getWebviewById(id)这个了，在已创建的窗口列表中查找指定标识的Webview窗口并返回，若没有查找到指定标识的窗口则返回null，若存在多个相同标识的Webview窗口，则返回第一个创建的Webview窗口。这让我们也能联想到在web开发中 document.getElementById(id) 返回对拥有指定Id的第一个对象的引用，android开发中 findViewById得到控件对象的引用。

好了，以上代码就说这么多了，再看home.html 这个是首页的代码，很简单，就一个标题栏和内容，其他的三个模块 消息、通讯录、设置 代码都是一样的，就不贴了：

[html] view plain copy print?
  1. <!doctype html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8" >  
  6.         <title></title>  
  7.         <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
  8.         <link href="../css/mui.min.css"  rel="stylesheet" />  
  9.     </head>  
  10.   
  11.     <body>  
  12.         <script src="../js/mui.min.js" ></script>  
  13.         <script type="text/javascript" >  
  14.             mui.init()  
  15.         </script>  
  16.           
  17.         <header class="mui-bar mui-bar-nav" >  
  18.             <a class="mui-action-back mui-icon mui-icon-back"  href="/index.html"></a>  
  19.             <h1 class="mui-title" >首页</h1>  
  20.         </header>  
  21.         <div class="mui-content"  align="center">  
  22.             <div id="home_content"  class="mui-control-content mui-active">  
  23.                 <div class= "mui-title" align="center">这是首页</ div >  
  24.             </div>  
  25.         </div>  
  26.     </body>  
  27.   
  28. </html>   
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back" href="/index.html"></a>
			<h1 class="mui-title">首页</h1>
		</header>
		<div class="mui-content" align="center">
			<div id="home_content" class="mui-control-content mui-active">
				<div class="mui-title" align="center">这是首页</div>
			</div>
		</div>
	</body>

</html>
下面是项目结构：

ok，结束了，就是这么简单，不过这里只是为了简单实现而实现的，还有好多要优化的地方以及更专业的写法，大家自己试着写一下吧，相信难不倒你的。

注意：还有一个问题，就是<nav>实现底部导航条，其里面的<a>标签需要注意，我们做web开发使用<a>标签中的href属性来添加链接跳转页面，但是在这里是不行的，

小伙伴们可以自己试一下。为什么不行呢？？？因为用web做app，有一个无法避开的问题就是 转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，会出现白屏页面等待，如果通过无刷新的方式，用JS移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战；DOM节点如果非常多的话，页面太大，转场动画卡顿，不流畅，甚至导致浏览器崩溃；

因此，mui的解决思路是：单个的webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最消耗性能的部分交给原生实现。

现在知道为啥链接跳转不能用了吧。。。

over，收工。

avatar
文章
阅读
粉丝