android之基于html5快速开发新闻客户端

使用369平台使用Html5快速开发的新闻客户端,在这篇android之使用Html5开发的基础上。

实验apk:http://dev.369cloud.com/down/compile/15577

看看效果







都是使用封装好的代码,官方文档有说明,数据库在建立时使用了主外键的方式,这个也提供了模式 OTO

html 的body部分分为了上中下三部分

<body>
<div id="all" class="container box box-ov">
    <div id="header" class="c-wh box c-307 box-ac box-pc" style="height:3em;">
        <div id="titleName" class="box-f1 tx-c t-wh font2">新闻</div>
    </div>
    <div id="content" class="box-f1 c-wh">
    
    </div>
    <div id="footer" class="box box-s box-pc c-wh t-gra">
        <div id="news" class="footerBtn box box-f1 box-ac box-pc padd-tb t-307">
            <!--fa在线图标库 http://fontawesome.dashgame.com/-->
            <span class="fa fa-newspaper-o font2"></span>
            <span class="padd-l font1">新闻</span>
        </div>
        <div id="pic" class="footerBtn box box-f1 box-ac box-pc padd-tb">
            <span class="fa fa-photo font2"></span>
            <span class="padd-l font1">图集</span>
        </div>
        <div id="my" class="footerBtn box box-f1 box-ac box-pc padd-tb ">
            <span class="fa fa-user font2"></span>
            <span class="padd-l font1">我的</span>
        </div>
    </div>
</div>
</body>
content部分使用createPopover 动态加载其他页面
<script>
    // 创建一个view对象很简单,只需通过app的currentView方法即可。
	var view = app.currentView();
	domReady(function(require){
		
		app.lockRotate(true);
    	if($.os.ios){
	    	app.setStatusBarBackgroundColor('#307ab3');
    		app.statusBarFontColor(1);
    	}
		
		var y = $('#header').height();// y 轴
//		var height = view.getHeight()-y-$('#footer').height();//content高度
		var height = $('#content').height();
//		console.log(height);
		var news = view.createPopover(0,y,0,height);// createPopover
		var albums = view.createPopover(0,y,0,height);
		var my = view.createPopover(0,y,0,height);
		news.open("news_content.html");
		//设置全局变量,存储 content 高度
		app.storage.set("contentHeight", height);
		//footerBtn 点击事件
		$('.footerBtn').button(function(evt){
			var page = $(evt).attr('id');
			// 字体变色
			$('.footerBtn').removeClass("t-307");
			$('#' + page).addClass("t-307");// '#'+page 转型 id
			if(page == "news"){
				$('#titleName').html("新闻");//设置header 文字内容
				news.open("news_content.html");
			}else if(page == "pic"){
				$('#titleName').html("图集");
				albums.open("pic_content.html");
			}else if(page == "my"){
				$('#titleName').html("个人主页");
				albums.open("my_content.html");
			}
		});
			   
	});
	
</script>
上面的菜单栏也是提供好了,app.require("tabMark")

<script>
    
    var  dataSources;
    
    domReady(function(require){
    	contentHeight = app.storage.get("contentHeight");
    	// tabMark 在整篇文档中,此对象只创建一次. 请不要重复创建.
	   	var  tabmark  = app.require("tabMark");
	   	setDataSource();
	    tabmark.setDataSource(dataSources);
	   // setFrame(x, y, width, height) 
	    tabmark.setFrame(0,0,app.currentView().getWidth(),contentHeight);
	      
	    tabmark.show();   
	   
    });
    function setDataSource(){
    	dataSources = {
	       titleFont:12.0, //文字大小
	       titleHighlightFont:15.0,//文字高亮大小
	       titleColor:"#009ACD",//文字颜色
	       titleHighlightColor:"#CD8500",//文字高亮颜色
	       vernierColor:"#00E5EE",//游标颜色
	       naviBgColor:"#ffffff",//导航条背景色
	       btnHeight:36.0,//导航条(按钮)高度
	       manyBtn:false,//true:多按钮模式(自适应按钮宽度)  false:自动等距分割
	       EditButtonImg:"abc.png",//编辑按钮图片
	       interval: true, //分割线,android不支持
	       naviHidden:false, //是否隐藏导航条
	       defaultIndex:1,//默认开启的页面 
	       dataSource:[
	       		{
	                menu:'头条',
	                url:"news_first.html"
	            },
	            {
	                menu:'科技',
	                url:"news_technology.html"
	            },
	            {
	                menu:'体育',
	                url:'news_sports.html'
	            },
	            {
	                menu:'社会',
	                url:'news_sociology.html',
	            },
	            {
	                menu:'财经',
	                url:'news_finance.html'
	            },
	            {
	                menu:'汽车',
	                url:'news_car.html'
	            },
	            {
	                menu:'时尚',
	                url:'news_fashion.html'
	            },
	            {
	                menu:'历史',
	                url:'news_history.html'
	            }
	       ]
	   }
    };
     
</script>
基本上框架就搭完了,剩下的就是通过js去数据库里获取数据,参考Js-SDK 部分

/*请求新闻列表切填充新闻列表页面
 * @param 	Json 	whereJson	查询新闻列表的条件 
 */
var newsNowpage = 1;
var isLastPage = false;
var isLoading = false;
function getNewsListData(whereJson,count){
//	getHeader();
	var _news  = _dt.DB.Tab("news_content");//对表的属性(列)操作 对表内数据的操作
	// http://docs.369cloud.com/BaaS/shujucunchu/Js-sdk#getlistdata
    var _option = {
        page:newsNowpage,
        size:10,
        where:whereJson,
        order:[["_edtm",1]]
    };
    // Failed to load resource: net::ERR_CONNECTION_REFUSED http://127.0.0.1:30007/
    _news.getListData(_option,function(err){
    	if(whereJson.type == "technology"){
       		$hideProgress();
       }
        app.alert("网络请求超时,请检查网络");
    },function(result){
//  	console.log(result.data.length);
//  	alert(result.data.length);
		if(result.data.length==0){
    		isLastPage = true;
    		isLoading = false;
    	}
    	if(result.data.length>0 && !isLastPage){
    		//是否是最后一页,否:加载页加1;是:isLastPage是true;
    			newsNowpage += 1;
	        for(var i in result.data){
	        	var newsInfo = result.data[i];
//	        	每次查询的结果的前三条做轮播图的
				if(i<3 && result.current == 1){	
					
					var sliderHtmls = '';              
					sliderHtmls +='<div id="'+newsInfo._id+'" class="showInfo-js ui-slider-item w-100">';
	                sliderHtmls +='<div class="ui-slider-img banner bg-img1">';
	                sliderHtmls +='<div class="mar-t-11 t-wh opt-06 hei-2 box box-ps box-ac">';
	                sliderHtmls +='<div class="w-70 omit1">'+newsInfo.title+'</div>';
	                sliderHtmls +='</div>';
	                sliderHtmls +='</div>';
	                sliderHtmls +='</div>';
	                $("#slider-js").append(sliderHtmls);
	                $("#"+newsInfo._id).children().css("background-image", 'url("' + newsInfo.image + '")');
				}else{
					var listHtmls = '';
					listHtmls += '<div id="'+newsInfo._id+'" class="showInfo-js box b-d2d mar-a padd-b">';
					listHtmls += '<div class="wh-pic"><img src="'+newsInfo.image+'" class="wh-100"></div>';
					listHtmls += '<div class="box box-f1 box-ov padd-l">';
					listHtmls += '<div class="omit1 font1">'+newsInfo.title+'</div>';
					listHtmls += '<div class="t-gra padd-t omit line2 box box-ps">'+newsInfo.brief+'</div>';
					listHtmls += '</div>';
					listHtmls += '</div>';
					$("#dataBody-js").append(listHtmls);
				}
	    	}
	        $('#slider').slider( { 
	            loop:true,
	            autoPlay:true,
	            speed:100,
	            dots:true,
	            guide : true,
	            mulViewNum:1
	        });
	       if(whereJson.type == "technology"){
	       		$hideProgress();
	       }
	    	//跳转到详情页面
	    	$(".showInfo-js").button(function(btn,el){
				app.storage.set("newsId",btn.id);
				var win = app.createWindow();
				win.open('newsDetail.html', 'newsDetail');
	    	})
    	}else if(newsNowpage == 1 && result.data.length == 0){
    		var emptyHtml = '<div class="box box-f1 box-pc box-ac mar-t-3 font2">暂无数据</div>'
    		$(".body-js").html(emptyHtml);
    	}
		if(isLastPage&&count==10){
			app.alert("没有更多数据了","");
		}
    });
    headerRefresher.completeRefresh();
    footerRefresher.completeRefresh();
}


附件:源码:https://github.com/CL-window/html5_news(Json里为数据库数据)

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值