今日头条APP案例开发Word格式.docx

资源描述

今日头条APP案例开发Word格式.docx

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

今日头条APP案例开发Word格式.docx

创建项目

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声明:

metaname="

viewport"

content="

initial-scale=1.0,maximum-scale=1.0,user-scalable=no"

2、css格式化dom

*{margin:

0px;

padding:

font-size:

15px;

color:

#000000;

outline:

none;

}

body{background:

#FFFFFF;

div{overflow:

hidden;

a{text-decoration:

hover{text-decoration:

underline;

img{border:

3、头部代码编写

导入hui

下载hui最新版本解压后导入进项目。

制作头部导航及内部元素

1、一键改变ui的整体颜色:

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

2、完成头部布局

dom部分

DOCTYPEhtml>

html>

head>

metacharset="

utf-8"

title>

/title>

linktype="

text/css"

rel="

stylesheet"

href="

css/hui.css"

/head>

body>

divid="

HUI_Header"

divclass="

HUI_FL"

imgsrc="

img/logo.png"

width="

100"

/div>

topSearch"

spanclass="

HUI_IconsHUI_Icons_search"

style="

color:

#999999;

/span>

搜您想搜的<

HUI_Wrap"

scripttype="

text/javascript"

src="

js/hui.js"

/script>

/body>

/html>

css增加

#topSearch{width:

60%;

height:

30px;

background:

#F6F5F4;

border-radius:

3px;

float:

right;

margin:

7px8px0px0px;

line-height:

text-align:

left;

text-indent:

14px;

制作分类导航

dom及js

id="

topCate"

div>

ahref="

javascript:

changeCate（0）;

class="

topCateSed"