使⽤HBuilder基于HTML5编写新闻客户端APP的⼀些实验⼀、⼀些基本概念
1、HBuilder
按照我的理解，HBuilder是⼀个基于eclipse⼆次开发的IDE，主要对HTML5的开发做了许多优化，刚发布没多久，⽬前基本稳定，但是仍然有⼀些BUG。
⽤HBuilder开发移动APP的好处是可以连接⼿机实时调试APP（对于Android其实也就是⽤adb跟DDMS），连接⼿机后IDE的界⾯上会出现你所连接的⼿机，对项⽬中的⽂件修改回实时同步到⼿机上，下图是ADT和HB的对⽐：
2、HTML5 Plus
其实就是HBuilde Build发团队推出的⼀种框架，尽管官⽅说这是⼀个开放性的HTML5的扩展标准，但是从⽬前其提供的资源以及⾏为来看，我跟⼈不太认同官⽅的说法。⽬前也只有HBuilder能打包基于HTML5+的项⽬，同样地，HBuilder开发移动应⽤⽤的就是这个框架。
⽬前市场上可见的、基于此框架做的应⽤有CSDN的新闻客户端，基于此框架可以调⽤许多⼿机的原⽣服务。以下分别是CSDN的客户端及HBuilder提供的⽰例程序，HBuilder中有这两个项⽬的源代码：
⼆、实验⽬标（需求分析）
1、⽬标
⾸先，是确定⼀下⽤HB和H5+能不能做出原⽣⼿机应⽤的效果，其次是看看开发的复杂度。
在此，我定下⼀个⽬标：仿照⽹易新闻的APP，⽤HB做⼀个新闻客户端的雏形，重点是做出⼏个⼿机客户端常见的⼿势操作以及⼀些动画效果。
2、分析
下图是对⽹易新闻客户端使⽤过程的⼏个截图，也是这次要实现的内容：
①、⾸页（主页⾯），包含⼀个LOGO、⼀个菜单按钮、⼀个⽤户按钮、⼀个导航栏、⼀个新闻标题列，标题列的顶部是⼀个图⽚轮播栏；
②、在⾸页中拖动页⾯，页⾯可渐渐缩放以呈现出菜单，点击菜单按钮也是同样的效果；
③、在⾸页左右拖动可在头条、推荐、娱乐等导航间进⾏切换；
④、点击新闻列表进⼊新闻内容页，在内容页中拖动页⾯可返回。
第⼀步就是实现上⾯的内容，其中⼤部分⼿势操作在许多原⽣应⽤中都是司空见惯的，但是对于H5应⽤来说还是⽐较罕见，也没有⼏个案例可以参考，因此就蛮⼒开撸了。
三、正⽂
1、⼤概思路
既然是基于HTML5的，那么就必须发挥HTML5的优势。其⼀就是兼容性，⼀次开发即可在多个平台上使⽤，这就意味着同样需要在代码中进⾏设备检测，也要进⾏屏幕⾃适应，这些都是移动端⽹站⽤得⽐较多的⼿段了，也不再详述。官⽅也说了建议别⽤各种JS库，那么所有动画效果、页⾯布局都需要⾃⼰来写。
当然，必要的偷懒还是得有的，⽤个jQuery，在不影响性能的地⽅使⽤也⽆妨。
按照上⾯的分析，⽬前要做的是两个页⾯：第⼀个页⾯就是新闻列表页，包含那个缩放菜单；第⼆个页⾯是新闻内容的查看页⾯。
看完HTML5+的⽂档（虽然内容不多，但是该有的内容都有，还是不错的），⼤概明⽩了新闻列表页中的所有效果都得基于HTML5来写，也就是说，写这个页⾯可以⽤PC浏览器来进⾏调试。
进⼊新闻内容页的时候，可以⽤H5+提供的窗体接⼝，此页⾯中拖动返回之类的操作可以利⽤修改窗体的位置来实现。
页⾯中的图标都可以在FontAwesome这个图标字体⾥边到，可以省下⼀⼤笔时间。
那么，接下来就是开撸了。
2、代码结构
代码列表如下：
index是新闻列表页，view是新闻内容查看页，pic是图⽚浏览页（点击图⽚会进到这个页⾯，先放置）；js⽬录中，frame.js中放置⼀些公⽤代码，main.js是处理index逻辑的代码，main.XXX的⼏个js⽂件则是头条、推荐等导航的逻辑分管。
3、DOM操作及模板机制
从图⽚轮播到新闻列表，都可以先做好⼀个模板然后给予模板动态⽣成，所以，⾸先，我写了⼏个模板：
<section data-node="tpl" >
<div class="content-imghead" data-node="imghead">
<div class="content-imghead-container" data-node="container">
</div>
</div>
<div class="content-imgtitle" data-node="imgtitle">
<div class="content-imgtitle-desc" data-node="desc"></div>
<div class="content-imgtitle-words" data-node="words"></div>
<div class="conntent-imgtitle-dot i1" data-node="i1"></div>
<div class="conntent-imgtitle-dot i2" data-node="i2"></div>
<div class="conntent-imgtitle-dot i3" data-node="i3"></div>
<div class="conntent-imgtitle-dot i4" data-node="i4"></div>
</div>
<div class="content-horitem" data-node="horitem">
<img class="content-horitem-img" src="img/news_default_320_160.png" data-node="img"></img>
<div class="content-horitem-title" data-node="title">新闻标题新闻标题新闻标题新闻标题新闻标题</div>
<div class="content-horitem-desc" data-node="desc">副标题描述副标题描述副标题描述副标题描述</div>
<div class="content-horitem-icon" data-node="icon"><i class="icon-facetime-video"></i></div>
</div>
</section>
上⾯的代码中，从上⽽下分别是图⽚轮播的轮播页、图⽚轮播的标题页、新闻标题列表项的模板。HTML代码中有data-node这个属性，这是后⾯⽤来获取DOM⽤的，data-node的相关JS代码如下：
var F = window['F'] = {
getNodes : function(obj){
var i;
if(!obj.childNodes || obj.childNodes.length == 0){
return obj;
}
for(i = 0; i < obj.childNodes.length; i ++){
if(obj.childNodes[i].dataset && obj.childNodes[i].de){
obj[obj.childNodes[i].de] = F.getNodes(obj.childNodes[i]);
}
}
return obj;
}
小视频app开发};
也就是⼀个简易的DOM获取的⽅式，通过这句代码：
_doc = F.getNodes($('body')[0]);
可以分层遍历获取body下所有带了data-node的节点，譬如上⾯的模板，可以通过_doc.tpl.imghead来取得图⽚轮播的模板。
4、页⾯
调界⾯的过程是痛苦的，持续三四个⼩时的眼镜⼲涩的调整过程不提，总⽽⾔之最终写好的页⾯长这样：
仿真度也⾜够了吧？在此感谢FontAwesome，不然画图标可能还要花上⼀两个⼩时……（其实做完界⾯之后我就下班了，那天是4.29，就快五⼀了，⼼情激动啊）
最终⾸页的布局如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>...</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/frame.js" type="text/javascript" charset="utf-8"></script>
<script src="p.js" type="text/javascript" charset="utf-8"></script>
<script src="end.js" type="text/javascript" charset="utf-8"></script>
<script src="ainment.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.sport.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.finance.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css"></style>
</head>
<body>
<div class="side" data-node="side_left">
<div class="side-list" data-node="list">
<div class="side-list-item selected"><i class="icon-list-alt"></i>新闻</div>
<div class="side-list-item"><i class="icon-rss"></i>订阅</div>
<div class="side-list-item"><i class="icon-picture"></i>图⽚</div>
<div class="side-list-item"><i class="icon-film"></i>视频</div>
<div class="side-list-item"><i class="icon-comments-alt"></i>跟帖</div>
<div class="side-list-item"><i class="icon-headphones"></i>电台</div>
</div>
</div>
<div class="page" data-node="page_main">
<div class="touchcover" data-node="cover"></div>
<div class="header" data-node="header">
<div class="header-btn-left" data-node="btn_left_menu"><i class="icon-reorder"></i></div> <div class="header-btn-right"><i class="icon-user"></i></div>
</div>
<div class="navbar" data-node="navbar">
<div class="navi selected" data-node="navi0">头条</div>
<div class="navi" data-node="navi1">推荐</div>
<div class="navi" data-node="navi2">娱乐</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论