Web APP开发阅读资料总结

Posted 2020-09-08

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

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

验证：管

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