【Web APP开发】阅读资料总结

内容整理自网络,不足之处欢迎指出

Webapp:是一个针对Iphone、Android优化后的web站点,它使用的技术无非就是HTML或HTML5、CSS3、Javas cript,服务端技术JAVA、PHP、ASP。针对高端智能手机(如Iphone、Android)做站点适配,并非是针对普通手机开发Wap 2.0

从APP到WAP版,在产品上,最明显且核心的:
1、精简功能,只将核心的任务实现,非核心的枝节可考虑删减。
2、做好新的WebAPP导航.
3、补充从WebAPP 对 下载原生APP 的引导。

技术注意点:
1、各手机浏览器的兼容测试
2、底层服务的调取(能调取,但只有当其是核心功能时才保留 eg:新浪、美团等皆去掉了头像上传功能)
3、注意离线数据存储,减少数据请求频率。
4、考虑保存用户的哪些数据:设置、个人数据、阅读锚点、跳出页面等。
5、避免动效与浏览器的交互冲突
6、按顺序 异步加载  eg: 腾讯视频

优点:
1、开发成本较低。使用web开发技术就可以轻松的完成web app的开发。
2、升级较简单。升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉。
3、维护比较轻松。和一般的web一样,维护比较简单,它其实就是一个站点。

技巧:
1、去除iOS和Android中的输入URL的控件条:setTimeout(scrollTo,0,0,0); 这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
2、关闭iOS中键盘自动大写:移动版本webkit 为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”关闭iOS中键盘自动大写。
3、iOS中如何彻底禁止用户在新窗口打开页面:可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这 个技 巧仅适用iOS对于Android平台则无效。
4、iOS中如何禁止用户保存图片、复制图片:为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片。
5、iOS中如何禁止用户选中文字:指定文字标签的-webkit-user-select属性为none。
6、iOS中如何获取滚动条的值:通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
7、解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式:95009.00元

http://www.kgc.cn/?tuin=7133

交流:477706497

验证:管

移动端开发技巧总结上次有提过 这里不做赘述
路漫漫其修远兮,吾将上下而求索

时间: 2024-07-30 09:04:34

【Web APP开发】阅读资料总结的相关文章

前端读者 | Web App开发入门

本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Native App的争论已有一段时间,而Hybrid混合App则受到推荐,随着时间的推移,我们相信Web App也会有一定的市场,那么它到底有什么奥秘呢?让我们来看看. Web App与Native App有何区别呢? NativeApp 开发成本非常大.一般使用的开发语言为JAVA.C++.Objecti

web app开发——使用jQuery Mobile创建餐厅订餐应用

从零开始创建移动Web应用需要编程者学习专门的移动编程知识技能,还要有比如专门的编码工具(比如专门为iOS系统开发应用的工具),再有就是需要在每一个平台都进行测试部署(如Andr??oid,iOS,BlackBerry,Windows Mobile等). 这样的话,开发移动应用将花费不少,而另一个解决方案是再使用HTML,CSS,Javascript,它们的特点是跨平台和跨设备.此外,目前已 经出现了不少专为移动web应用开发的专门框架,比如jQuery Mobile.jQuery Mobile

Native App开发 与Web App开发(原生与web开发优缺点)

Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素.数据内容.逻辑框架均安装在手机终端上. Web App开发 Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份

web app 开发必不可少的滑动插件 Flipsnap

flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android,win phone7 ie9+)外还兼容 PC 版的谷歌和Safari等. 演示地址:http://pxgrid.github.io/js-flipsnap/demo.html web app 开发必不可少的滑动插件 Flipsnap,布布扣,bubuko.com

web app开发技巧总结

Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta http-equiv="Cache-Control" content="no-siteapp" /> 相关链接:SiteApp 转码声明 2.添加到主屏后的标题(IOS) <meta name="apple-mobile-

移动web app开发必备 - 异步队列 Deferred

背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeout/setInterval CSS3 Transition/Animation HTML5 Web Database postMessage Web Workers Web Sockets and more… 后面几个是CSS3 HML5加入的新API.这些接口都是会产生异步的操作 比如本人的一个

WEB APP 开发标签

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览: 第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式: 第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码 <meta content=”width=device-width, initial-scale=1.0,

Web App开发入门

WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦.每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要用户手动更新,但是也需要有一个恶心的提示). 3.非常酷.因为native app可以调用IOS中的UI控件以UI方法,它可以实现WebApp无法实现的一些非常酷的交互效果. 4.Native app是被Apple认可的.Nati

web app开发技巧总结 (share)

(转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. WebApp与Native App有何区别