APP开发实战 - 新闻客户端
基于h5+的app 开发介绍传统的app开发一般使用原生语言进行,HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案,但是他们自带js api太少了,扩展api需要用原生语言开发,更致命的是这类方案的性能不足。最终实现完成app开发且一套代码多端发布。开发工具 hbuilder官网: 非常推荐的编辑器,完美支持 html js css php app开发。mui最接近原生APP体验的高性能前端框架,使用前端框架的目的:快速开发、更稳定的布局设计。官网 : hui由hcoder发布的前端ui框架,与mui显着的区别是dom操作。官网 : 创建项目1、不使用任何框架使用hbulider直接创建移动app项目,选择模板时选择空模板。2、使用mui使用hbulider直接创建移动app项目,选择模板时选择mui项目(自动生成mui最新的css js 入口文件)。3、使用hui使用hbulider直接创建移动app项目,选择模板时选择空模板(下载hui框架包,复制进项目即可)。真机调试usb连接手机,点击编辑上的在手机设备下运行即可,安卓效果更好。app开发中窗口的概念使用h5+开发app原理是创建一个窗口内部包含一个html,然后调用原生接口完成更多功能。缺点也就是html并不是原生在进行浏览器渲染时白屏 卡顿在低端机上会比较明显,但随着手机的更新换代这样的问题已经越来越不明显。通过我们开发者的努力可以把效果做到接近原生。app开发的一个重要概念就是窗口,所以不要使用a href="" 去打开新页面,而是创建一个新窗口。不使用任何框架制作项头部1、注意meta声明: 2、css 格式化dom
*{margin:0px; padding:0px; font-size:15px; color:#000000; outline:none;}
body{background:#FFFFFF;}
div{overflow:hidden;}
a{text-decoration:none; color:#000000;}
a:hover{text-decoration:underline;}
img{border:none;}
3、头部代码编写
导入hui下载hui最新版本 解压后导入进项目。制作头部导航及内部元素1、一键改变ui的整体颜色 : 打开 搜索 #3283FA 替换为 #D43D3D 并保存立即可以看到效果。2、完成头部布局dom部分
charset="utf-8">
name="viewport" content="initial-scale=, maximum-scale=, user-scalable=no" />
type="text/css" rel="stylesheet" href="css/" />
css 增加
#topSearch{width:60%; height:30px; background:#F6F5F4; border-radius:3px; float:right; margin:7px 8px 0px 0px; line-height:30px; color:#999999; text-align:left; text-indent:15px; font-size:14px;}
制作分类导航dom 及 js
href="javascript:changeCate(0);" class="topCateSed">推荐 href="javascript:changeCate(1);">热点 href="javascript:changeCate(2);">视频 href="javascript:changeCate(3);">本地 href="javascript:changeCate(4);">社会 href="javascript:changeCate(5);">娱乐 href="javascript:changeCate(6);">问答 href="javascript:changeCate(7);">汽车 href="javascript:changeCate(8);">体育
使用了hui的横向滚动、使用hui选择器进行连贯操作完成点击效果、css 部分
#topCate{height:40px; background:#F6F5F4; border-bottom:1px solid #E8E8E8; width:100%;}
#topCate a{display:block; float:left; height:40px; line-height:40px; width:15%; text-align:center;}
.topCateSed{color:#D43D3D; font-size:17px !important;}
为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。相关知识:webview,参考手册:实现步骤:1、创建子窗口 2、在入口页嵌入子窗口 (会使用 plusReady事件)3、将子页面的返回功能转交给入口页入口页代码
charset="utf-8">
name="viewport" content="initial-scale=, maximum-scale=, user-scalable=no" />
type="text/css" rel="stylesheet" href="css/" />
href="javascript:changeCate(0);" class="topCateSed">推荐 href="javascript:changeCate(1);">热点 href="javascript:changeCate(2);">视频 href="javascript:changeCate(3);">本地 href="javascript:changeCate(4);">社会 href="javascript:changeCate(5);">娱乐 href="javascript:changeCate(6);">问答 href="javascript:changeCate(7);">汽车 href="javascript:changeCate(8);">体育
子窗口代码
charset="utf-8">
name="viewport" content="initial-scale=, maximum-scale=, user-scalable=no" />
type="text/css" rel="stylesheet" href="css/" />
hi....
HOA介绍开放源地址 : 项目实现过程入口页js变化
var subView;
(function(){
subView = ('', {'top':'88px', bottom:'0px'});
var self = (subView);
});
hui('#topCate').scrollX(8,'a');
ind('a').removeClass('topCateSed').eq(cateId).addClass('topCateSed');
('changeCate('+cateId+');');
}子页面完整代码
charset="utf-8">
name="viewport" content="initial-scale=, maximum-scale=, user-scalable=no" />
type="text/css" rel="stylesheet" href="css/" />
本节内容1、点击新闻分类切换不同的新闻列表。2、上拉加载更多
核心js
function changeCate(cateId){
page = 1;
cate = cateId;
(0);
= false;
getNewsList();
}
function getNewsList(){
page = 1;
();
var html = '';
(
page+'&cate='+cate,
function(data){
();
var arrItem = ('--hcSplitor--');
for(var i = 0; i < ; i++){
var item = arrItem[i].split('--hcListSplitor--');
html += '
''+
''+
' ' ''+
item[2]+''+
''+
'';
}
(true);
hui('#newsList').html(''+
html+'');
();
page++;
},
function(e){
();
('连接失败');
(true);
}
);
}
使用HUI来实现图片的懒加载是非常方便的,您只需要设置图片的预加载占位图及实际地址:
src="占位图" class="HUI_Lazy" lazySrc="图片的实际地址" />
'); (); return false;}
if == '0'){(' 没有演示新闻信息,请点击前3条'); (); return false;}
hui('#HUI_Header').find('h1').html;
hui('#content').html;
},
function(){
(' 数据加载失败.. ');
();
}
);
}