WebApp-介绍
适合前端工作者的iPhone Web App开发
适合前端工作者的iPhone Web App开发iPhone有着丰富的软件资源，到目前为止，仅在appStore上架的软件就达十多万个，而相比之下，有着10年历史的WM系统却不过只有大约2万个应用程序。
随着ipad和iphone 4的发布，iphone/ipad的app应用开发将再次掀起热潮。
下面给大家介绍下iPhone App开发的两种途径及有优缺点，以及其中适合前端人员的iPhone webApp的一些开发工具，最后以无线UED Blog为例子看看iPhone webApp的开发过程。
一.什么是iPhone Web App?目前有两种方式让你开发iphone上的应用：编写Objective-C 及iPhone SDK 直接运行在iphone上的原生应用程序在基于WebKit 的Safari上利用HTML5, CSS3及Javascript编写你所需要的WebApp网络应用程序而Apple的官方网站上，除了有iPhone/iPad SDK开发的详细资料外，你也可以像SDK应用程序提交到App Store一样，把你的Web App提交到Apple的Web Apps Site。
当然，两种开发模式，SDK应该是首选的开发方式，毕竟SDK才是apple上的原生程序，而Web App是基于Safari，由于本地文件操作等安全问题在功能上会存在较大的限制。
但是Web App也并不是没有优势，它的开发更简洁更快捷，它不需要像后者那样向Apple 注册申请使用SDK及提交Apple Store 审核才能上架发布；也不需要重新去学习Objective-C的编程语言，另外iPhone 4对CSS3支持的完善也将加快WebApp在iPhone上的应用。
至于iPhone Web App与普通的Web应用在开发上有什么区别？恩，对于Web 工程师来说，最明显的一条就是你不需要去关心你的项目跨浏览器的兼容性，因为你面对的只有iPhone的Safari浏览器。
什么是webApp？与原生APP的区别
什么是webApp？与原⽣APP的区别
1、webApp指：
使⽤html5开发的移动web应⽤，是基于浏览器运⾏的,⼏乎可以不加修改的运⾏在PC/Android/IOS等
优势：⼀套代码多处运⾏
劣势：某些底层功能缺失，运⾏速度不如原⽣App
2、原⽣App指：
iOS: Object-C 或者 swift
Android: java
Windows Mobile：Visual C++
3、webApp与原⽣APP的区别
（1）地位不同：
web是⼀种技术，⽽webapp是根据这⼀技术开发成的应⽤，web是源头，webapp是⽀流
（2）功能不同
WebApp跨平台开发，不需要去卖场来下载安装App，任何时候都可以发布App，不需要官⽅卖场的审核。
原⽣App以独⽴的应⽤程序运⾏(并不需要浏览器)，⽤户必须⼿动下载并安装，需要卖场审核发布
（3）版本控制的区别
WebApp所有的⽤户都是⽤同样的版本。
原⽣app⽤户可以⾃由地选择是否更新软件版本，所以会出现不同⽤户同时使⽤不同版本的情况。
AndroidWebApp简介
AndroidWebApp简介Web Apps Overview译者署名： happyjiahan审核：铁骑_PuLee版本：Android 3.2 r1在android上发布一个应用程序一般有两种方式：一种是基于客户端模式(Client-Side模式)的应用程序（基于客户端的应用程序需要用Android SDK来开发，并且需要在用户的设备上安装一个以.apk为后缀名的文件），另一种是基于浏览器的web应用程序（基于浏览器的应用程序的开发需要遵循web标准，通过一个web浏览器来访问你开发的应用程序，不需要在用户的设备上安装其他任何程序）。
图1. 你可以通过两种方式向用户提供你的web内容：一种是通过传统的浏览器的方式，另一种则是通过在Android的应用程序的布局文件中包含一个WebView组件的方式来实现。
那么在你的软件开发过程中，你究竟是应该选择基于客户端的模式（C/S）还是基于浏览器的模式（B/S）呢？其实这个问题要考虑很多个因素，要视你所开发的软件来确定选择哪种模式更合适。
这不是我们当前讨论的重点，下面我们来看一下Android为我们提供了哪些方便我们进行web程序开发的支持吧！l 支持一系列视窗属性，这些属性允许你根据屏幕的大小正确的确定你的web程序的窗口大小。
l 支持css和javascript特性，这些特性能使你可以根据屏幕的像素密度来使用不同的样式和图片资源。
因此，在你决定为android开发一个web应用的时候，可以先不考虑支持多种屏幕方面的问题。
因为让你的web页面在各种android 设备的屏幕上有很好的效果已经很容易了。
Android提供的另外一个很好的特性就是你现在不必纯粹的在客户端或者纯粹的在web上构建你的应用，你可以将这两者融合在一起。
你可以开发一个基于客户端的android应用，但是在这个应用中嵌入了一些web页面（你可以在你的android应用中使用WebView）。
什么是webApp
什么是webApp一. 原生App和WebApp的比较1.原生(Native)App指：2.iOS: Object-C 或者 swift3.Android: java4.webApp指5.使用HTML5编写的移动Web应用，一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
6.7.优势：一套代码到处运行8.劣势：某些底层功能缺失，运行速度不如原生的App二. 使用eclipse创建安卓应用并安装到手机1. 前提1）保证“我的电脑”中可以看到我的手机2）在安卓系统-》设置-》开发者选项-》启用USB调试2. Android开发环境的搭建1）下载并安装java程序的运行环境-JDK保证在命令行中输入java可以运行显示java版本2）下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)3) 启动ADT: eclipse/eclipse.exe4) 创建Android应用程序(创建应用时选择API19)，选择自定义图标，定制窗口中的内容，安装到手机3. Android应用何设置一个全屏显示的窗口修改项目清单文件 AndroidManifest.xml<applicationandroid:theme="@android:style/Theme.NoTitleBar.FullScreen">三. 把HTML5应用打包到Android手机中，创建一个HyBridApp,1. 混合app,像原生app一样有图标,点开后呈现一个原生app的窗口(成为activity)；此窗口中只有一个组件-一个浏览器内核(没有地址栏),可以限定此浏览器内核只显示特定的网页2. 创建webView组件-用于显示网页内容(即浏览器的核心)//创建浏览器核心对象WebView wv = new WebView(this);//窗体中体检webview组件this.setContentView(wv);注意：只留一个oncreate方法，其他都删掉3. 使用webView加载APK文件中打包好的本地网页//出于安全考虑，webview默认禁用了js,必须要启用wv.getSettings().setJavaScriptEnabled(true);//加载本地的html文件wv.loadUrl("file:///android_asset/hybrid.html");所有的HTML/css/js都必须保存Android项目的assets目录下4. 使用webview加载web服务器上的网页//获取到网络使用权限<uses-permissionandroid:name="android.permission.INTERNET"/>wv.loadUrl("http:");5. 解决自动跳转到手机浏览器问题首先引入WebViewClient框架wv.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return super.shouldOverrideUrlLoading(view, url);}});四. 框架整理1. jQuery是一个js函数库，简化了DOM操作，本质与DOM相同2. jQueryUI是一个HTML组件库，丰富了HTML功能3. BootStrap是一个HTML/CSS/JS框架，简化了响应式网页的编写，提供了CSSReset+HTML组件4. Google AngularJS是一个JS框架，改变了网页的编写方式，适用于以数据操作为主的SPA应用5. jQueryMobile是一个HTML组件库，适用于App的开发五. jQueryMobile1. jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.2. JQM主要分为四部分：页面&导航CSS框架组件表单控件3 使用JQM的步骤1）项目中引入jquery1.8+版本2) 项目创建jqm目录，引入jqm必需资源文件jquery-mobile.cssjquery-mobile.jsimages/...3) 创建html文件，引入必需的css和js,并设置viewport<meta name="viewport" content="width=device-width,initial-scale=1>4) body中data-role="page"元素注意： jqm的html文件中，body中必须至少有一个page，若用户未提供，jqm自动添加body中可以声明多个page,但默认只有第一个可以显示jqm中的所有的网页内容不能直接至于body中，必须至于page 中jqm中的所有样式都是通过预定义class来设置的，开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能。
webapp1
webapp1⼀、HyBrid App概述HyBrid App与Web App以及Native App的区别① Web App开发WebApp开发，严格来说并不是⼀个APP软件，只是⼀个Web型的微⽹站。
优点：开发时间短、兼容性强、⽅便系统移植。
缺点：必须有⽹络的⽀持，⽤户体验度相对较差,不能调⽤⼿机中例如摄像头,⼆维码扫描仪的模块。
在国内主要应⽤在:微信的公众号开发层⾯② Native App开发Native App开发，就是⼀个原⽣的APP软件，其主要是通过Java或Object-C来实现原⽣的⼿机APP软件。
优点：原⽣APP、⽤户体验度⾮常好、可以调⽤⼿机的底层组件。
缺点：开发时间长、兼容性差、必须要掌握Java或Object-C等编程语⾔。
③ Hybrid App开发介于WebApp、Native这两者之间的APP，开发时间短、成本低，⽤户体验度好，可以调⽤⼿机的底层组件，⽅便移植，是⽬前以及未来APP开发的流程趋势,为app应⽤⽽⽣,不为app的底层⽽⽣。
这种开发的缺点:⽆法调⽤系统的底层,例如:控制系统的内存.所以如果你开发⼀款游戏那么这种开发模式是⽆法帮你实现的.⼆、HyBrid App开发前期准备1、注册APICloud平台2、注册完毕后登录，进⼊开发控制台3.创建应⽤(粉椒⼴场)创建完后,其实apiCloud官⽅会默认给我们⼀些学习的⽰例代码,我们需要⽤svn把代码进⾏获取4.使⽤svn获取粉椒⼴场舞的app⽰例代码第1步:点击代码导航条进⼊代码获取模块第2步:分别svn的地址,账号和密码第3步:找1个app的开发⽬录,然后检出⽰例代码如果第⼀次检出需要输⼊⽤户名和密码,输⼊过后,以后都可以省略这个步骤5.使⽤apiCloud的官⽅云编译编译粉椒⼴场舞的app⽰例代码⽣成apk安装软件第1步:选择编译的平台为android第2步:编译完成后,就会出现⼆维码下载扫描和点击浏览下载链接6.海马玩模拟器的地址安装海马玩只需下⼀步下⼀步就可以完成安装,打开海马玩模拟器,点击点击apk安装选择我们要安装的⽰例app,选择打开就可以完成app的安装如果希望知道以上的效果是如何实现的,我们就需要分析和学习⽰例代码,然后才能实现我们⾃⼰的⾃定义开发三、配置开发⼯具与模拟器1、Sublime text32、绑定APICloud插件选择下载Windows版本，下载后，如下图所⽰：解压插件包，如下图所⽰：3、配置Sublime Text3第1步:选择sublime的插件安装⽬录，如下所⽰:第2步：把apicloud的插件复制的sublime text3的插件⽬录当中第3步：选择app的实例代码⽬录作为app项⽬第4步：检查插件是否可以被apiCloud的插件进⾏使⽤四．分析⼴场舞核⼼(从index.html⼊⼿)1.meta的分析这是开发app必须设置的meta标签，该标签⽤于定义html的响应式布局模式，如果这个meta标签没有编写这app的ui界⾯⽆法实现响应式布局关闭⼿机的⾃动识别功能，关闭⾃动识别电话号码(telephone),email,⽇期(date),地址识别(address),把他们全部设置为on,原因是有⼀些android⼿机（例如:三星和oppo）会认为如果你没有关闭⾃动识别的功能属于侵犯⽤户的⼿机隐私，因此⽆法在这些⼿机通过安装流程，但是如果只针对⼩⽶⼿机进⾏开发那么可以直接把这些识别设置yes2.必须引导css⽂件和js⽂件因为apiCloud的开发者是通过js来控制编译，在编译的过程中apiCloud官⽅会加载元素进去所以必须引导api.css的⽂件和api.js的⽂件,必须引⼊，否则⽆法通过编译3.index.html的html结构4.index.html的js代码详解①apiready代码如下:由于app的开发跟⽹页的开发是不⼀样的，因为app是在⼿机中运⾏，⽽⽹页是在浏览器中运⾏，因此⼿机的初始化不能使⽤window.load(),apicloud为了⽅便开发者做⼿机的初始化，所以他们建议做⼿机的初始化把初始化代码放在apiread的事件当中完成，所以apiread就相当于⽹页中windown.load②$api对象apiCloud官⽅要求引⼊api.js默认的情况下会有⼀个全局的对象叫$api对象，这个对象控制着app开发html所有的元素，如果要获取某⼀个元素作为对象可以使⽤以下的⽅法:byId⽅法就相当于document.getElementById，但是由于我们开发app⽤apicloud所以不建议使⽤document.getElementById⽽建议使⽤$api.byId③让app实现沉浸效果沉浸效果必须在ios7的版本或者android4.4以上的版本才能实现这段代码会⾃动判断是否可以让app的头部实现沉浸，如果开启这代码就会⾃动兼容实现，如果没有开启，那么所有app都不会实现沉浸效果④app的通⽤开发架构模型app的模型架构原理图:使⽤$api.offset()获取头部对象的位置，其中h表⽰当前位置⾼度，w表⽰当前位置的宽度获取了frame（头部）的⾼度，然后定义式尾部的⾼度为30px于是通过api的窗体⾼度（winHeight）减去头部的⾼度和尾部的⾼度得到主体的⾼度获取完成主体的⾼度后，使⽤openFrame打开主体的页⾯放在<div id=main>的元素当中openFrame中的参数name是代表打开的frame的名称，url是frame页⾯的位置，bounces表⽰是否可以启动弹动功能（如果设为true代表可以弹动，如果设为flase代表不可以弹动）rect⽤于控制main的位置，⼀般不做修改动态获取年份然后通过innerHTML把年分放到<span id=year>元素当中5.html/main.html⽂件的详解假设现在我们在html/main.html中修改Hello App的⽂字为粉椒⼴场舞app那么，app的页⾯（frame main）是否会发⽣改变呢?app开发的特点在于，⽹页是实时更新，⽽app必须更新⼀次就编译⼀次，那么如果我们希望在开发的时候，开到修改的效果，那么我们就需要使⽤apiCloud官⽅appLoader软件实现真机同步的测试功能。
新的开发模式——webapp（1）
新的开发模式——webapp（1）很久没有写过⽇记了，最近快要开学了，项⽬也基本完成了，就没有什么事⼉，坐在电脑前⾯没事⼉做，就把暑假做的项⽬来做⼀个回顾，这个项⽬采⽤了HTML5来做开发，同时外部使⽤了原⽣的APP的壳，我也就暂且将其称为WEBAPP。
我们的项⽬中主要应⽤于IOS和android系统，所以就做了安卓和苹果上的封装。
之前了解过，有⼀个开源的打包框架——Phone Gape（好像是这么写的吧？错了也别怪我啊！），但是后来想想，使⽤别⼈的框架还不如⾃⼰来写⼀个，随便也复习⼀下⾃⼰的java知识。
在android下主要使⽤了webview这个控件，IOS下是使⽤的UIWebview。
这⾥就先介绍下android下的，明天继续更新IOS下的使⽤。
先直接上代码：（布局xml⽂件）<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><WebViewandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:id="@+id/webView"/></LinearLayout>这个会android开发的都能看懂的，这个是申明布局⼀个webview⽤来展⽰html页⾯。
接下来就是在java代码中使⽤这个控件来展⽰，上代码（部分）：webView = (WebView)this.findViewById(R.id.webView);//webview相关设置webView.getSettings().setJavaScriptEnabled(true);//设置可以使⽤javascriptwebView.getSettings().setUseWideViewPort(true);//⽀持⽤户⾃定义ViewwebView.getSettings().setDomStorageEnabled(true);//设置可以使⽤localStoragewebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);//默认使⽤缓存webView.getSettings().setAppCacheMaxSize(8*1024*1024);//缓存最多可以有8MwebView.getSettings().setAllowFileAccess(true);//可以读取⽂件缓存(manifest⽣效)webView.setBackgroundColor(0);webView.setBackgroundResource(R.drawable.bg_splash);webView.getSettings().setAppCacheEnabled(true);//应⽤可以有缓存webView.getSettings().setGeolocationEnabled(true);// webView.getSettings().setBuiltInZoomControls(true);//⽀持缩放webView.setInitialScale(35);//设置缩放⽐例webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);//设置滚动条隐藏//webView.setwebviewclient（）;//启⽤地理定位webView.getSettings().setGeolocationEnabled(true);webView.getSettings().setRenderPriority(RenderPriority.HIGH);//设置渲染优先级String dir = "/sdcard/temp";//设置定位的数据库路径webView.getSettings().setGeolocationDatabasePath(dir);这⾥是使⽤webview以及webview的相关设置，课根据实际情况进⾏设置。
长沙web-app开发公司的介绍：“Web-App是什么”-望眼云
长沙web app开发公司的介绍：“Web App是什么”在科技的高速发展时代里，人们对于很多智能科技的东西了解还不够深入，特别是现在最热潮的“Web App”，所以为了更多的人了解web app和更容易接触web app开发，作为长沙市最大的web app开发公司——望眼云，首先应该立体的给人们介绍一下“Web App”这个改变我们传统时代的东西吧！首先简单介绍“WebApp是什么”：基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。
总的来说，web app公司开发的“Web App”就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。
Web App的介绍：Web无需安装，对设备碎片化的适应能力优于App开发软件，它只需要通过XHTML、CSS 和JavaScript就可以在任意移动浏览器中执行。
随着iPhone带来的WebKit浏览体验升级，使得专为iPhone等有WebKit浏览内核的移动设备开发的Web应用，也有了如web App公司给用户体验的浏览顺畅。
一、Web App开发的优势：1、开发成本低；2、适配多种移动设备成本低；3、跨平台和终端；4、迭代更新容易；5、无需安装成本；二、Web App开发的劣势：1、浏览的体验短期内还无法超越原生应用；2、不支持离线模式（html5将会解决这个问题）；3、消息推送不够及时；4、调用本地文件系统的能力弱；以上就是长沙web app公司望眼云对于“web app”的解释了，无论是web app开发的优势还是劣势，web app公司都将会转化为人们所喜爱的web app应用软件，让web app公司能够帮助人们在生活上和工作上的需要。
最后总结，web app公司开发web app是未来的发展趋势，在纵多行业中，很多行业的经营发展模式已经渐渐消失，在新时代的行业代替旧时代的行业中，web app开发是大势所趋，这个新的应用软件的出现，令很多人和web app开发公司都深受其益，其中当然有首批进入web app开发时代的长沙web app开发公司望眼云啦。
从零开始学写WebAppPPT课件
演示
Web App 基本功—HTML(4)
<input type="text" required />
<input type="email" value="someemail" />
<input type="date" min="2019-08-14" max="2019-08-18" value="2019-08-18"/>
Web App 基本功—HTML(1)
• Web App的显示层次结构靠div和table标签
– div确立大体布局 – table在局部细节和自适应上非常理想
• Web App的图形靠img和canvas标签
– 不规则图形用img – 规则或者简单图形用canvas生成
• 除了这20多个标签，其他几乎从来不用
• 字符串
+, length, substring, indexOf, parseInt, toLowerCase
• 数组 []
[], push, pop, slice, splice, contact, join, split
• 对象 {}
obj.a, obj['a'], obj[a]
• 类型判断
函数传递 • (function(a){
a(); })(myfun)
这个函数运行后自动消失
把函数myfun当参数传递 并立即运行
Web App 基本功—JavaScript(4)
obj = { a: alert,
alert(‘good luck html5’)
聊聊WebAPP
聊聊WebAPPWebApp 是一个既陌生又熟悉的概念，你或许并不知道它具体指的什么，但它其实已经深刻的影响着我们。
WebApp 是一个组合词，Web即互联的网页，App即应用程序，叫App时髦值更高一点。
在开聊WebApp之前，我们先说一个相关也相对的概念，即Native App，中文意思为本地的应用程序，我们用的Office、记事本、Photoshop、ACDsee等等都是本地程序，这些程序的编写语言是C、C++、Pascal等等，从电脑问世到如今，这类程序一直是绝对的主流。
再说WebApp，因为本地程序的强势，App有些特征往往被误解，什么是WebApp？先举一个最常见的例子，我们使用Outlook Express或者Foxmail、Thunderbird接收邮件，这是使用了本地程序，如果登录到邮件网站，通过在线方式收取邮件，其实就是在使用WebApp，网站本身就是WebApp。
你经常会参与到一些调查，你会选取一个选项后提交，然后会看到一个统计，这个页面也属于WebApp，更广泛的说，WebApp可以是一个网站甚至是一个页面。
这样就比较好理解WebApp了，新浪微博是WebApp、搜狐邮箱也是WebApp，WebQQ同样是WebApp，新浪微博有个应用广场，那儿的也都是WebApp，Google的Doc、日历同样也是WebApp，微软最新的Office也有Web版本。
WebApp的好处是可以随时调整界面，只需将修改后的代码上传到服务器即可，用户可以在不受干扰的情况下改善体验。
跨平台是业界一直追求的大一统境界，而WebApp是真正意义上的跨平台，不管是Windows、iOS、Android、Linux，配合标准化的IE、Safari、Chrome、Firefox，它都能实现大致统一的界面，基本上做到一劳永逸，这个特性更让开发者觉得爽歪歪。
HTML5 标志这得归功于超文本[Hypertext]标记语言，什么是超文本，请随便查看一个网页的源码，这就是超文本，构建网页的语言叫做HTML，它是HyperText Markup Language的缩写，它派生和发展出了XHTML1.1、HTML 4.0等版本。
充分了解Web应用程序
充分了解Web应用程序在当今的数字时代，Web应用程序的使用已经成为日常生活中不可或缺的一部分。
我们几乎每天都在使用各种Web应用程序来完成工作、学习、娱乐等各种任务。
然而，许多人对Web应用程序的构建和运作过程知之甚少。
本文将介绍Web应用程序的基本知识，帮助您充分了解Web应用程序的本质、结构和工作原理。
一、Web应用程序的定义Web应用程序是一种基于网络的应用程序，通过浏览器以及与服务器进行数据交互的方式为用户提供各种服务和功能。
与传统的桌面应用程序相比，Web应用程序的最大优势是可以在任何地点、任何时间使用，只需一个可连接互联网的设备即可访问。
二、Web应用程序的组成一个典型的Web应用程序主要由以下几个组件构成：1. 前端技术：负责构建用户界面和提供交互功能。
HTML、CSS和JavaScript是前端开发最常用的语言和技术。
2. 后端技术：负责处理服务器端的逻辑和数据。
常用的后端开发语言包括Python、Java、PHP等，用于与数据库进行交互、处理用户请求等。
3. 数据库：用于存储应用程序所需的数据。
常见的数据库有MySQL、Oracle等，用于存储用户信息、订单数据等。
4. 服务器：用于存储和运行Web应用程序的硬件设备。
服务器负责接收用户请求并返回相应的结果。
三、Web应用程序的工作原理当用户在浏览器中输入Web应用程序的地址并回车时，整个处理过程如下：1. 用户浏览器发送HTTP请求到Web应用程序所在的服务器。
2. 服务器接收到请求后，根据请求的路径和参数等信息，调用相应的后端逻辑进行处理。
3. 后端逻辑从数据库中读取所需的数据，并对数据进行处理和计算。
4. 处理完成后，后端逻辑将结果返回给服务器。
5. 服务器将处理结果打包成HTTP响应，并发送回用户浏览器。
6. 用户浏览器解析并渲染响应的HTML、CSS和JavaScript，呈现给用户最终的界面。
四、Web应用程序的开发流程开发一个Web应用程序通常需要经历以下几个步骤：1. 需求分析：明确用户需求，确定应用程序的功能和特性。
如何设计和实现一个webapp
如何设计和实现⼀个webappweb app简介web app其实不算是什么新鲜的东西，相⽐于传统的web和传统的app，web app这种web和app相结合的产物有的优点如下：1. 开发上web app更有便捷性，ios开发⼀上来需要安装⼀堆东西，android开发也差不多，另外web app的学习成本要⽐平台客户端开发要低些，⾄少你不⽤去招聘ios和android程序员。
只要具备基础web开发能⼒的⼈都可以⽐较快上⼿。
2. 部署⽅便，在很多情况下，部署⼀个单页web app只需要⼀个index.html页⾯⽂件作为容器和⼀个前端资源打包⽂件（⼀般叫bundle.js）即可，然后把index.html放在⾃⼰服务器项⽬路径下，在其中引⼊bundle.js，⾄于bundle.js则可以放在CDN上，更新web app就等于是上传并刷新CDN缓存。
这样⼀来前端部署极其简单，基本上不需要SSH到服务器去更换⽂件，也可以避免⾃⼰的服务器传输⽐较耗费带宽的前端资源⽂件。
3. 单页web app如果技术选型得当，开发和维护成本都相对⽐较低。
4. 可以适应更多环境。
凡事都有利弊，web app也有不尽如⼈意的地⽅，web app的主要缺点如下：1. 性能上不如原⽣app，这个不⽤多说，基本是不可改变的事实。
2. 暂时还没想到其他的。
前期准备⾸先要进⾏技术选型，根据作者的经历，我选择的是react+flux，flux是⼀种数据流的架构⽅式，严格来说它并不是某⼀种特定的实现。
⽐较常⽤的实现有facebook官⽅的flux实现，还有⼀些第三⽅实现(⽐如redux)。
要注意的是，flux的具体实现基本不会影响到我们的项⽬开发，具体选择哪个实现就看你的喜好了（当然最好不要中途再做改变:D）。
那么就要来简单介绍⼀下react是什么，react可以说是⼀个改变前端⽣态系统的发明，传统web开发中，我们以页⾯为单位来设计模块，如果有多个页⾯都⽤到了某个功能，⽐如⼀个列表，那么就要重复地写HTML和JS实现它，代码抽象程度很低，冗余度很⾼，也不利于后期维护。
Web应用程序介绍
Web应⽤程序介绍⼀、应⽤程序类型C/S类型应⽤程序：Client客户端/Server服务器客户端必须安装专门的⼀个桌⾯软件才能使⽤。
优点：速度快，安全性⾼，客户端⽐较强⼤缺点：每台客户端计算机都要下载安装升级，部署维护困难例如：QQ，各种⽹络游戏B/S类型应⽤程序：Browser浏览器/Server服务器客户端不⽤安装特定的软件，只要通过浏览器打开就可使⽤。
优点：维护容易，只需要维护服务器缺点：速度慢，安全性相对较低，客户端较弱例如：WebQQ，各⼤⽹站，各种⽹页游戏什么是Web应⽤程序？Web应⽤程序是⼀种可以通过Web访问的应⽤程序。
Web应⽤程序的⼀个最⼤好处就是⽤户很容易访问应⽤程序。
⽤户只要有浏览器即可，不需要再安装其他软件。
web应⽤程序举例：淘宝、天猫、新浪、搜狐web应⽤程序开发，是⽬前软件开发领域的三⼤⽅向之⼀。
静态⽹页和动态⽹页的区别？⼆、HTTP协议1、什么是协议？双⽅的⼀种约定！HTTP协议——HyperText 超⽂本 Transfer 传输 Protocol 协议 —— 普通话HTML——HyperText 超⽂本 Markup 标记 Language 语⾔ —— 汉字2、HTTP协议是基于”请求”和“响应”的。
请求——request响应——responseWEB服务器是“被动”的3、HTTP协议请求有两种⽅法：a)GET⽅式（飞机）特点：安全性不⾼（提交的数据会显⽰在地址栏上）、数据量⼩，速度快。
b)POST⽅式（⽕车）特点：安全性⾼、数据量⼤、速度慢4、浏览器中请求服务器有三种⽅法a)地址输⼊——>GET⽅式请求b)超链接——>GET⽅式请求c)表单提交——>GET或POST⽅式请求<form method=”GET|POST” ……注意：如果不写method属性，默认为GET⽅式。
5、HTTP协议相关状态码：200——>成功的处理了你的请求404——>你请求的资源服务器找不到5xx——>服务器出错了6、HTTP协议请求服务器的URL地址格式：http://主机IP地址或域名：端⼝号/资源路径名称http://192.168.2.2:90/HS/tea/login.jsp注意：HTTP协议的默认端⼝号是80，如果端⼝号为80，则不⽤写“：端⼝号”，否则要加上端⼝号。
web app
原生app：可以调用设备底层的功能，例如个人信息，摄像头以及重力加速器等等。
移动web app：只能使用有限的功能，不过目前越来越多的功能开放。
研发考虑
原生app：不同的操作系统需要独立开发；需要各自的软件开发包；开发工具入Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)。
移动web app：由于运行到浏览器上，只需要一个开发项目，属于跨平台的。
开发工具
入phonegaps。
优势和劣势
原生app比web app运行要快；
原生app比webapp调用设备的底层功能更方便
原生app更新需要上卖场，需要审核，不能即时更新，web app不需要审核，版本更新快，且所有用户统一更新；
原生app开发成本高，尤其设计到多款移动设备；webapp只需要开发一款产品。
该如何选择原生app和web app？
1.你的app是否需要设备的特殊功能，如摄像头等；
2.您的是app是否一定需要网络
3.你的预算是多少
4，对性能的要求。
我个人一般认为，对于交互较多的产品，在预算足够的请款下，原生app是最适合的。
本文为作者@eyudechibang 总结投稿发布，转载请注明来源于人人都是产品经理并附带本文链接
人人都是产品经理（）中国最大最活跃的产品经理学习、交流、分享平台。
Web应用程序简介
Web Application 部署描述符
在每一个Web应用程序路径的WEB-INF下存在一个web.xml配置 文件，用来设定Web应用程序的配置 通常包括如下类型的配置和部署信息: – ServletContext Init Parameters – Session Configuration – Servlet/JSP Definitions – Servlet/JSP Mappings – MIME Type Mappings – Welcome File list – Error Pages – Security For details to see Deployment Descriptor Diagram
web应用程序层次结构的顶级目录也即应用程序的document root（根文档），通常在该位置放置包含应用程序用户界面的 HTML文件和JSP页面。当系统管理员将应用程序部署到一个特 定的服务器上时，他将分配一个context path（上下文路径）给 应用程序。因此，如果系统管理员给应用程序分配的上下文路径 为 /catalog，则指向 /catalog/index.html 的URI请求将从根文档 下获取index.html文件。
Web应用程序例子
网上宠物商店的归档文件war 对应的目录结构
Web应用程序的元素
由如下元素构成:
–
–
– –
–
–
Servlets JSP 页面 帮助类 静态文档 (HTML, images, sounds, etc.) 客户端的Java applets, beans, and classes等 把上述元素组合起来的描述性的元信息
Web应用程序
是servlets, HTML页面, 类, 和其他资源等的集合
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web应用程序
• Web应用程序：也就是基于网页的应用程序， 用户无需安装任何专用程序，只用浏览器来访 问服务器，通过浏览网页就可以实现业务流程。 • Web应用的业务逻辑完全在应用服务器端实现， 客户端只需要浏览器即可进行业务处理。这种 结构已成为当今应用软件的首选体系结构。
URL
在因特网中，如果要从一台计算机访问网上 另一台计算机，就必须知道对方的网址。我们在 浏览器的地址栏里输入的网站地址叫做URL （ Uniform Resource Locator 即统一资源定位 符) ，也就是网址。简单的来说呢,URL就是一个 网页的网址, 是因特网上标准的资源的地址。就 像每家每户都有一个门牌地址一样，每个网页也 都有一个Internet 地址。当你在浏览器的地址框 中输入一个URL或是单击一个超级链接时，URL 就确定了要浏览的地址。
动态网页的鼻祖CGI
• 网关（Gateway）
Web服务器作为互联网应用开发的平台，它实质上是一个网关，即介于多种协议 之间的程序，如图所示。 – 在这里，一边是连接客户端的HTTP协议，另一边可能是连接数据库系统的 ODBC协议，也可能是POP3、 SMTP等其它Internet协议 – Web服务器一方面要能够将客户端采用HTTP协议提交的请求转换为其它协议 的表示形式，并提交相应的系统；同时，它还要将其它系统返回的处理结果转 换为HTML的形式表示，并使用HTTP协议返回给客户端。
WWW服务模型
• WWW本质上是一种客户机/服务器（C/S）技术， WWW体系结构提供了一个灵活且强有力的设计模型： 应用软件采用标准数据格式显示，并能通过它的 客户机――浏览器（Browser）进行浏览。
WWW服务模型
–浏览器是一个网络应用软件，它能向统一命名 的数据服务对象的网络服务器――WWW服务器 （或Web服务器）发送请求。 –而WWW服务器采用标准格式编码的响应来回复 请求。 –WWW服务模型有时也称为浏览器/服务器（B/S） 模型。 –常用的WWW服务器如Netscape Web Server、 Microsoft IIS等；常用的浏览器如Netscape Navigator、Microsoft IE。
URL的组成
例如： /china/index.htm。它的含义如下： 1.http://：代表超文本传输协议，通知服务器 显示Web页，通常不用输入； 2.www：代表一个Web(万维网)服务器； /：这是装有网页的服务器的域名，或站点服务 器的名称； 4.China/：为该服务器上的子目录，就好像我们的文件夹； 5.Index.htm：index.htm是文件夹中的一个HTML文件(网页)。
超文本传输协议（HTTP）
• HTTP中有三类请求－响应链
–第一类：客户机直接向服务器发送请求
• 客户机直接向服务器建立TCP连接，默认端口是80， 然后在这个连接上发送请求。服务器监听连接上的 请求，对于每一个请求服务器启动一个线程或进程 来对它进行服务。一旦请求处理完毕，服务器把响 应在这个连接上送回给原来的客户机。
请求 客户机 TCP端口80 服务器
响应
超文本传输协议（HTTP）
–第二类：通过代理服务器（Proxy Server）
• 用户向代理服务器建立连接并发送请求，代理服务 器再向WWW服务器发送请求，WWW服务器向代理服务 器回送响应，最后，代理向用户发回响应。
请求 客户机 响应 代理 服务器 请求
响应
WWW服务模型
• WWW服务器和浏览器之间通过超文本传输协 议HTTP（HyperText Transmission Protocol） 传递信息。 • 信息以超文本标记语言HTML（HyperText Markup Language）编写。浏览器把HTML信息 显示在用户屏幕上。 • 因此，构成WWW技术的基础有两个方面： HTTP和HTML。
静态网页
• 最开始的Web只是一个一个的站点（website），还不 能称作应用程序，它们由很多静态网页堆积而成，内 容更新只能通过修改网页本身来实现 • 静态网页是指没有后台数据库、不含程序、不可交互 和不会有任何改变的网页。静态网页的内容变化只能 通过重新编辑网页文件来实现。绝大部分静态网页是 以htm或html结尾的html文件编写的
Web应用系统开发
授课教师 吴涛
基本概念
1. WWW及相关概念 2. Internet地址及域名 3. HTTP 4.HTML 5. Web应用
万维网WWW
• 万维网WWW（World Wide Web或简称Web，也称 全球信息网）是九十年代初从欧洲粒子物理研 究中心（CERN）发展起来的一种Internet信息 浏览技术。 • WWW是一种功能强大、灵活、用户使用方便的 技术，同时它还支持多媒体信息，因而一出现 就受到极大欢迎，从而使其成为目前最为广泛 使用的Internet技术。
超文本传输协议（HTTP）
• 目前，HTTP的版本号为1.1版，在1.1版前， 发布了0.9版和1.0版。
• HTTP协议的无状态性
无状态是指浏览器和Web服务器之间不需要建立持久 的连接，这意味着当一个客户端向服务器端发出请求， 然后Web服务器返回响应(response)，连接就被关闭了， 在服务器端不保留连接的有关信息。 访问页面的流程： （1）连接到服务器； （2）告诉服务器希望访问的内容； （3）服务器返回访问者需要的内容； （4）和服务器断开连接，同时丢失所有的用户信
– 其基本思想是在表单的输入域内输入有关信息，然后按相应的按钮 （如“Submit”）； – Web服务器接受这些信息，把这些信息传递给指定的程序并启动这个程 序，这个程序称为Web服务端扩展程序
动态网页的鼻祖CGI
• 最早的Web服务端扩展程序是CGI程序 • CGI（Common gate intergace）通用网关接口的简称。它是一 段部署在服务器上的程序供同客户端的页面来调用的接口 • 通俗的讲CGI就像是一座桥把网页和Web服务器中的执行程序连 接起来，当用户在浏览器端填好表单（form）要求输入的资料， 提出HTTP请求后，Web服务器端将执行一个表单所设定的可执 行的CGI应用程序，CGI程序分析表单（form）中所输入的资料， 存取数据库，将查询执行的结果以HTML的格式返回给浏览器 • CGI可以实现处理表格，据库查询，送电子邮件等许多操作
超文本标记语言（HTML）
• HTML文件由一系列称为标记的元素组成，标记用<> 框定，大部分元素有起始标记和结束标记，部分标 记只有起始标记。 • 一个典型的HTML文件
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE> {此处是HTML文件的标题} …… </TITLE> </HEAD> <BODY> {此处是HTML文件的主题内容部分} …… </BODY> </HTML>
协议
通信双方所共同遵循的规则称为协议。是 关于信息传输顺序，信息格式和信息内容 等的约定。通协议（HTTP）
• HTTP是用于WWW客户机和服务器之间进行信 息传输的协议。
–一种请求响应类型的协议：客户机向服务器发 送请求，服务器对这个请求作出回答。 –在HTTP/0.9和 HTTP/1.0中，通常不同的请求 使用不同的连接，HTTP/1.1引入持续连接作为 默认的行为，这时客户机和服务器保持已经建 立的连接，多次交换请求响应信息，直到有一 方明确终止这个连接。 –即使有持续连接，HTTP仍然是无状态的协议， 服务器在不同的请求之间不保留任何信息。
协议
主机域名
路径名
文件名
ftp:///pub/Linux/README /news1/index.htm gopher://
第一部分是协议（或称为服务方式）；第二部分是存 有该资源的主机IP地址（有时也包括端口）；第三部分是 主机资源的具体地址。，如目录和文件名等。 第一部分和第二部分之间用“：//”符号隔开，第二部分 和第三部分用“/”符号隔开。第一部分和第二部分是不可缺 少的，第三部分有时可以省略。
WWW服务模型
• WWW协议定义了三类服务器：
–源数据服务器
• 用户访问的资源所在的服务器。
–代理服务器
• 这是一种中间程序，既是服务器又是客户机，它代 表其它客户向源数据服务器提出请求。
–网关
• 为其它服务器担当媒介的中间服务器。与代理服务 器不同的是，在接受请求时网关就相当于被请求资 源的源数据服务器，而客户可能意识不到是在和网 关进行通信。
静态网页
动态网页的鼻祖CGI
• 随着互联网的发展越来越多的应用程序也希望转移到Web上去， 真正的Web应用开始出现，可完成查询数据库、调用程序处理、 发送电子邮件等功能。必须要有动态网页才能满足用户的需求 • 为支持与服务器交互，在HTML中引入了表单（form）。表单是 实现交互式Internet最重要的手段。
动态网页的鼻祖CGI
• 为支持对Web服务器进行扩充，同时要尽可能地保证Web服务器的通用性， 一种较好的解决方法如图所示 • 此时Web服务器端由两个部分组成 • 第一个部分是一个HTTPd （HTTP demon） 程序，它完成Web服务器的基 本功能，包括和客户端建立连接、接收客户提交的HTTP消息、返回给客户 HTTP消息、断开连接等。我们平时所说的狭义上的Web Server就是指的这 个部分 • 第二个部分由程序员开发的各种应用程序组成，这些应用程序作为HTTPd 和其它外部系统之间的中介，完成服务器的扩展功能。我们平时所说的Web 应用程序就是指的这个部分。