本文主要介绍如下在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目前的优势是可以为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代码
运行后若仍然出现如下错误,解决方法同步转载过来
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 οnlοad="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.1)修改后的index.html文件<!DOCTYPE html>
<html>
<head>
<!-- meta位于文档的头部,不包括任何内容 <meta>属性可提供页面的元信息,比如针对搜索引擎和更新频度的描述和关键字
<meta name=“keyword” content=“3g,3g手机,3gpp” >
<meta name=“description” content=“手机XX网,移动互联网平台” >
手机浏览器把页面放在一个虚拟的窗口“viewport”中,通常这个虚拟窗口viewport比屏幕宽,这样不用把每个网页挤到很小的窗口中,拥护可以通过平移或缩放来看网页不同内容,移动版的safari引入了viewport这个meta tag,让网页开发者来控制viewprot的大小和缩放
width = device-width设备宽度(单位是缩放为100%的CSS的像素)
height 和width相对应,指定高度
initial-scale初始缩放比例
maximun-scale允许用户缩放的最大比例
minimum-scale允许用户缩放的最小比例
user-scalable用户是否可以手动缩放
-->
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<!-- 文本内容 html 采用utf-8编码 -->
<meta http-equiv="Content-type"content="text/html; charset=utf-8">
<script type="text/javascript" >
</script>
<!-- script可包括脚本语句,也可通过“src”属性指向外部脚本文件
若使用“src”属性,那么script元素必须为空
-->
<scripttype="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);
}
/* 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>
<!-- onload事件会在页面或图像加载完成后立刻发生
该事件支持的标签包括 body frame frameset iframe img link script
-->
<body onload="onBodyLoad()"style="margin:0px;">
<!-- h1--h6其中h1定义最大的标题,h6定义最小的标题
p:标签定义段落
em:呈现为被强调的文本
a:标签定义超链接,用于从一个页面链接到另一个页面 a元素最重要的属性是href属性,它指定链接的目标
-->
<h1>Hey, it's PhoneGap!</h1>
<h1>Hello world!</h1>
<p>Don't know how to get started? Check out<em><a href="http://github.com/phonegap/phonegap-start">PhoneGap Start</a></em>
<form action="/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/>
<input type="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>
5 结语
本文简要介绍了如何在xcode平台中加入PhoneGap进行html5网页的开发。对iPhone开发者来说,可以在xcode中引入该框架,进行html5网页的基本内容学习和了解,更多内容或高深技术需要更多尝试,需要学习javascript和css相关内容。