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

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，收工。

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

android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ M ...
VS 2015 开发Android底部导航条----[实例代码,多图]
1.废话背景介绍在Build 2016开发者大会上,微软宣布,Xamarin将被整合进所有版本的Visual Studio之中. 这也就是说,Xamarin将免费提供给所有购买了Visual St ...
android导航条高度修改,Android中修改TabLayout底部导航条Indicator长短的方法
前言对于Tablayout相信大家都不陌生,在开发中使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也 ...
android手表应用开发,Wear OS手表应用开发教程之-底部导航-WearableActionDrawerView（动态控制）...
Wear OS手表应用开发教程之-底部导航-WearableActionDrawerView(动态控制) 2020年08月14日 | 萬仟网移动技术 | 我要评论本文目录点击直达Wear OS手表 ...
Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
直播商城源码，商城开发实现商城底部导航栏
直播商城源码,商城开发实现商城底部导航栏 1.先写布局. 我新建了一个ShoppingActivity,在activity_shopping.xml文件中,写整体布局,代码如下: <?xml v ...
Hbuilder开发app实战-识岁01-actionsheet实例
前言之前写了HBuilder开发App入门-滴石.相信大家看完后应该能够入门了, 之后会做一些简单的app.把nativejs一些经常使用的功能都过一遍,这样以后做app就没什么难的了. 识岁借助 ...
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型修改前情况修改后情况打开项目文件 app.vueapp.vue1.增加全局参数 globalD ...
android app启动图片加动画效果,Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案...
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案大家在设计APP的末期,都会想给APP搞一些"花里胡哨"的特效来提高APP的B格.博主表示亲测有效 ...

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

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

最新文章

热门文章