HTML5 APP开发环境的框架搭建
来源:互联网 发布:淘宝crm客户管理方案 编辑:程序博客网 时间:2024/05/01 01:36
下面介绍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开发环境的框架搭建
- HTML5 APP开发环境的框架搭建
- HTML5 APP开发环境的框架搭建
- HTML5 APP开发环境的框架搭建
- HTML5 APP开发环境的框架搭建(PhoneGap)
- HTML5+phonepag 开发安卓APP开发环境的框架搭建
- HTML5+开发移动app教程1-环境搭建
- HTML5+开发移动app教程1-环境搭建
- HTML5+开发移动app教程1-环境搭建
- HTML5开发环境搭建
- HTML5开发环境搭建
- HTML5开发环境搭建
- HTML5开发环境搭建
- HTML5开发环境搭建
- HTML5开发环境搭建
- html5移动开发搭建框架的方法
- PowerShell:Power Shell 安装
- lua文件读写
- 使用Android Supportv4 SwipeRefreshLayout有关ListView滑动冲突问题
- 开源库
- 暴力除法
- HTML5 APP开发环境的框架搭建
- iOS 上的蓝牙框架 - Core Bluetooth for iOS 很不错的讲解
- android 开发 常用到的一些网络通信包
- Java多线程编程总结笔记——01 Java语言的线程
- 基于云计算中心的能量有效任务调度算法
- 大学课程-- 计算机组成与系统结构
- WindowsSocket编程初步-UDP
- 传统渲染管线与可编程Shader着色器
- Apple Watch使用感受杂谈——2