PhoneGap的那些事

@陈宗绵

今天我们聊点什么?  

1.什么是PhoneGap

2.项目背景

3.系统架构

4.与PhoneGap一起走过的路

5.F & Q

什么是PhoneGap

   PhoneGap是一款开源的开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的手机应用程序。原本由Nitobi公司开发，现在由Adobe拥有。
      它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5及以上版本配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。

PhoneGap就是一个可以用过JS调用手机特性的浏览器.

项目背景

基于SNS体系的多应用接入平台
技术团队没有手机端开发经验,是WEB端屌丝开发团队
原生开发人员稀缺,工资待遇要求高

系统架构

监控服务

服务总线

用户服务

应用服务

订购服务

统一消息

应用融合

用户行为分析

通知
服务

计划
任务

全文
索引

分布式
文件系统

消息
队列

数据
仓库

第三方应用服务

与PhoneGap一起走过的路

版本迭代

2周的版本迭代
内置应用导致APP安装包很大
客户奇葩的网络环境
紧急的BUG修复更新

解决:

安装包不放置应用的代码,使用外部站点的形式

Js框架导致页面过大

换JS框架,将原来的JqueryMobile换成Zepto
使用Application Cache
离线数据(微信不支持SQLite,只能用localStorage)
GZIP压缩,CSS/JS请求合并,CSS,JS的压缩
效果: 优化前:300K 优化后:77K

解决:

页面过大,访问速度太慢

Application Cache

.appcache的Mime类型 text/cache-manifest
.appcache的HTTP头需要设置为不缓存.

Application Cache的加载判断

离线状态下,无法进入应用页面,停留在Loading页面

应用使用鉴权

访问应用需要先做一次OATH2鉴权
Oath2导致短暂的白屏页面

用户登录APP后进行鉴权,不在进入应用时鉴权
鉴权使用隐藏的WebView进行操作
不开发PhoneGap插件,通过WebView判断鉴权后地址来知道鉴权是否成功

解决:

浏览器渲染

页面渲染的问题: 如倒计时功能
CSS渲染性能较差

安卓: zoom  IOS:z-index
CSS使用单层样式,遵循BEM命名

解决:

F & Q