如何用HTML5+PhoneGap写个Path项目

 最近Path这个应用很火爆，网上也出现了不少仿Path菜单的项目。即使在原生APP里边，Path的效果也是非常赞的。我突然想，Web APP是不是也能做出类似Path那样的效果呢？于是就有了OPath这个项目，它的客户端部分是完全用PhoneGap+HTML5开发的。
        坦白的讲，OPath比Path差得不是一点半点，但是比很多国产的原生应用体验要好，下边是演示视频。


       看完视频如果你对效果还满意的话，请接着往下看。我会和大家分享如何做一个这样的应用,包括整个前端（HTML5）和后端（PHP）。这个项目也是在MIT协议下完全开源的(同样包括前端和后端)，项目链接在文章最末尾。PS：我只在iPod Touch4的iOS5系统上进行了测试，其他平台可能存在兼容性问题，需要自行测试和修复。

框架选择      
        PhoneGap就不用说了，有了它才能打包。我们要选的里边的前端框架。虽然之前我已经做了一个基于Jquery Mobile的Tab类模板，但是很明显，Path并没有采用Tab方式的菜单。加上Path的控件都是自己的风格，所以自己渲染样式是逃不掉的，于是最后我选择了采用 Mobile-boilerplate  + iScroll4 来做这个项目。

<ignore_js_op>Screen-Shot-2011-12-30-at-2.56.36-PM-300x182.png

 

（Mobile-boilerplate）



        Mobile-boilerplate 是一个移动设备用的HTML5空白模板，它处理掉了非常多的兼容细节，比如viewport之类的。想了解详情的同学可以去看Mobile-boilerplate里边的注释，写得非常详细，还有相关issue的链接。

        下载Mobile-boilerplate将解压出来的目录作为我们项目的根目录。Mobile-boilerplate已经包含了js和css目录，其中js下的libs里边有JQuery。

<ignore_js_op>Screen-Shot-2011-12-30-at-2.55.03-PM-300x148.png

 

        我首先在Mobile-boilerplate的模板基础上做了下登录页面，完成后的效果是这样的：

 

<ignore_js_op>iOS_11123015020813-200x300.png

 

 

        这个界面很简单，直接用CSS来实现就可以了，遵守Mobile-boilerplate的结构，在css/style.css中部200行左右的位置开始写入自己的css。

<ignore_js_op>Screen-Shot-2011-12-30-at-3.04.42-PM-300x148.png

 



API接口的用户认证      

       接下来我们说说API方式用户认证的实现。在OPath项目中，我们采用用户名+密码换token，以后操作通过token鉴权的方式。因为这种方式实现起来很方便。做PHP的同学都知道，PHP的Session机制是通过PHP SESSION ID来标示用户的，一般情况下这个标示通过Cookie存储在浏览器中。 

       我们的思路就是，将这个SESSION ID直接作为token就好啦。于是我们实现了get_token接口：

<ignore_js_op>Screen-Shot-2011-12-30-at-3.19.15-PM-300x224.png

 

 

       最核心的逻辑就这几行token在生成后，通过json格式返回给客户端。

  1. session_start();
  3. $token = session_id(); // 将Session id作为token
  5. $_SESSION['token'] = $token; // 在Session中存储用户信息，供以后的操作认证使用。
  7. $_SESSION['uid'] = $user['id'];
  9. $_SESSION['name'] = $user['name'];
  11. $_SESSION['email'] = $user['email'];
  13. $_SESSION['level'] = $user['level'];
复制代码


客户端发送Ajax请求和解析参数      

        现在回到客户端这边来，当用户在登录页面填好账号后，我们需要将这些数据发送到服务器端，换取token。使用JQuery，这个很简单：

       我们用 jQuery.parseJSON 解析返回的JSON数据，然后在登录正确后，将账号和token保存到本地。这里的kset其实是我写的一个快捷函数，它只是简单封装了下HTML5的LocalStorage。

  1. function kset( key , value )
  3. {
  5. window.localStorage.setItem( key , value );
  7. }
  8. function kget( key )
  10. {
  12. return window.localStorage.getItem( key );
  14. }
  15. function kremove( key )
  17. {
  19. window.localStorage.removeItem( key );
  21. }
复制代码

         LocalStorage里边的数据是持久化的，在应用被关闭后依旧存在。顺便说下，在Chrome和Safari的调试工具里边，Resource的Tab里边可以直接看到当前应用的LocalStorage还有IndexedDB的数据，不用去找其他的工具来查看这些值。这在调试应用的时候非常方便。
         由于开发的应用是HTML5的，我首先会实现标准浏览器支持的部分，用Safari来进行调试;在最后才实现需要PhoneGap的部分，进行真机调试，这样可以节省很多调试时间。

<ignore_js_op>Screen-Shot-2011-12-30-at-3.27.08-PM-300x175.png

 


Path主页面         Path的主页面很帅，实现细节也很多，我挑重点说。先放一张做完后的效果：

<ignore_js_op>iOS_11123015334219-200x300.png

 


        整体的布局上，其实我们可以直接沿用iScroll4的Demo，顶栏固定，将原来的Footer换成那个加号按钮就可以了。加号按钮的实现网上有CSS版本的，但是在Android上会出现严重的毛边，所以我直接用图片代替了。（Android上CSS圆角毛边的问题非常烦人，从这个地方可以一眼认出是否是WebAPP；iOS上则非常干净。）考虑到iPod Touch（我主要用这个）的杯具性能，我只简单做了个位置移动效果，觉得细节不够的同学可以自己加旋转和弹簧效果，用JQuery很容易做。说实话我觉得原版Path的那个加号按钮展开后很难按准 T__T

        页面上方的Profile Picture部分放到iScroll的wrapper内，scroll最上方；下边的【加载更多】按钮，放到wrapper内，scroll最下方。均通过CSS指定固定高。

<ignore_js_op>Screen-Shot-2011-12-30-at-3.46.16-PM-300x103.png

 


         其他的布局细节可以查看path.html和style.css源文件。


Retina屏幕下的图片模糊问题

        在iScroll的基础上，我很快就完成了主页面的布局，但是当我放到头像和图片后，杯具发生了！在Android上看的时候很正常，但是在Touch上图片会变得非常模糊。按Mobile-boilerplate的viewport设定，整个页面宽度应该会变成 设备宽，对Touch来说就是320px。很快我就意识到这应该是Retina屏幕带来的问题，因为Retina屏将标准屏幕一个像素改用4个像素显示，所以图像和周围的矢量图对比起来就模糊了。而在Android上都采用一个像素显示，所以没有这个问题。
  
      Google了下，网上的解决方案是这样的：对于直接的图片应用，比如说：
  1. <img src=”image.png”/>
复制代码

        采用Retina屏幕的iOS设备会去找同目录下的 image@2x.png进行显示。对于通过CSS引用的图片，比如说：
  1. <div id=”avatar”></div>
复制代码
       则需要使用link标签按条件载入专用的CSS。
  1. <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
复制代码

         我测试了下，没有成功，更主要的还是觉得这个方案不爽，额外CSS什么的弱爆了。然后自己试出来了一个方案：

         因为模糊的原理已经很清楚了，那么只要朝这个方向去想就行。对于直接引用图片的情况，很容易想到解决方案：原本100*100的图片，我做成200*200，然后在img标签中指定高和宽为100*100。这样在Retina屏幕上可以按像素点进行显示，在其他屏幕的设备上，浏览器会自己先缩放后显示，测试效果很清晰。通过CSS引用的情况比较麻烦，我睡了一觉才想出来，如果div#avatar要显示100*100的背景，那么将它的高和宽指定为200*200，配上200*200的背景图片，最后，Zoom：0.5。

其他页面需要注意的地方
         其他页面基本上都是体力劳动了，Path Feed列表渲染时有两个需要注意的细节：一是我们用的模板本身是用<script>标签的，所以模板里边就不能再有这个标签了。在显示每条Feed时，需要显示对应的用户头像，这个头像当做背景显示的，由于不能用script标签，只好把url先放到标签里，渲染完后统一处理。
         二是当Feed里边有图片的时候，iScroll的高度会受影响。需要在图片加载完全后，再重新调用iScroll的refresh方法。在Feed中图片过多时，Feed页面会卡，这个问题可以通过串行载入图片资源的方式来解决，在当前这个版本里边，没有实现。
Thought页面这部分没有太多问题，采用了之前Tab模板的Div切换方式，从而逼近原生应用的切换速度。

<ignore_js_op>Screen-Shot-2011-12-30-at-4.22.39-PM-281x300.png

 


通过PhoneGap实现拍照和头像设置

        头像和拍照使用PhoneGap调用了本地设备，按PhoneGap的说明，加载PhoneGap的JS文件并在页面初始化时注册好事件。

<ignore_js_op>Screen-Shot-2011-12-30-at-4.41.41-PM-300x88.png



 

        在点击了拍照按钮或者头像按钮后，调用摄像头，并通过PhoneGap提供的的文件传输对象FileTransfer进行上传。FileTransfer可以模拟一个完全的HTTP请求，所以服务器端并不需要特殊出来，按带file标签的标准From请求处理即可。

<ignore_js_op>Screen-Shot-2011-12-30-at-4.47.25-PM-300x104.png

 


        需要额外处理的是，iOS拍摄的图片方向很可能不对。这是因为iOS本地的相册在显示图片时，根据拍摄时的方向自动做了调整。要在服务器端正确的显示图像，必须根据图片中的Exif信息调整方向。在将家里的小浪摆好Pose并通过各个方向的拍摄后，我写好了调整方向的函数。

<ignore_js_op>Screen-Shot-2011-12-30-at-4.58.07-PM-300x270.png

 


         所有的代码，我已经放到上，大家可以下载 http://code.google.com/p/o-path/ 。这些代码是MIT协议，可以随意商用。


开发以外
兼容性
         由于各个平台对CSS和HTML5 的支持差异很大，所以很难在全部平台做到完美，像之前提到过的，Android的CSS圆角毛边问题，Div切换时部分图层不定期隐藏的问题；另外PhoneGap还有各种BUG和问题，比如iOS应用从后台呼出时有短暂的白屏闪烁问题；比如OPath里边我使用了1.2版本，这个版本在iOS下拍照正常，但是在Android下呼叫不出摄像头，换成1.0版本就可以，这说明PhoneGap在平台兼容性上问题依然不少。
         个人感觉，在现阶段，一个PhoneGap应用要想做到完美的体验并在各个平台保持体验一致，难度非常大。不过如果能忍受一些小细节，或者能做好优雅降级的话，PhoneGap应用是能超过很多原生应用的。
代码安全性
          采用PhoneGap打包的应用，不管是APK还是IPA，只要将扩展名改为zip，解压后在www目录就可以得到这个应用的全部源代码。

<ignore_js_op>Screen-Shot-2011-12-30-at-5.12.07-PM-300x152.png

 

          这使得盗版成本非常的低，必要的时候需要对js进行混淆。最可靠的方式是将部分核心逻辑放到云端，通过api使用。

转载自：http://ftqq.com/2011/12/30/how-t ... html5-and-phonegap/
posted @ 2014-03-20 11:28  huidaoli  阅读(314)  评论(0)  编辑  收藏  举报