如何快速把web迁移到phonegap还能保证不差的体验？

这篇文章主要面向 没有学习过phonegap却想快速开发ios、android hybrid应用的略懂web开发的童鞋（就像我这样...），都是实践经验，理论分析较少、较片面。

只讲跟web有关的，涉及到android、ios部分的由于能力所限不讲也罢，在开发过程中建议与搞android、ios的配合开发。

先简单地说下phonegap 的工作原理：

iPhone和Android平台都有内置的WebView组件（实质是内置浏览器）。所以你平时用h5技术在开发的能在浏览器上运行的网页，在webview里也能运行。

不过webview相对浏览器更特殊一些（毕竟是亲生的~_~），他可以访问系统自带的API，从而调用诸如摄像头之类的接口，当然，还可以调用一些外部接口，如友盟。

而phonegap就是针对webview做了扩展和封装。

更具体的感兴趣可以去百度搜，不过对于专门做web的你来说，这些了解基本够了(因为我就凭着这点了解和搞android的配合开发出了phonegap版...，不过的确不够精致，但也是一种临时解决方案，毕竟在不影响正常用户体验的情况下，先上线让用户有东西可用才是王道)。

在了解了工作原理之后，可以开始配置环境了，此处省略1W字，请直接进phonegap官网查询。

好了上面都不是重点，重点是如何让你的web程序在phonegap下也有不差的体验。

这里有必要先阐述一下我所说的“不差的用户体验”是什么。我认为移动端最基本的用户体验是速度和稳定，满足了这2点，就算不差了，所以以下主要针对这两点展开。

1.静态资源放到本地

比如css、js、字体、图片之类的资源，放在相应的文件目录下即可。这样就不需要去服务器加载，速度会大大提升。

除此之外， 所有的html页面都应该放在本地，相比从服务器请求页面，这样 可以大大提升页面间的切换速度。其余动态数据部分全部用ajax请求渲染。

2.localStorage最重要的动态数据

这里定义一下“最重要的动态数据”：你web中用户查看频率最高的数据，这种数据如果你不能在用户进来之后立即渲染出来的话，会让用户觉得不爽。拿微查分来说，首页的成绩数据就是我们希望立即看到的，而考试列表、考证考试查询页面就不是高频的页面，不需要做本地存储，但不会对用户体验造成多大的影响，也节约了你的时间。

具体的localStorage方式是：先渲染、再对比、再渲染，意思就是先把本地的数据拿出来渲染，然后发送一个ajax请求，接到数据后拿来和本地的数据做对比，如果不一样则渲染拿到的数据，否则不渲染。如果你的web有这种业务逻辑:当用户在B页面做了某种操作后，回到A页面，整个页面的渲染会发生很大变化，有一点需要特别注意的是，在发ajax请求的事后，让页面呈现出加载状态（比如说页面中间放一个正在加载中），而不是让用户没有任何察觉，否则那种无预兆的突然的页面变化会大大降低用户体验。

3.加速点击事件

暂时没做，待补充。推荐阅读 fastclick

4.解决页面切换闪屏

暂时没做，待补充。

敬请大伙指教。