xcode下phoneGap搭建和html5学习

来源：互联网发布：行情软件哪个好编辑：程序博客网时间：2024/05/17 20:59

本文主要介绍如下在xcode中加入phoneGap并在该框架中运行html代码在iphone模拟器中呈现。

1,关于phonegap

百度文库中关于PhoneGap是这样定义的，它是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。

对开发者来说，可以用来在android和iphone开发环境中加入这样一个框架，来进行html5的学习和测试

我们可以在：http://phonegap.com/download/中下载到phonegap开发包，最新可下载到2.7.0安装包，本文中安装的老的1.0版本进行html5学习

PhoneGap目前的最新版本是2.7.0，目前还处于公测阶段。PhoneGap在多个主要的智能手机设备上提供了以下功能的支持：

加速计
摄像头
罗盘
通讯录
文档
地理定位
媒体
网络
通知(警告、声音和振动)
存储

PhoneGap目前的优势是可以为iphone和android的设备做开发，以上功能都支持；PhoneGap缺陷是运行速度慢，UI反应延时；但对于已经从事iOS开发或android开发的人来说，学习下HTML5还是蛮方便的；

2,phoneGap下载安装（Xcode中）
（1）http://phonegap.com/download/ 中下载相应的版本
（2）安装phoneGap，若是老版本，直接安装dmg文档即可，最新版2.7.0需要自己摸索安装
（3）phoneGap学习开始的网站：https://github.com/phonegap/phonegap-start#readme

3,PhoneGap搭建项目
（1）在2安装完成后，在xcode的项目中有PhoneGap项目,点击next可以新建项目

（2）新建项目名为phoneGap_helloworld，之后用模拟器运行出现error

原因是我们只是运行了框架并未倒入进一个对应的html代码和一个对应的phoneGap的js代码
（3）加入文件www和对应的index.html和phoneGap.js代码

运行后若仍然出现如下错误，解决方法同步转载过来
ERROR: Start Page at 'www/index.html' was not found
用Xcode 6.1新建了一个PhoneGap的应用，www目录下存在index.html文件，但是运行的时候，报错：ERROR: Start Page at 'www/index.html' was not found，这是PhoneGap和Xcode 4还不兼容导致的。
可以右键项目名->Add Files to "项目名"，选择www目录，同时确保选中了Copy items into destination group's folder(if needed)和Create folder references for any added folders。

（4）加入后再次运行结果，可以得到适合iphone屏幕尺寸的一个简单网页，结果如下：


4,helloWorld下的HTML5学习
进入网页的代码在index.html中，可以在index.html中读取对应代码出来
（1）上图网页代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
// do your thing!
navigator.notification.alert("PhoneGap is working")
}
</script>
</head>
<body onload="onBodyLoad()">
   <h1>Hey, it's PhoneGap!</h1>
<p>Don't know how to get started? Check out <em><a href="http://github.com/phonegap/phonegap-start">PhoneGap Start</a></em>
</body>
</html>

（2）关于html5的基础学习内容可以阅读笔者bog资源中的《HTML5基础学习》pdf资源，也可以网上搜索《HTML5入门到精通》，该pdf中介绍了html4.0.1和html5的区别，更多javaScript和CSS的内容需要额外学习。笔者在index.html中对照pdf资源相应内容修改代码，进行html测试；
（2.1）修改后的index.html文件
<!DOCTYPE html>
<html>
<head>

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

<metahttp-equiv="Content-type"content="text/html; charset=utf-8">
<scripttype="text/javascript" >
</script>

<scripttype="text/javascript"charset="utf-8"src="phonegap-1.0.0.js"></script>
<scripttype="text/javascript"charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
seehttp://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
{
// do your thing!
navigator.notification.alert("PhoneGap is working")
}
</script>
</head>

<bodyonload="onBodyLoad()"style="margin:0px;">

<h1>Hey, it's PhoneGap!</h1>
<h1>Hello world!</h1>
<p>Don't know how to get started? Check out<em><ahref="http://github.com/phonegap/phonegap-start">PhoneGap Start</a></em>
<formaction="/example/HTML5/demo_form.asp"method="get">
First name:<inputtype="telephone"name="user_search"placeholder="Search W3School"/><br/>
Last name:<inputtype="text"name="lname"/><br/>
E-mail:<inputtype="email"name="email"autocomplete="off"/><br/>
<inputtype="submit"value="确定"/>
</form>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dt>用来计算的仪器</dt>
<dt>显示器</dt>
<dt>以视觉方式显示信息的装置。。。</dt>
<dt>计算机1</dt>
<dt>用来计算的仪器1</dt>
<dt>显示器1</dt>
<dt>以视觉方式显示信息的装置1。。。</dt>
</dl>
</body>
</html>

（2.2）修改后的index.html文件显示结果如下：

5 结语

本文简要介绍了如何在xcode平台中加入PhoneGap进行html5网页的开发。对iPhone开发者来说，可以在xcode中引入该框架，进行html5网页的基本内容学习和了解，更多内容或高深技术需要更多尝试，需要学习javascript和css相关内容。

xcode下phoneGap搭建和html5学习

ERROR: Start Page at 'www/index.html' was not found