文档文库
手机版
投诉建议
热门搜索： 心得体会 演讲稿 思想汇报
首页 > 今日头条APP案例开发

今日头条APP案例开发

发布时间：2017-08-24 14:11:15   来源：文档文库   
小 中 大
字号：
手机查看

APP开发实战 - 新闻客户端

目 录

基于h5+的app 开发介绍、hui、mui介绍、项目部署 2

制作子窗口、数据加载、下拉刷新 8

新闻分类切换 、上拉加载更多 16

懒加载的使用 19

新闻详情页面开发 20

新闻详情页面分享功能 23

app 在线升级 27



基于h5+的app 开发介绍、hui、mui介绍、项目部署

基于h5+的app 开发介绍

传统的app开发一般使用原生语言进行，HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。

5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。

业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。



最终实现

完成app开发且一套代码多端发布。



开发工具 hbuilder

官网： http://dcloud.io/

非常推荐的编辑器，完美支持 html js css php app开发。



mui

最接近原生APP体验的高性能前端框架，使用前端框架的目的：快速开发、更稳定的布局设计。

官网 : http://dcloud.io/mui.html



hui

由hcoder发布的前端ui框架，与mui显著的区别是dom操作。

官网 : http://www.hcoder.net/hui



创建项目

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最新版本 http://www.hcoder.net/hui 解压后导入进项目。



制作头部导航及内部元素

1、一键改变ui的整体颜色 : 打开hui.css 搜索 #3283FA 替换为 #D43D3D 并保存立即可以看到效果。

2、完成头部布局

dom部分

charset="utf-8">

name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

type="text/css" rel="stylesheet" href="css/hui.css" />

id="HUI_Header">

class="HUI_FL"> src="img/logo.png" width="100" />

id="topSearch"> class="HUI_Icons HUI_Icons_search" style="color:#999999;"> 搜您想搜的

class="HUI_Wrap">

type="text/javascript" src="js/hui.js">

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

class="HUI_Wrap" id="topCate">

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);">体育

type="text/javascript" src="js/hui.js">

type="text/javascript">

hui('#topCate').scrollX(8,'a');

//完善点击效果

function changeCate(cateId){

hui('#topCate').find('a').removeClass('topCateSed').eq(cateId).addClass('topCateSed');

}

使用了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，参考手册：http://www.html5plus.org/doc/zh_cn/webview.html

实现步骤：

1、创建子窗口 indexSub.html

2、在入口页嵌入子窗口 （会使用 plusReady事件）

3、将子页面的返回功能转交给入口页



入口页代码

charset="utf-8">

name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

type="text/css" rel="stylesheet" href="css/hui.css" />

id="HUI_Header">

class="HUI_FL"> src="img/logo.png" width="100" />

id="topSearch"> class="HUI_Icons HUI_Icons_search" style="color:#999999;"> 搜您想搜的

class="HUI_Wrap" id="topCate">

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);">体育

type="text/javascript" src="js/hui.js">

type="text/javascript">

hui.plusReady(function(){

var subView = hui.create('indexSub.html', {'top':'87px'， bottom:'0px'}); //此处注意设置 bottom

var self = plus.webview.currentWebview();

self.append(subView);

});

hui('#topCate').scrollX(8,'a');

//完善点击效果

function changeCate(cateId){

hui('#topCate').find('a').removeClass('topCateSed').eq(cateId).addClass('topCateSed');

}



子窗口代码

charset="utf-8">

name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

type="text/css" rel="stylesheet" href="css/hui.css" />

class="HUI_Wrap">

hi....

type="text/javascript" src="js/hui.js">

type="text/javascript">

hui.Back = function(){

var parentView = plus.webview.currentWebview().parent();

parentView.evalJS('hui.Back();');

}

HOA介绍

HCoder Open Api 简称 HOA 是由 www.hcoder.net 提供的一套api数据源，提供了日常app开发学习过程中常用的数据源，适用于基于 mui hui h5+的app开发。

开放源地址 : http://www.hcoder.net/api

项目实现过程

入口页js变化

var subView;

hui.plusReady(function(){

subView = hui.create('indexSub.html', {'top':'88px', bottom:'0px'});

var self = plus.webview.currentWebview();

self.append(subView);

});

hui('#topCate').scrollX(8,'a');

//完善点击效果

function changeCate(cateId){

hui('#topCate').find('a').removeClass('topCateSed').eq(cateId).addClass('topCateSed');

subView.evalJS('changeCate('+cateId+');');

}

子页面完整代码

charset="utf-8">

name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

type="text/css" rel="stylesheet" href="css/hui.css" />

class="HUI_Wrap">

id="newsList" class="HUI_MediaList1">

type="text/javascript" src="js/hui.js">

type="text/javascript">

var page = 1, cate = 0;

hui.plusReady(function(){

changeCate(0);

hui.refresh(getNews);

});

hui.Back = function(){

var parentView = plus.webview.currentWebview().parent();

parentView.evalJS('hui.Back();');

}

function changeCate(cateId){cate = cateId; getNews();}

function getNews(){

var html = '';

hui.centerLoading();

hui.get(

'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=mediaList&page='+page+'&cate='+cate,

function(data){

var arrNews = data.split('--hcSplitor--');

for(var i = 0; i < arrNews.length; i++){

var itemArr = arrNews[i].split('--hcListSplitor--');

html += '

  • '+

    '

    '+

    '

    '+

    '

    '+itemArr[2]+'

    '+

    '

    '+

    '

    • ';

    }

    hui('#newsList').html('

    ');

    hui.centerLoading(true);

    hui.endRefresh();

    },

    function(e){

    hui.toast('获取新闻失败，请检查网络'); hui.centerLoading(true);

    hui.endRefresh();

    }

    );

    }



    新闻分类切换 、上拉加载更多

    本节内容

    1、点击新闻分类切换不同的新闻列表。

    2、上拉加载更多

    核心js

    function changeCate(cateId){

    page = 1;

    cate = cateId;

    hui.scrollTop(0);

    hui.isLoadMoreIng = false;

    getNewsList();

    }

    function getNewsList(){

    page = 1;

    hui.centerLoading();

    var html = '';

    hui.get(

    'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=mediaList&page='+page+'&cate='+cate,

    function(data){

    hui.endRefresh();

    var arrItem = data.split('--hcSplitor--');

    for(var i = 0; i < arrItem.length; i++){

    var item = arrItem[i].split('--hcListSplitor--');

    html += '

  • '+

    ''+

    '

    '+

    '

    '+

    '

    '+item[2]+'

    '+

    '

    '+

    ''+

    '

    • ';

    }

    hui.centerLoading(true);

    hui('#newsList').html('

    ');

    hui.lazyLoadNow();

    page++;

    },

    function(e){

    hui.endRefresh();

    hui.toast('连接失败');

    hui.centerLoading(true);

    }

    );

    }



    懒加载的使用

    使用HUI来实现图片的懒加载是非常方便的，您只需要设置图片的预加载占位图及实际地址：

    src="占位图" class="HUI_Lazy" lazySrc="图片的实际地址" />

    //js

    hui.lazyLoad(className) 与 hui.lazyLoadNow(className)

    hui.lazyLoad()的参数为需要懒加载的图片的类属性，默认为 HUI_Lazy。

    懒加载组件会自动识别滚动条滚动事件，如果懒加载图片是动态追加进来的，在追加后使用 hui.lazyLoadNow(className)函数可以立即执行一次懒加载。



    新闻详情页面开发

    实现步骤

    1、在新闻列表上增加打开窗口功能，并传递新闻id

    2、创建新闻详情页面 info.html

    3、新闻详情页面代码

    charset="utf-8">

    name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    type="text/css" rel="stylesheet" href="css/hui.css" />

    id="HUI_Header">

    HUI - Hello

    id="HUI_Back">

    class="HUI_Wrap">

    id="content">

    id="share"> class="HUI_Icons HUI_Icons_share-copy">

    type="text/javascript" src="js/hui.js">



    新闻详情页面分享功能

    新闻详情页面分享功能实现步骤

    1、配置manifest.json 增加分享模块

    分享服务对象格式

    {"id":"sinaweibo","description":"新浪微博","authenticated":false,"accessToken":"","nativeClient":false}

    {"id":"tencentweibo","description":"腾讯微博","authenticated":false,"accessToken":"","nativeClient":false}

    {"id":"qq","description":"QQ","authenticated":false,"accessToken":"","nativeClient":true}

    {"id":"weixin","description":"微信","authenticated":true,"accessToken":"","nativeClient":true}

    2、页面代码

    charset="utf-8">

    name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    type="text/css" rel="stylesheet" href="css/hui.css" />

    id="HUI_Header">

    HUI - Hello

    id="HUI_Back">

    class="HUI_Wrap">

    id="content">

    id="share"> class="HUI_Icons HUI_Icons_share-copy">

    type="text/javascript" src="js/hui.js">



    app 在线升级

    app 在线升级原理

    在app内部设置版本号，在远程服务器端设置最新版本号，如果2个版本号不等则提示升级。



    安装app函数

    plus.runtime.install(d.filename);



    完整代码

    charset="utf-8">

    name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    type="text/css" rel="stylesheet" href="css/hui.css" />

    class="HUI_Wrap">

    id="newsList" class="HUI_MediaList1">

    type="text/javascript" src="js/hui.js">

    type="text/javascript">

    var page = 1, cate = 0, myappVerson = '1.0', dtask;

    hui.plusReady(function(){

    changeCate(0);

    hui.refresh(getNews);

    hui.loadMore(loadMore);

    checkVersion();

    });

    function checkVersion(){

    //......

    }

    hui.Back = function(){

    var parentView = plus.webview.currentWebview().parent();

    parentView.evalJS('hui.Back();');

    }

    function changeCate(cateId){cate = cateId; getNews();}

    function loadMore(){

    var html = '';

    hui.get(

    'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=mediaList&page='+page+'&cate='+cate,

    function(data){

    if(data == 'null'){hui.endLoadMore(true); return false;}

    hui.endLoadMore();

    var arrNews = data.split('--hcSplitor--');

    for(var i = 0; i < arrNews.length; i++){

    var itemArr = arrNews[i].split('--hcListSplitor--');

    html += '

  • '+

    '

    '+

    '

    '+

    '

    '+itemArr[2]+'

    '+

    '

    '+

    '

    • ';

    }

    var ul = document.createElement('ul');

    ul.innerHTML = html;

    hui(ul).appendTo('#newsList');

    page++;

    },

    function(e){

    hui.toast('获取新闻失败，请检查网络'); hui.centerLoading(true);

    hui.endRefresh();

    }

    );

    }

    function getNews(){

    page = 1;

    var html = '';

    hui.centerLoading();

    hui.isLoadMoreIng = false;

    hui.scrollTop(0);

    hui.get(

    'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=mediaList&page='+page+'&cate='+cate,

    function(data){

    var arrNews = data.split('--hcSplitor--');

    for(var i = 0; i < arrNews.length; i++){

    var itemArr = arrNews[i].split('--hcListSplitor--');

    html += '

  • '+

    '

    '+

    '

    '+

    '

    '+itemArr[2]+'

    '+

    '

    '+

    '

    • ';

    }

    hui('#newsList').html('

    ');

    hui.centerLoading(true);

    hui.endRefresh();

    page++;

    },

    function(e){

    hui.toast('获取新闻失败，请检查网络'); hui.centerLoading(true);

    hui.endRefresh();

    }

    );

    }

    本文来源：https://www.2haoxitong.net/k/doc/ff92308659f5f61fb7360b4c2e3f5727a5e924eb.html

    《今日头条APP案例开发.doc》
    将本文的Word文档下载到电脑，方便收藏和打印
    推荐度：
    点击下载文档

    文档为doc格式
    相
    关
    案
    例

    相关推荐

    推荐内容

    酒店个性化服务案例精选-前厅部 [考试必备]2018-2019年最新安徽省宣城中学初升高自主招生考试数学模拟精品试卷[含解析][5套试卷] 乡村振兴战略继续教育习题及答案 中国法治建设遇到困难的原因调查报告（完整版） - 1 五年级英语活动手册 临时排水施工方案 ERCP治疗胆总管结石患者的术中配合与综合护理干预体会 少年闰土优秀导学案（详案） 贩卖儿童是否应判“死刑” 一年级上册语文3 口耳目[教案]部编版
    网站内容来自网络，如有侵权请联系我们，立即删除！ Copyright © 范文写作网京ICP备16605803号