phoneGap学习笔记——android+phoneGap环境搭建

我之前有学过jquery mobile ，后来发现phoneGap结合jquery mobile 可以搭建跨平台的移动应用，所以出于兴趣去学习了一下phoneGap ，这个总结是在android的环境下搭建的环境:

 说明：http://www.phonegapcn.com/developers/get-started-13/get-started  这里的入门教程环境搭建真是坑，不是我想黑它，是它使用的版本太旧了，现在phoneGap的版本都已经是3.4的了，这里的中文教程还是1.0的，害我浪费了一天的时间在瞎搞！还是官网www.phonegap.com的专业,这里也感谢一下phonegap社区（群号:171920628）的  “撸主”北京_youBoy 的指导，群里也有一些比较好的共享资料!

下面来讲一下搭建环境的步骤：

一、安装、配置JDK开发环境，最好是使用1.6+

1、配置JAVA_HOME、PATH、CLASSPATH环境变量

二、下载eclipse IDE 、 android SDK

官网:http://developer.android.com/sdk/index.html 

下载完后:这是基本的目录结构

三、下载phoneGap

官网：http://phonegap.com/install/  目前版本是3.4，是使用node.js来安装的，具体我也没有操作过，我这里使用的版本的是2.9.0，因为在2.9.1里面没有找到jar包，所以就使用了2.9.0版本

四、创建Android  并搭建phoneGap环境

1、启动下载好的eclipse ,直接创建android  application project  ,一直点下一步,创建好后，会出现这样的目录结构，

这里会生成一个appcompat_v7的java 7依赖包,此时我们的Android项目已经创建好，把phoneGap环境搭建进来

2、搭建phoneGap环境

(1) 将下载好的phone.2.9.0 中的cordova-2.9.0.jar放入/libs  目录

(2)将xml文件夹copy到/res目录下 

(3)将以下代码copy到AndroidManifest.xml

<supports-screens        android:largeScreens="true"        android:normalScreens="true"        android:smallScreens="true"        android:xlargeScreens="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.INTERNET" />    <uses-permission android:name="android.permission.RECEIVE_SMS" />    <uses-permission android:name="android.permission.RECORD_AUDIO" />    <uses-permission android:name="android.permission.RECORD_VIDEO"/>    <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" />    <uses-permission android:name="android.permission.GET_ACCOUNTS" />    <uses-permission android:name="android.permission.BROADCAST_STICKY" />

(4)在/assets目录下创建www文件夹,将cordova.js   复制到www文件夹下,并新建一个index.html

(5)在src目录中修改 mainactivity.java

   引入import org.apache.cordova.*;  

继承DroidGap  

注释setContentView(R.layout.activity_main);

加上super.loadUrl("file:///android_asset/www/index.html");

最后修改结果

package com.example.hellomobile;import android.support.v7.app.ActionBarActivity;import android.support.v7.app.ActionBar;import android.support.v4.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.os.Build;import org.apache.cordova.*;public class MainActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//setContentView(R.layout.activity_main);super.loadUrl("file:///android_asset/www/index.html");/*if (savedInstanceState == null) {getSupportFragmentManager().beginTransaction().add(R.id.container, new PlaceholderFragment()).commit();}*/}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}/** * A placeholder fragment containing a simple view. */public static class PlaceholderFragment extends Fragment {public PlaceholderFragment() {}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View rootView = inflater.inflate(R.layout.fragment_main, container,false);return rootView;}}}

(6)最后一步，创建AVD，查看效果（AVD模拟器启动时间比较长，耐心等待）

  

这样就完成了环境搭建!