html5框架 HTML5框架的搭建过程

转载

西洋无悔 2023-09-12 19:30:12

文章标签 html5框架 android Android phonegap 文章分类 HTML5 移动开发

HTML5 APP开发环境的框架搭建

橘子

HTML5 开发APP需要一个开发框架和编译环境，参阅了相关资料后选择开源的PhoneGap。PhoneGap是一个开源的开发框架，使用HTML5，CSS3和JavaScript来构建跨平台的的移动应用程序。

下面介绍PhoneGap环境的搭建，及第一个Web APP。

1、选择你使用的平台，PhoneGap支持6个平台的开发和编译：IOS，Android，WebOS(HP),BlackBerry,Symbian。

我比较熟悉Android的开发流程，所以选择Android作为搭建环境。

2、Eclipse 3.4+ 安装

Eclipse 3.4+下载地址：http://www.eclipse.org/downloads/

根据个人PC环境选择相应的版本，我的电脑是win7 x64，下载：Eclipse IDE for Java EE Developers x64

3、下载并安装Android SDK。最新版本：android-sdk_r20-windows。下载地址：http://developer.android.com/sdk/index.html

4、下载并安装ADT Plugin，最新版本是：ADT-20.0.0.zip。下载地址：http://developer.android.com/tools/sdk/eclipse-adt.html#installing

PS:Eclipse 搭建Android开发环境，大家Google一下应该很多。

5、下载最新版本的PhoneGap并解压，我们将使用其中的Android目录。下载地址：https://github.com/phonegap/phonegap/zipball/1.0.0

6、编写第一个HTML5 App

启动Eclipse，然后在菜单“File”下选择“New > Android Project”。

/libs
/assets/www

复制phonegap.js（从PhoneGap解压缩后的Android目录中，将解压缩后的带版本号的js文件名修改为phonegap.js）到/assets/www。
复制phonegap.jar（从PhoneGap解压缩后的Android目录中，将解压缩后的带版本号的jar文件名修改为phonegap.jar）到/libs。
复制xml整个目录（从PhoneGap解压缩后的Android目录中，包括一个plugins.xml）到/res。【v1.0 rc2以上】
对Eclipse的src文件夹中的主要Java文件进行少量调整：（如下图）

将class的继承由Activity改为DroidGap
将setContentView()替换为super.loadUrl(“file:///android_asset/www/index.html”);
添加import com.phonegap.*;
移除import android.app.Activity;

在这里你可能会遇到Eclipse找不到phonegap-1.0.0.jar的错误。在这种情况下，右键单击/libs文件夹找到Build Paths/ > Configure Build Paths。然后在Libraries标签页中添加phonegap-1.0.0.jar到项目中。如果Eclipse不是很稳定，你需要点击F5刷新一次项目。
右键单击AndroidManifest.xml并选择Open With > Text Editor。
将下面的权限设置拷贝到versionName之后（这个可以根据APP的具体情况而定）:

<supports-screens

android:largeScreens=”true”

android:normalScreens=”true”

android:smallScreens=”true”

android:resizeable=”true”

android:anyDensity=”true”

/>

<uses-permission android:name=”android.permission.CAMERA” />

<uses-permission android:name=”android.permission.VIBRATE” />

<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />

<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />

<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />

<uses-permission android:name=”android.permission.READ_PHONE_STATE” />

<uses-permission android:name=”android.permission.INTERNET” />

<uses-permission android:name=”android.permission.RECEIVE_SMS” />

<uses-permission android:name=”android.permission.RECORD_AUDIO” />

<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />

<uses-permission android:name=”android.permission.READ_CONTACTS” />

<uses-permission android:name=”android.permission.WRITE_CONTACTS” />

<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />

<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />

————————————————————————————————————————–

在AndroidManifest的activity标签中添加android:configChanges="orientation|keyboardHidden"。

7、Hello橘子博客

在 “/assets/www”目录中新建文件“index.html”，并粘贴如下代码：

<!DOCTYPE HTML>

<html>

<head>

<title>橘子博客</title>

<script type=”text/javascript” charset=”utf-8″ src=”phonegap.js”></script>

</head>

<body>

<h1>你好， 橘子博客。</h1>

</body>

</html>

8、部署到模拟器