正文
使用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>
通过上面这些步骤的完成,我们基本上完成了一个微信首页的开发,也实现了底部菜单栏的切换