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 {

	@Override
	public 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();
		}*/
	}

	@Override
	public 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;
	}

	@Override
	public 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() {
		}

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {
			View rootView = inflater.inflate(R.layout.fragment_main, container,
					false);
			return rootView;
		}
	}

}

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

  

这样就完成了环境搭建!