请选择 进入手机版 | 继续访问电脑版

跨平台开发论坛

 找回密码
 立即注册

QQ登录

互通

PhoneGap和Cordova在iOS 7上的表现,Cordova 3.1即将发布

2013-9-21 14:29| 发布者: admin| 查看: 18732| 评论: 6

苹果开放下载ios7了, 我想给大家分享下在 iOS 7上运行和编译 PhoneGap / Cordova应用的感受。.

运行之前的应用

升级后的第一件事情是运行手机上已经安装的PhoneGap 应用. 表现良好(除了ui美化的小问题,下面将介绍到).

编译及部署

构建和部署新的应用程序非常简单,下面是步骤:
  1. 安装 Xcode 5: 更新程序已经上架App Store.
  2. 在编译应用之前启动Xcode 5 确保 Xcode下载了必须组建 . 在你使用命令行工具编译PhoneGap 或者 Cordova项目之前, 需要接受 Xcode 5 的许可协议.
  3. 编译 PhoneGap 应用如下命令:
    phonegap build ios
    
  4. 打开项目( platforms/ios目录下.xcodeproj ) , 部署到设备运行.

状态栏问题

在 iOS7, 所有的应用都是全屏运行的,此时状态栏层叠在应用界面上. 导致头部的内容或者界面被覆盖:

ios71


社区中讨论解决该问题的方法. 他们中的一些涉及原生代码,以兼容web视图. 我认为最简单和干净的解决方案是增加一个20像素顶部边缘到文档的 body加入 CSS. 你可以通过版本检查避免添加 margin 属性在 iOS 6. 代码如下:

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}
 
document.addEventListener('deviceready', onDeviceReady, false);



修复结果:

ios72

Cordova 3.1

Cordova 3.1 即将发布添加了 iOS 7的支持:

  • 升级启动画面 以更好的支持状态栏
  • 更新媒体与媒体捕捉插件来处理新的麦克风访问权限
  • 一个bug修复键盘首选项
7

鲜花

握手
1

雷人
1

路过

鸡蛋

刚表态过的朋友 (9 人)

发表评论

最新评论

引用 chen1026241686 2014-7-25 16:41
我觉得你的方法不好,那样的话只要启动一个页面就得写上那个代码,我的是直接把苹果的title去掉了,一劳永逸
引用 pythoner 2014-6-20 15:54
正解:

http://stackoverflow.com/questions/18775874/ios-7-status-bar-overlaps-the-view

http://stackoverflow.com/questions/18886195/ios-7-status-bar-overlapping-ui
引用 pythoner 2014-6-20 15:40
我加了这句document.body.style.marginTop = "20px";
为什么状态栏还是层叠在应用界面上?
引用 leibf2099 2014-4-13 09:41
不错,表现很好
引用 luo_text 2013-10-10 16:06
这么快就出3.1了???求路径楼主
引用 arthurcsh 2013-9-24 11:10
phonegap3.1什么时候发布?

查看全部评论(6)

验证码 换一个

相关分类



合作QQ:977809718|Archiver|手机版|cordova中国-PhoneGap提供开发工具

GMT+8, 2018-1-19 17:25 , Processed in 0.010886 second(s), 14 queries .

PhoneGap中文社区

© 2009-2012 PhoneGapCN.

回顶部