今日头条APP案例开发.docx

今日头条APP案例开发.docx

《今日头条APP案例开发.docx》由会员分享，可在线阅读，更多相关《今日头条APP案例开发.docx（18页珍藏版）》请在冰豆网上搜索。

今日头条APP案例开发

APP开发实战-新闻客户端

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

基于h5+的app开发介绍

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

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

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

最终实现

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

开发工具hbuilder

官网：

http:

//dcloud.io/

非常推荐的编辑器，完美支持htmljscssphpapp开发。

mui

最接近原生APP体验的高性能前端框架，使用前端框架的目的：

快速开发、更稳定的布局设计。

官网:

http:

//dcloud.io/mui.html

hui

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

官网:

创建项目

1、不使用任何框架

使用hbulider直接创建移动app项目，选择模板时选择空模板。

2、使用mui

使用hbulider直接创建移动app项目，选择模板时选择mui项目（自动生成mui最新的cssjs入口文件）。

3、使用hui

使用hbulider直接创建移动app项目，选择模板时选择空模板（下载hui框架包，复制进项目即可）。

真机调试

usb连接手机，点击编辑上的在手机设备下运行即可，安卓效果更好。

app开发中窗口的概念

使用h5+开发app原理是创建一个窗口内部包含一个html，然后调用原生接口完成更多功能。

缺点也就是html并不是原生在进行浏览器渲染时白屏卡顿在低端机上会比较明显，但随着手机的更新换代这样的问题已经越来越不明显。

通过我们开发者的努力可以把效果做到接近原生。

app开发的一个重要概念就是窗口，所以不要使用ahref=""去打开新页面，而是创建一个新窗口。

不使用任何框架制作项头部

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的整体颜色:

打开hui.css搜索#3283FA替换为#D43D3D并保存立即可以看到效果。

2、完成头部布局

dom部分

DOCTYPEhtml>