基于PHP技术的多客户端自适应网站的设计与实现

来源：疯狗科技 2017-11-09 点击：

第一章　　网页自适应

1.1自适应的概念基于PHP技术的多客户端自适应网站的设计与实现

十几年前，著名的外国Ethan Marcotte教授提出了自己对网页方面的一个论点就是“自适应网页设计”（Responsive Web Design）这个专有名词，可以在设计网页的时候让网页在设备显示的时候，自动识别屏幕的宽度、而且做出调整相应网页的设计。他本人做出了一个非常有意思实验，就是把几张主人公的头像都进而制作设计成网页中，当这些头像图片并排在一行时，说明屏幕的宽度大于1300像素。当这些头像图片分成两行时，说明屏幕的宽度在600像素到1300像素之间。当导航栏有些偏移到网页的顶部时，说明屏幕宽度在400像素到600像素之间。当这些头像图片分成三行，说明屏幕的宽度在400像素以下。

1.2自适应的发展方向与应用

现在为什么需要自适应网页设计？因为“科技时代已经来临，一步一步的向前发展，不断的有各种各样的新型设备（手机/平板电脑/手环）、平台和浏览器都需要各种网站的网页能够兼容显示。自适应网页设计决定了一种必然的设计趋势，在现如今年所有的网站都将采用自适应网页设计。那么是谁在使用自适应网页设计呢？其实不管是用在演示、还是流行设计和页面美化中。而今大量的网站已经采用了自适应网页设计。何时需要采用自适应网页设计？当你需要考虑以下事情时：在时间上，金钱上，不同浏览器的支持，性能，内容的呈现，网站等等去跟移动应用相对比时，自然而然就需要采用自适应网页的设计。

现在的互联网已经发展到了移动网络5G的时代，我们接触互联网的方式已经开始呈现出多元化方向发展，屏幕大小的展示有很大的不确定因素，假设现在的个人和企业等方面的网站要求每个显示屏幕都去制作设计一个网站，很明显就会会加大设计和管理网站的成本，同时还会涉及到未来的运营方面的不便和耗费大量的人力财力的成本来支撑其运营。自适应网站的设计的出现使的设计师在设计一个网站的时候，可以方便快捷的市网页适应不同的终端系统，应用到不同的网络载体上去，它具有非常好的的便捷性，同时也有利于减少企业设计开发网站的成本等。

老式的网站是固定的死网页的宽度或者高度，在不同的客户端所展现的页面效果都是一样的。所谓自适应网站设计是指在网页前端展示的内容是活的，即笔记本电脑、台式电脑、移动设备等不同的设备所看到的内容是不一样的，有了这种技术，网页就可以适应任何终端，在任何终端都能展示出最好的效果。对目前的自适应网页设计的发展趋势来讲，无论是放在市场的角度，还是建设网站的角度，自适应网页将会取代传统建设网站的地位。互联网日新月异，随着更多的互联网技术的诞生，会有更强大的技术出现。

1.3自适应与响应式区别

在我学习并设计制作自适应网页的同时，响应式这个名词会时不时出现在我的视线中那么自适应与响应式是不是一回事呢？没有做过前端开发的人自然对这两个名词的概念是不清楚不明白的，随着现在网站设计扁平化的潮流，越来越多的客户想要把原有的网站做成自适应或者响应式呈现。但很多人又不清楚这两者的区别，甚至很多人会认为这两者就是一个概念。其实响应式布局大概的意思就是一个网页放在不同适配分辨率下的呈现，这一概念在2010年5月由Ethan Marcotte提出的，简单来说就是建立一个网页，通过CSSMedia Queries，Content－Based Breakpoint（基于内容的断点）等技术来改变网页的大小以适应不同分辨率的屏幕。而自适应布局大概的意思就是依据不同适配分辨率而选择不同的页面，为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对以下几种分辨率（320，480，760，960，1200，1600）。制作和设计网站的时候，我们需要根据需求来判断什么样的网站适合使用自适应布局（固定断点），什么样的网站适合响应式布局（流体网格）。

理论上来说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切合实际。自适应网页设计的优势就是适合固定断点的网站。在网页的实施上面代价成本更低，测试也比较容易。自适应布局可以让设计更加容易操作控制，因为它只需要考虑几种状态就行了。相反另一种对于响应式网页设计优势就是流体网格的网站。在网页上表现出灵活性强，可适应不同分辨率的设备，方便快捷的解决多设备显示适应的问题。下面客观的来说自适应和响应式的区别：首先前者和后者解决的问题是不一样的。自适应本身是去解决怎样才能在不同大小的移动设备或者其他设备上表现出相同的网页，宽度一般在600像素以下和在1000像素以上的时候，前者说明是手机小屏幕后者则是pc端。相同的内容，在大小不一的屏幕上，都表现出理想满意的效果，不是一件易事。各式各样的设计方式都能体现出自己的优缺势，所以每位设计师都会去选择最适合自己的制作方式。

第二章　　Bootstrap全局CSS样式

2.1概览

为了网页自适应的开发变得更好、更快、更强壮的体验，学习了Bootstrap后深入了解其中的底层结构关键部分，在Bootstrap中用到的一些 HTML 元素与CSS 属性都会是 HTML5 文档类型。在编写时可以参照以下代码进一步设置。第1行<!DOCTYPE html>，第2行<html>，第3行…，第4行</html>。

在原来Bootstrap 2所属的框架中，它的重要组织部分对移动设备友好的样式增加了一些。在现在的Bootstrap 3 版本又中重新设计编写了整个框架，那是因为把移动设备的优先级提升了。这个版本在编写时能直接进入框架的中心，在操作上而且方便快捷的增加了对移动设备的样式多样性。在框架的每个角落中包括了设备的样式，它不仅仅是增加额外的文件。设计者在移动设备上进行绘制和触屏缩放时，需要在<head>之中间加入viewport元数据标签，编写代码如下：<meta name=”viewport“ content=”width=device-width, initial-scale=1“>。浏览器在设备上使用时，使用视口（viewport）去设置 meta 属性 user-scalable=no，用来对其禁止缩放，禁止缩放后，使用者只可以滚动屏幕。以上方法不适合全部的网站应用，还是需要看设计者的情况而定！此代码：<meta name=”viewport“ content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no“>可以参考。

Bootstrap链接样式、排版设置了基本的全局样式。前者是为所有的链接设置了基本颜色 @link-color ，正是当链接处于：hover状态时才可以添加下划线。后者是为body元素设置background-color: #fff;设计师会用@line-height-base、@font-size-base和@font-family-base当变量作为排版的基本要求参数。Bootstrap 会为每一个页面的内容和栅格系统包裹。container 容器。。container 是用于固定宽度和支持响应式布局的容器。代码如下：第1行<div>，第2行…，第3行</div>。其中。container-fluid 类用在100%宽度，占所有视口的容器。

2.2栅格系统

Bootstrap 是已响应式和供移动设备的流式栅格系统，它共有12列不超过12列，它会跟随视口或屏幕大小而增加。这里包含了方便使用的预定义类和强大的mixin来编写更具语义的布局。栅格系统的原理是通过一系列的行（row）与列（column）的相结合去搭建页面的布局，本身的设计内容就可以放入这些搭建好的布局中。Bootstrap 栅格系统中的”row“一定被 .container或 .container-fluid包含，简单方便的赋予合适的排列和内补。在以”行（row）“在水平方向组建一组”列（column）“。”列“作为”行“的直接子元素时，搭建设计的内容需要放在”列“的里面。在 .row 和 .col-xs-4 这种预定义的类，也能用来创建栅格布局。Bootstrap 源代码中定义的 mixin 也能用来创建布局，在使用”列“去设置 padding 属性，从而搭建列与列之间的间隔。通过 .row 元素定为负值 margin 用来抵消掉 .container 元素设置的 padding，它的功能就是侧面的把”行“所包含的”列“消除掉了padding。栅格系统大多用在等于分界点大小或者大于屏幕所在宽度的设备上，对小屏幕设备覆盖栅格类。在任何元素上的所有 .col-md-* 栅格类都用在与屏幕宽度大于或等于分界点大小的设备上，对小屏幕设备覆盖栅格类。在元素上所有的。col-lg-*不存在的应用都会影响大尺寸屏幕的移动设备或这其他设备。

2.3排版

在HTML文档中有六个级别的标题，分别是<h1>到<h6>元素来定义。其中<h1>表示最高级别的标题，然后依次类减，<h6>级别最低。<h1>是一级标题，表示的是最大的字号，<h6>是6级标题，表示的是最小的字号。在html文档中的标题里可以包含 <small> 标签，可赋予 .small 类的元素，可用来标记副标题。<h1>h1. Bootstrap heading <small> Secondary text</small></h1>。整个文档页面的主体中Bootstrap 把全局 font-size 设置为14px，line-height 设置为 1.4左右。以上属性可直接赋予 <body> 元素和全部段落元素。其次<p>（段落）元素设置了等于 1/2 行高（即 10px）的底部外边距。中心内容可以通过 .lead 类的添加让段落能明显突出，要删除的文本使用 <del> 标签。没用的文本使用 <s> 标签。另外插入的文本使用 <ins> 标签。带下划线的文本使用 <u> 标签。

通过使用对齐类文本，可以将文字重新对齐，非常的简单方便。

<p>Left aligned text.</p>

<p>Center aligned text.</p>

<p>Right aligned text.</p>

<p>Justified text.</p>

可以改变文本的大小写的代码如下：

<p>Lowercased text.</p>

<p>Uppercased text.</p>

<p>Capitalized text.</p>

通过最接近日常使用的格式呈现让联系信息如下。在每行结尾添加 <br> 可以保留需要的样式。

<strong>Twitter, Inc.</strong><br>

1355 Market Street, Suite 900<br>

San Francisco, CA 94103<br>

<abbr title=”Phone“>P:</abbr> （123） 456-7890

</address>

<a href=”mailto:#“>first.last@example.com</a>

</address>

排列顺序无关紧要的一列元素

<ul>

</ul>

顺序至关重要的一组元素

<ol>

</ol>

2.4响应式工具

为了方便更高性能的开展在移动设备网页页面开发工作上，可以用媒体查询功能，让这些工具类的功能准确无误的针对不同设备去隐藏或者展示网页页面的内容。为了充分考虑，其中包含对打印机显示或隐藏内容的工具类。拥有了这些针对性的使用这类工具类，可以避免因为同一个网站创建完全不同的版本。反之，通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类可以通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

打印类和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

测试用例可以在移动设备或者其他设备中调试浏览器的大小，当打开页面，在大屏幕，中等屏幕和大屏幕，小屏幕和大屏幕，超小屏幕和大屏幕上浏览器视口（viewport）中是可见的。在大屏幕上，medium和large，小屏幕和大屏幕，超小屏幕和大屏幕浏览器视口（viewport）中是隐藏的，如图2-2所示。

第三章　　PHP和HTML5

3.1 PHP基本概念

HypertextPreprocessor缩写为PHP，php是一中内嵌在HTML的脚本语言。PHP本身不一样的语法包含了c,java和perl及PHP式的最新语法。它的用处就是让网页设计开发程序员能比现在更加快的写出网页。模式pattern，是用来解决某一种或者某一类问题的方法。框架framework，它是某些应用的半成品，也可以说是一组组件，让设计师自主的去选择自己想完成的系统。指的是使用别人搭好的舞台进行表演。框架基本都是成型的，它在不断的升级。PHP模板来自Perl的Template，模板这种东西能体现出非常方便快捷的把网站的结构改善，能很快的改变使用者的整个站点的外形；抽象程序的设计，无垃圾HTML代码；设计编写人员不用关心全部的”模糊“代码；，它运行的速度非常的快。

有一种保存到外部的一个引用资源，它是通过专门的函数用来建立的一种特殊变量。类是包含类本身的方法、名称、属性与事件，同样也是包含有关对象动作方式的信息和某个对象的定义，其实它的本身不是对象，因为它不存在内存中。如果设计师引用类的代码运行的时候，类的一个新的例子，就是对象，在内存中创建了，只有一个类，但能从类在内存中知道创建的多少，得知有多少个相同类型的对象。函数作为一种潮流程序，它为设计人员提供了便捷，在进行一个复杂的程序设计时，它可以根据网页制作所需要完成的功能，把程序分为某些相对独立的部分，每一个部分编写一个函数，从而使各部分充分独立，任务简单，程序明了，能读懂还方便维护。有一种对象方法，它是把面向对象的思想应用于软件开发的过程的一种对象方法。指导开发活动系统的方法是搭建在”对象“概念基础上的方法学。

3.2 HTML5基本概念

Hyper Text Markup Language是HTML的英文名字全称，作为一种网页超文本标记语言，html是不能直接显示在浏览器中。标记语言通过浏览器的解释和编译，就可以正确地反映出HTML标记语言的内容。它在广域网上的领域是空前的，它就是网页内容和外观的标准语言。HTML是网页内容的一个载体，它用在网页和手机端的编程语言上较多。

<head>表示内容的最开始信息，一般包括标题和主题信息。head标签用在定义文档内容的顶部，它是所有顶部元素的容器。顶部元素有<title>、<script>、<style>、<link>、<meta>等标签，在head部分的内容是不能直接在网页中显示出来的。<title>作为网页标题内容，每个网页都是会有一个独一无二的title，<meta>是定义页面信息的说明或者关键字等。<meta>标签没有结束标记，因为在尖括号内就是meta内容。在html页面中有很多meta元素。meta元素的属性中有name和http-equiv两者，其中name用于描述网页多一些，它便于搜索引擎查找、分类。在<meta name=”keywords“ content=”输入具体的关键字“>这段代码中，name为属性名称，keywords是属性，也是设置网页的关键字属性，在content中则定义具体的关键字。在<meta name=”description“ content=”设置页面说明“>这段代码中，name为属性名称，description是属性，它将元信息属性设置为页面说明，在content中定义具体的描述语言。定义编辑工具：<meta name=”generator“ content=”编辑设计的名称“>。设置作者信息：<meta name=”author“ content=”设计者的姓名“>。设置网页的语言和文字：<meta http-equiv=”content-type“ content=”text/html“; charset=”字符集类型“>。http-equiv用于传送http通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型。

<body>表示文档的主体区域，网页的主体部分包括要在浏览器显示处理的所有信息和在网页的主体标记中有很多的属性设置，还有网页的背景设置、文字属性设置和链接设置等。在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签。设置网页背景色：<body blue=”背景颜色“> 。设置网页背景图片：<body background=”图片的地址“> 。background属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。图片的地址可以是相对地址，也可以是绝对地址。设置文字的颜色：<body text=”文字的颜色“>。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。text值可以是一个已命名的颜色，也可以是一个十六进制的颜色值，如”blue“或者”#FF99FF“。设置修改链接文字的颜色：<body link=”颜色“>。在默认情况下，浏览器以蓝色作为超链接文字的颜色。link属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起，表明它对网页中所有未单独设置的元素起作用。<body link=”颜色“ alink=”颜色“>使用alink可以设置正在访问的文字颜色，单击链接的文字时，文字已经改变了颜色。<body link=”颜色“ alink=”颜色“ vlink=”颜色“>使用vlink可以设置访问后的链接文字的颜色，单击链接的文字后，文字变成vlink设置的颜色值。设置边距值：<body topmargin=”100“ leftmargin=”100“>。margin用于设置边距值，默认情况下，边距的值以像素为单位。topmargin和leftmargin分别设置上边距和左边距。

3.3 PHP和HTML5区别

PHP以服务端开发为主，H5是前端开发。服务端主要与服务器（CPU、内存、磁盘、网络）和数据库打交道，性能是重点。服务端一般不直接与用户打交道，而是与更接近用户的应用及前端交换数据。前端主要与人打交道，重点是开发出用户体验良好的应用和网站。打个比方，如果说服务端开发像农业和重工业，那前端就是服务业和轻工业。再比如服务端是农民种粮食蔬菜，关注的是水肥、阳光、温度，最终是追求每季产量高低。前端是厨师、面点师，关注的是味道、色彩、外观，最终是追求好吃又好看。服务端隐藏在背后不为人知，前端应用直接服务于人，人人皆知。服务端与前端有重叠，服务端开发不只是PHP一家，JavaWeb、。NET、Node.js等也占有一定比例。服务端开发比前端开发更有技术水平，最终的薪资水平也远远高于前端开发。

这里，顺便要科普一下，行内所说的H5不只是HTML、CSS，而是以JS为主的前端和Web App开发最新技术的统称。一个很鲜活的例子，以qq空间为例（大家都很熟悉），大家想要发表篇日志，首先要在后台页面上进行图文编辑，而PHP就是这份日志的收纳箱，它里边有很多编写好的代码（这就是PHP开发师做的工作），而当我们点击发布时，这份代码就在拼命运行，最终刚写好的日志就呈现在首页里了，也就是H5编辑好的页面上。H5只会做好qq空间的页面框架，比如日志、图片、动态等固定的大框架，而PHP则负责你需要更改的数据，如上传图片，更新日志、动态等这些动作

第四章　　网页自适应布局与实现

4.1 自适应轮番图的原理和实现

当屏幕宽度大于等于768px时，图片使用大图，轮播图里的div高度固定，宽度为窗口的宽度（随窗口宽度的变化而变化），当屏幕宽度小于768px（手机）时，将图片换为小图，并在div里生成img标签，img的宽高随窗口变化而变化，包裹img的div也随之变化，html代码如下：

<ol>

</ol>

</div>

<span>Previous</span>

</a>

</a>

</section> CSS代码如下：

#main_ad .carousel-inner .item{

background-size: cover; /*让图片全部显示出来div*/

background-position: center,center; /*让图片在div里水平垂直居中*/

background-repeat: no-repeat;

height: 410px;

}

@media （max-width:768px） {

#main_ad .carousel-inner .item {

height: auto;

}

#main_ad .carousel-inner .item img{

width: 100%;

}}

js代码如下：

$（function（） {

/**

* 根据屏幕宽度的变化决定轮播图片应该展示什么 5 */

function resize（） {

// 获取屏幕宽度

var windowWidth = $（window）。width（）；

// 判断屏幕是大还是小

var isSmallScreen = windowWidth < 768;

// 根据大小为界面上的每一张轮播图设置背景

$（‘#main_ad > .carousel-inner > .item’）。each（function（i, item） {

var $item = $（item）；

// var imgSrc = $item.data（isSmallScreen ? 'image-xs' : 'image-lg‘）；

var imgSrc =

isSmallScreen ? $item.data（'image-xs’） : $item.data（‘image-lg’）；

// 设置背景图片

$item.css（‘backgroundImage', 'url（”' + imgSrc + ’“）‘）；

// 因为我们需要小图时尺寸等比例变化，所以小图时我们使用img方式

if （isSmallScreen） {

$item.html（'<img src=”' + imgSrc + ’“ alt=”“ />‘）；

} else {

$item.empty（）；

}

}）；

}

// // 让window对象立即触发一下resize，初始化div的背景图

// $（window）。trigger（'resize’）；

$（window）。on（‘resize', resize）。trigger（'resize’）；

}）；

4.2 栅格式布局实现

Container：顾名思义container是栅格系统最外层的class，直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值，这样container与浏览器窗口之间就存在一定距离，也可以给一个div设置两个col- class，用来适应不同的屏幕。值得一提的是，row的前后是负的15px margin值，用处是row的 div 被约束在 container内边界区域重叠不超过它。一定不能在container外用row，因为这样是无效的。col在不同屏幕下行为不同，列（col）现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，所以现在col的padding值与container的padding重叠，永远不要在row外使用col,在row外使用col是无效的。row：row指container的一行，每行理想状态包含12个col，这些col在不同屏幕大小时行为不同。

4.3 移动端响应式布局

REM的定义：rem是相对于根元素<html>来设置字体大小的，简单来说就是只需要在根元素确定一个值，这个值作为参考，然后在根元素中设置什么大小的字体，这完全可以根据使用者的需求。像素PX是一种单位，但不容易编写响应式布局，EM：以父节点font-size大小为参考点，标准不统一。在使用REM中html里默认的 font-size:16px; 也就是 1rem = 16px，以设计宽度为750px为例，那么定义 font-size:50px; 那么 1rem = 50px，比例为：750/50=15。屏幕宽度为750px，则html设置的font-size为：750/15 = 50，设计稿中dom（20px）的尺寸为：20px/50=0.4rem，1rem = 50px，屏幕宽度为320px，则html设置的font-size为：320/15 = 21.33，设计稿中dom（20px）的尺寸依然为：20px/50=0.4rem，1rem = 320/750*50px。CSS固定样式：以下代码包含了移动端设备绝大多数屏幕尺寸。

html{font-size:50px;}

body{font-size:24px;}

@media screen and （min-width:320px）{

html{font-size:21.333333333333332px;}

body{font-size:12px;}

}

@media screen and （min-width:360px）{

html{font-size:24px;}

body{font-size:12px;}

}

@media screen and （min-width:375px）{

html{font-size:25px;}

body{font-size:12px;}

}

@media screen and （min-width:384px）{

html{font-size:25.6px;}

body{font-size:14px;}

}

@media screen and （min-width:400px）{

html{font-size:26.666666666666668px;}

body{font-size:14px;}

}

@media screen and （min-width:414px）{

html{font-size:27.6px;}

body{font-size:14px;}

}

@media screen and （min-width:424px）{

html{font-size:28.266666666666667px;}

body{font-size:14px;}

}

@media screen and （min-width:480px）{

html{font-size:32px;}

body{font-size:15.36px;}

}

@media screen and （min-width:540px）{

html{font-size:36px;}

body{font-size:17.28px;}

}

@media screen and （min-width:720px）{

html{font-size:48px;}

body{font-size:23.04px;}

}

@media screen and （min-width:750px）{

html{font-size:50px;}

body{font-size:24px;}

}

第五章　　研究方向和展望

5.1 移动互联APP开发

PHP不适合开发客户端，因为PHP是服务端脚本语言，负责 B/S或C/S 架构的S部分，即：Server端的开发。API（Application Programming Interface，应用程序接口）架构，已经成为目前互联网产品开发中常见的软件架构模式，并且诞生很多专门API服务的公司，如：聚合数据。一般的PHP框架都可以用来做app后台服务器。因为原理上客户端从你这边拿的都是字符串数据，所以就算你不用框架也没有问题，不过会引发后续的问题。PHP提供API给客户端就好了，API描述方式有很多种：REST、SOAP等等均可。因为PHP是脚本语言，主要用于服务端的开发，是负责完成 B/S架构或 C/S架构的S部分，但是PHP可不仅仅只能在互联网站上发展，一个PHP for Android（PFA）站点表示他们将可以发布编程模型、工具盒文档让PHP在Android上实现应用。利用PHP框架语言开发手机APP和WEB开发一样，首先需要一些相关的参数，这些参数，都会由客户端传过来，也许是 GET 也许是 POST，这个需要开发团队相互之间约定好，或者制定统一规范。其次有了参数，根据应用需求，完成数据处理，例如：任务进度更新、APP内购、一局游戏结束数据提交等等。再次数据逻辑处理完之后，返回客户端所需要用到的相关数据，例如：任务状态、内购结果、玩家信息等等。例如数据怎么返给客户端？直接输出的形式，如：JSON、XML、TEXT 等等。然后客户端获取到你返回的数据后，在客户端本地和用户进行交互。

php不能编写 app应用程序，主要用于B/S结构（Browser/Server，浏览器/服务器模式）开发使用。但是php可以作为服务器与app应用交换数据服务端API.

学习APP现在流行的有三种手机平台，android、IOS，windows。他们都各有各自的编程语言，具体可以在百度搜索下各自平台制作学习。移动后台都是 PHP、Python，Java都重，更别说C++了。用协议http ,tcp/ip。nodejs 可以把路由，form表单验证写成c++的模块，主要是提供接口给移动端APP调用，可以从成本、服务器资源的占用、开发效率、运行效率，后台复杂逻辑处理的能力等。利用PHP框架开发手机APP需要考虑两种可能：一个是如果需要即时通讯，也就是需要手机客户端与服务端保持TCP长连接，服务端需要向客户端推送数据的时候可以随时通过这个长连接发送数据给客户端，这样便能做到客户端与服务端及时通讯甚至客户端与客户端及时通讯。做到这需要PHP能维持很多客户端连接，并且需要多进程支持，支持自己的通讯协议。这样的应用传统的nginx+php-fpm + 传统的php框架是做不到的。如果是长连接即时通讯类的服务器框架推荐一看下workerman，它是就是一个php的socket服务器框架，非常适合做手机后台服务器框架。另一个是如果不需要即时通讯的话，可以考虑直接走http协议，用nginx+php-fpm搭建一个webserver就好了，php框架可以采用thinkphp、yii等等，客户端需要与服务器通讯的时候向服务端get/post一个请求就好。如果是比较简单的手机APP，例如新闻客户端这样的不会涉及到长连接的服务，那么可以考虑直接使用http协议。因为该协议几乎被所有可以上网的设备支持，手机客户端那边也有大量相关的库可以调用，省掉不少麻烦，其实确定了这三个：协议（HTTP）、数据表示方法（JSON）、请求数据的方法（REST）之后，基本上就可以开发一个简单地服务端接口了（业务逻辑得自己琢磨），再加上手机客户端那边配套的设置搭起来，那么就可以了。

5.2目前Wex5、phonegap的应用对APP开发的冲击

目前面临着技术方案选型，框架选择wex5还是phoneGap哪个更好，两者区别是wex5：源于国内自主研发起步公司的软件，主要进行app，微信端的开发，目前而言针对android和ios的比较多，是基于HTML5、CSS3的开发，是通过图形化界面调用组件设计UI，后台用requireJS来进行代码编写，适用范围中等水平，是一款快速开发工具。而phoneGap:源于国外Adobe公司，主要进行移动端开发，目前针对苹果的iOS，谷歌的Android，RIM的Blackberry，惠普的WebOS，微软的Windows Phone，塞班公司的Symbian以及三星的bada等，基于HTML5，CSS3和JavaScript的开发，适用范围较广，是一款快速开发平台。前者wex5：知名度不高，主要因为是国人自己研发的，很多东西不太到位，bug相对较多，书籍几乎没有，除了官网的视频及Pdf文档外，几乎没有其他书籍。而phoneGap:有书，有视频，通过搜索即可找到相关资料。但在开发过程中有限制，如果是为BlackBerry、webOS、Windows Phone 7、Symbian或Bada设备做开发，则有些功能就不支持（例如，在Windows Phone 7上，就不支持摄像头、罗盘或存储功能。老版的BlackBerry型号支持地理定位、通知以及网络的可达性）。后者相对比较实用，适合用户量大的。

5.3跨平台网站、系统应用

跨平台泛指程序语言、软件或硬件设备可以在多种作业系统或不同硬件架构的电脑上运作。广义而言，一般的计算语言都可做到跨平台，开发商只需要提供各种平台下的Runtime/中间件环境即可。严格而言是指用某种计算机语言编制的程序只需要做小量的修改，编译之后即可在另外一种平台下运行，此时并不提供Runtime/中间件环境。例如Java是一种提供Runtime环境的跨平台解决方案，而C是一种标准且严格的跨平台语言。

php开发的程序可以不经修改运行在，windows.linux,unix等多个操作系统上，

补充：举例说windows系统的软件不可以在linux上运行，linux系统的软件不可以在windows上运行。但是php的解释器有多个操作系统的多个版本，多的偶都叫不出来名字，凡是有解释器的操作系统你写的php程序就可以运行，不论你是在windows还是linux下写的。目前市面上主流的跨平台应用程序和UI开发框架：QT是诺基亚的开源跨平台开发工具。主要用于嵌入式开发，MeeGo平板和MeeGo手机开发。MicroGUI是国人自行研发的跨WinCE、Windows Mobile、MTK、QT、Symbian、iPhone、Android、Brew MP等多款平台的UI开发框架。该产品正在产品研发阶段。预计年底前会上市。MiniGUI也是一款国产的GUI系统，主要用于低端嵌入式领域开发。移动领域的开发，目前面临不同操作系统需不同开发语言，同一操作系统存在不同版本，同一版本存在不同机型等难题，给移动开发增加了很大难度。

在移动开发领域，跨平台开发技术成为很多企业和开发者的首选，可以有效解决不同操作系统不同机型终端的开发难题，为企业节省时间成本和人员成本。目前国内外知名的跨平台开发技术有：PhoneGap（美国）、Titanium（美国）、SenCha（美国）、AppCan（中国）。AppCan是国内首个基于HTML5技术的跨平台移动应用开发平台，实现一次开发、多平台适配，支持iOS、Android、Symbian、Windows Phone四大智能平台，可以有效降低开发门槛，减少开发周期。爱码哥作为第三代移动中间件采用（xml和JavaScript）的开发方式并内置了开发框架，可以实现用Javascript、Java、。Net、php或htlm5当中的任何一套开发语言写一套代码就可以生成Android和iOS的两个系统的原生app可以有效降低开发门槛，减少开发周期。

电脑访问：基于PHP技术的多客户端自适应网站的设计与实现