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、部署到模拟器

右键单击项目节点选择Run As，然后点击Android Application。
Eclipse将要求你选择一个合适的AVD，如果没有设置的话，你需要创建一个AVD。

9、部署到设备

通过设置手机USB debugging选项，并已将设备连接到电脑。（设置 > 应用程序 > 开发)。或者直接安装到手机查看效果。

转载橘子博客：http://www.shixiaoyan.com/archives/114

HTML5 APP开发环境的框架搭建相关推荐

HTML5+app开发学习之快速入门篇
HTML5+app开发学习之快速入门篇 5+app开发概念理解相关开发环境与支持快速入门实战 5+app开发概念理解相关见博文:学习跨平台移动应用开发必须理解的一些概念开发环境与支持开发环境 ...
【快速开发App实战】BUI高仿网易新闻App系列一、搭建App开发环境和工作空间
一. 搭建App开发环境和工作空间前言我们的目标是要做一个真实的案例, 着重通过BUI框架及其相关工具的使用, 结合原生打包平台, 帮助大家理解一个App的开发过程. 以最新网易新闻的App为例, ...
Eclipse IDE 使用技巧和Android App 开发环境搭建和配置
写在前面: 本片文章只是记录了自己学习时的一些笔记,纯粹是为了自己后面方便查找,片言碎语,不适合大家浏览,请大家不要参考这篇文章. 正文: Eclipse IDE 使用技巧 ...
十个最适合 Web 和 APP 开发的 NodeJS 框架 1
十个最适合 Web 和 APP 开发的 NodeJS 框架在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之 ...
html5 app开发重大消息-腾讯在技术端推进Html5生态发展
日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏览解决方案.腾讯公 ...
HTML5+app开发学习之调试篇
HTML5+app开发学习之调试篇调试方式介绍一边改边看调试方式介绍二真机运行 HBuilder/HBuilderX真机联调常见问题调试方式介绍三 Android调试(Chrome) 调试方 ...
java开发环境安装原理,java开发环境搭建 java开发环境的完整搭建过程
想了解java开发环境的完整搭建过程的相关内容吗,Rosalh在本文为您仔细讲解java开发环境搭建的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java开发环境搭建步骤,java开发环 ...
如何使用 IntelliJ IDEA 2017 配置PHP开发环境及项目搭建
IntelliJ IDEA 2017 配置PHP开发环境及项目搭建本文适用于初学者利用 IntelliJ IDEA搭建 PHP 工程及 PHP开发环境,本人也是初学者,在学习中有所心得,特此罗列如 ...
HTML5 APP开发与原生态APP比较有什么好处？
对于开发app软件的企业和团队来说,html5开发app是一个比较常见的话题,但是对于那些不是很懂得html5技术的小伙伴来说,开发app应用为什么能够采用html5语言,使用html5技术做手机端应 ...

HTML5 APP开发环境的框架搭建

HTML5 APP开发环境的框架搭建

HTML5 APP开发环境的框架搭建相关推荐

最新文章

热门文章