跨终端Web

1、终端vs设备

H5页面运行在同一设备的不同终端下。

(1)Web浏览器。

(2)微信、QQ浏览器。

(3)移动App的Webview。

(4)TV机顶盒。

 

2、跨终端的实现方式

(1)响应式

          存在内在的高耦合性,频繁更新维护成本高

(2)多站点

       m.example.com、hd.example.com、

       wap.example.com、 iphone.example.com、

       ipad.example.com

(3)多模板

       一个页面只有一个URL,无须服务器端繁杂的URL映射和终端检测等手段进行跳转。

(4)多平台

           NativeApp,性能高,系统功能丰富。

 总结:多种方式结合。

 

3、HTML5新特性

(1)语义(header、footer、nav)

(2)离线&存储(LocalStorage、IndexedDB、FileAPI)

(3)设备访问(定位、语音输入、传感器)

(4)网络连接(WebSocket、服务器信息推送)

(5)多媒体(video、audio)

(6)图形接口(canvas提供2D和3D的GDI,WebGL硬件加速)

(7)性能&整合(WebWorkers实现脚本后台运行)

(8)CSS3特性(Flex盒子模型、动画、投影、圆角、媒体查询、语音)

 

4、通用触屏事件

(1)拍击(Tap)

(2)滑动(Swipe)

(3)拖拽(Drag)

(3)捏(Pinch)

(4)旋转(Rotate)

(5)重力感应(Shake)

 

5、操作系统及浏览器分级

(1)操作系分统级

A级:IOS9.x、IOS8.x、IOS7.x 、Andriod4.4.x、 Andriod4.3.x、

           Android2.3.x

B级: IOS6.x、 Andriod4.1.x、 Andriod4.0.x

C级: IOS5.x、WindowsPhone

(2)浏览器分级

A级:APP客户端、微信、IOS&Andriod内置浏览器、UC浏览器、

      QQ浏览器

B级:Chrome、360浏览器、Opera、IE10、猎豹、遨游、

C级:Firefox、淘宝浏览器、NodeJS、TV机顶盒

 

6、IF接口流程复用架构

 

 

 

7、Hybrid APP

(1)优点

       跨平台、快速发布、高效开发、丰富的DeviceAPI

(2)缺点

          GPU/CPU密集类应用,比如游戏,性能不够高。可以通过

      “CSS Transform 3D”、Canvas硬件加速来缓解

       静态资源加载慢,可以通过Natite预加载进行拦截  

(3)框架

          PhoneGap(Web App框架)

          Titanium(JS原生 App框架)

          React Native(Facebook App框架)

 

8、前端MVC、NodeJS、Bootstrap

(1)BackboneJS

(2)AngularJS

(3)NodeJS

(4)Bootstrap

posted on 2015-11-24 14:08  [CC]  阅读(416)  评论(0编辑  收藏  举报

导航