Hbuilder是由DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE,它最大的特点及优势就是——快,通过完整的语法提示和代码输入法、代码块及很多配套,Hbuilder能大幅度提升HTML、js、css的开发效率。并且HBuilder本身主体就是基于Eclipse,所以能够兼容Eclipse的插件。作为一款快速开发的IDE,其不仅能开发前端,还能开发APP,利用H5+技术,结合mui框架模板,就可以开发出非常漂亮的Android程序及IOS程序,想想是不是就很兴奋呢,没错,从此你不再只是前端
更多Hbuilder的更多介绍大家自行百度,使用教程点击这里。
这篇文章主要介绍一下简单的 底部导航条 的实现,效果截图:
(录屏工具不能用了,小伙伴们自己可以在手机上跑一下,看一下效果)
看代码:
首先是index.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()方法了,事件绑定。
.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 这个是首页的代码,很简单,就一个标题栏和内容,其他的三个模块 消息、通讯录、设置 代码都是一样的,就不贴了:
<!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,收工。