移动Web开发调研

背景

在移动互联网浪潮下，移动设备普及，对配置须要考虑移动端设备可访问性。Web做为最贴近用户的配置手段，面向从PC端传统页面，向移动端页面的转型。

 

概念

PC Web： 面向传统PC电脑的浏览器开发的Web人机交互界面。

移动Web：面向移动设备的浏览器开发的Web人机交互界面。移动设备包括：手机、Pad等移动设备。

移动APP：面向移动设备开发的APP软件，直接运行于移动设备的系统上。不一样于移动Web，其不须要借助中间软件运行。

Web APP: 以浏览器为入口，实现 App 的 Web 化，当浏览器能良好的发挥HTML5的技术特性，将会带来应用体验新的变革。和移动Web属于一个概念。

http://www.geekpark.net/topics/157633

咱们有必要了解移动Web和移动APP各自的特色，才能弄清移动Web的定位。

移动APP

优势：

一、 移动APP具备更好的用户体验和交互操做。

二、 能够充分发挥设备硬件操做系统的特性。

缺点：

一、 开发周期长，维护成本高，调试困难。

二、 平台间移植困难，存在版本兼容性风险。

移动Web

优势：

 一、 开发效率高，成本低。

 二、 跨平台，一次开发，处处运行。

 三、 无需安装和更新。

 缺点：

 一、 没法发挥本地硬件和操做系统的特性。

 二、 难以实现复杂的用户界面效果。

从对比中能够发现，移动Web不能发挥设备硬件的功能，其适合传统的Web站点创建移动Web版本。

 技术调研

HTML5

HTML5 是 HTML 标准的最新演进版本。 这个术语表明了两个不一样的概念：

它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列能够被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术每每被称做 HTML5 和它的朋友们，一般简称为 HTML5。

 

功能分为如下大类：

• 语义：可以让你更恰当地描述你的内容是什么。
• 连通性：可以让你和服务器之间经过创新的新技术方法进行通讯。
• 离线 & 存储：可以让网页在客户端本地存储数据以及更高效地离线运行。
• 多媒体：使 video 和 audio 成为了在全部 Web 中的一等公民。
• 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
• 性能 & 集成：提供了很是显著的性能优化和更有效的计算机硬件使用。
• 设备访问 Device Access：可以处理各类输入和输出设备。
• 样式设计: 让做者们来创做更加复杂的主题吧！

每一个类中详细功能见下面URL，与CPE Web相关的功能包括（语义、绘图、样式设计）。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

HTML5名声如今很大，可是实际上就是增长了一些新的功能和特性。 可是架不住广告铺天盖地，别人总跟你提，可是真正懂了人不是不少，这样HTML5沦为了一个营销手段。即便咱们的设备只能用到不多一部分，可是若是用了，别人就会以为很高大上。

 

移动设备的大量使用，HTML5规范和Webkit内核的推进，使得HTML5和移动Web开发绑定在一块儿，HTML5确实能提升移动端的体验（例如音视频、定位、Canvas）， 可是实际上HTML5对象不区分PC和移动端。

 

目前主流的PC和移动端浏览器对HTML5功能有不一样程度的支持。

PC上几款主流浏览器跑分：

http://html5test.com/

 

 

移动浏览器支持状况，能够访问下面网站查询：

http://mobilehtml5.org/

 

响应式设计

响应式Web设计这种方案：一个网站可以兼容多种移动设备屏幕尺寸，而不是为每种屏幕尺寸作一个特定的版本。这个概念能够说是为移动互联网而生的。

http://www.cnblogs.com/powertoolsteam/archive/2012/06/01/2529886.html

 

优势：

一、 由于无需为不一样的设备维护不一样的网站，这种方式节省了时间和金钱。

二、 响应式设计无需考虑用户代理的检测。

 缺点：

一、 要考虑更多的分辨率，交互和场景，对设计师和PM的能力要求更高，页面考虑东西更多，设计时间也会变得更长。

二、 由于内容必须在客户端使用Javascript进行调整，因此要求变化的内容要尽量的最少。UI发挥空间更小。

 

适用场景：

那些以文档为中心的网站，他们在不一样的设备上的主要用途都不会改变，好比一个产品页面，对于这种网站响应式的设计就很是的适合。

 

不适用场景：

由于UI发挥空间小等因素，这种响应式设计不适合界面元素和交互等更加复杂的网页，好比淘宝。

 

参考：

https://developer.mozilla.org/zh-CN/docs/Web_Development/Mobile/Responsive_design

http://www.rbt.cn/html/xiangyingshi/37235.html

 

移动Web框架

移动Web开发，涉及的基本概念，能够稳步积累。 若是要作移动Web，下面介绍了一些网络推荐的开源框架，能够快速搭建移动Web界面。

 1、 jQuery Mobile

jQuery发布的针对手机和平板设备、通过触控优化的Web框架。它基于jQuery，在不一样移动设备平台上可提供统一的用户界面。该框架基于渐近加强技术，并利用HTML5和CSS3特性。

 二、 Sencha Touch

它是一款HTML5移动应用框架。经过它能够建立Web应用，在外观和感受上与Apple iOS 和Google Android本地应用十分相像。它利用HTML5发布音频/视频，进行本地存储；利用CSS3提供圆角、背景渐变、阴影等普遍使用的样式。

 三、 Ionic

  Ionic提供了一个免费且开源的移动优化HTML，CSS和JS组件库，来构建高交互性应用。基于Sass构建和AngularJS 优化。

 Ionic既是一个CSS框架也是一个Javascript UI库。许多组件须要Javascript才能产生神奇的效果，尽管一般组件不须要编码，经过框架扩展能够很容易地使用，好比咱们的AngularIonic扩展。

 四、 Amaze UI

 Amaze UI 采用业内先进的 Mobile first 理念，从小屏逐步扩展到大屏，最终实现全部屏幕适配，适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅度提高你的开发效率。Amaze UI 很是注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来作动画交互，平滑、高效，更适合移动设备，让你的 Web 应用能够高速载入。

 五、 Weex

2016年4月21日，阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex，Weex可以完美兼顾性能与动态性，让移动开发者经过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

 对于移动开发者来讲，Weex主要解决了频繁发版和多端研发两大痛点，同时解决了前端语言性能差和显示效果受限的问题。开发者可经过Weex官网申请内测。（http://alibaba.github.io/weex/）

 开发者只须要在本身的APP中嵌入Weex的SDK，就能够经过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS，能够像发布网页同样轻松部署在服务端，而后在APP中请求执行。

 与 现有的开源跨平台移动开放项目如Facebook的React Native和微软的Cordova相比，Weex更加轻量，体积小巧。由于基于web conponent标准，使得开发更加简洁标准，方便上手。Native组件和API均可以横向扩展，方便根据业务灵活定制。Weex渲染层具有优异的性 能表现，可以跨平台实现一致的布局效果和实现。对于前端开发来讲，Weex可以实现组件化开发、自动化数据绑定，并拥抱Web标准。

 

http://www.cnblogs.com/onetwo/p/5724919.html

http://www.envicloud.cn/pages/news/216.html

http://www.oschina.net/p/weex