ios开发HTML5

• 广场

• 登录
• 注册

关注此空间

博看文思-HTML5

关注HTML5跨平台开发技术-博看文思HTML5小组

2011-11-08 11:18

HTML5跨平台开发环境配置

HTML5的跨平台开发，让我不得不放弃windows系统，在两个多月前买了mac本，就目前的情况，使用html5做跨平台开发，需要使用ios的sdk。才能真正的一次开发，生成各个平台上的app。app与网页的概念是有区别的，有很多人把开发可以在不同平台浏览器上统一效果的html文件叫做跨平台开发，是不合适的，那应该是浏览器兼容的范围。

有些人喜欢在windows下把phone gap配置在aandroid的sdk上，那就损失了iphone和ipad等苹果移动产品的大量客户了。如果不做iphone，根本谈不上跨平台了。在ios的sdk上配置的phone gap，也可以完美兼容android手机，所以，推荐想做html5跨平台开发的人还是放点血，买个苹果本吧，呵呵

这里我就先说下，做跨平台跨平台开发前的环境配置。

目前采用html5做跨平台开发的最大利器无疑是phone gap，(http://www.phonegap.com)，这里我就介绍下phone gap的开发环境安装和配置。

首先，需要有一台苹果电脑。phone gap需要有ios的sdk才能运行。

安装苹果上最出名的免费开发工具X-code。新的X-code版本是4.2，比起4.1来有较大的变化，我现在装的就是4.2，所以以后的文章和截图肯定都是z最新版本的风格的。

然后去phone gap的官网上去下一个iOS sdk的phone gap插件，是一个dmg格式的安装文件。（今天phone gap的网站打不开，大家可以试下，如果能打开，很容易找的）。下载的插件是个dmg安装文件，直接安装就可以。

安装完phone gap，在X-code里新建项目，就会看到已经有了phone gap项目的选项。

选择 PhoneGap-based Application,创建项目。我们可以看到的项目结构如下：

这时候要进行几步简单的操作，来创建我们项目的初始文件：按 command+B编译项目。编译过后，我们的项目文件夹里就会多了一个名称为www 的文件夹。通过右键点击项目图标，Show in Finder选项找到这个文件夹。

 

把这个www文件夹拖到项目下，就可以了。

 

这个www里面的index.html 是不是让大家想到了wamp的www文件夹？这里的index.html就是我们运行项目时首先要执行的文件，别且可以针对不同的平台生成app文件了。我们做一个简单的弹出hello world。就是html5+js了，就不多说了。

 

 用虚拟机运行下，效果就出来了。使用iphone android真机测试，都没有问题，效果截图如下：

 

 

#object c 专区

浏览(2348) 评论 转载

评论

 发布 

帮助中心 | 空间客服 | 投诉中心 | 空间协议

©2012 Baidu

内容很精彩，关注此空间？

zili8631

性别：男年龄：3岁

现居：北京海淀区

粉丝：362关注：418

关注暂不