javascript(phonegap+jquery monile)移动开发之(android)-----------搭建开发环境

原创 2013年12月02日 14:56:38

第一步:PhoneGap开发环境搭建

              安装前提:1、Java SDK

                                2、Eclipse

                                3、Android SDK

                                4、ADT插件

                                 5、PhoneGap

第二步:搭建第一个PhoneGap项目

1、在eclipse中新建Android Project,什么名字随便取;

2、在项目的目录下,建两个文件夹:

/libs
/assets/www

 

3、.进入将刚刚下载并解压的PhoneGap包里Anroid目录,我们需要的资源都在这个目录下。
 将phonegap-x.x.x.js这个js文件(具体名称视当时下载的版本而定)copy到/assets/www目录下,
 把phonegap.jar文件copy到/libs目录下。
 再把xml目录copy到android项目的res目录下。

 

 4、在/assets/www下建立index.html文件,内容看起来像这样: 
<!DOCTYPE HTML> 

<html>
	<head>
		<title>PhoneGap</title>
		<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
	</head>
	<body>
		<h1> I am PhoneGap developer</h1>
	</body>
</html>
5.将以下权限配置的xml内容copy到AndroidManifest.xml文件中:
<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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />  
6.将以下内容添加到AndroidManifest.xml文件的activity标签中:

android:configChanges="orientation|keyboardHidden 

7.AndroidManifest.xml最后看起来会像这样:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yunxuan.helloworld"
    android:versionCode="1"
    android:versionName="1.0" >

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="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" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="11" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.yunxuan.helloworld.MainActivity"
            android:configChanges="orientation|keyboardHidden"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

8.在刚刚新建的Android Project中找到libs目录并在phonegap-x.x.x.jar上点击右键,选择 Build Path->Add to Build Path
9.最后再修改下src下的Java主文件:
1)添加import com.phonegap.*;
2)将类改成继承为DroidGap;
3)删掉import android.app.Activity;
4)把setContentView()这行替换为super.loadUrl("file:///android_asset/www/index.html");
5)最后看起来就像这样:
package com.yunxuan.helloworld;

import com.phonegap.DroidGap;
import android.os.Bundle;


public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }    
}

展示运行结果:

以上已经完成javascript之PhoneGap开发环境的搭建。


接下来在此基础上搭建javascript之jquery mobile开发环境的搭建

1、我们需要进行的相关配置:我们还需要做一些其他配置:
  • 将D:\jquery.mobile-1.3.2\demos\css复制到D:\androidws\HelloWorld\assets\www\css中;
  • 将D:\jquery.mobile-1.3.2\demos\js复制到D:\androidws\HelloWorld\assets\www\js中,如果之前没有把phonegap.js放到这个目录下面,这个时候可以把它移到这个路径下面。

2、在/assets/www下建立test.html文件,内容看起来像这样:

<!DOCTYPE HTML> 

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
		<title>HTML5Paint with jQuery Mobile</title>
		<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.2.min.css">
		<script src="js/jquery.js"></script>
		<script src="js/jquery.mobile-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
	</head>
	<body>
		<h1 style="text-align:center;">
			PhoneGap with jQuery Mobile
		</h1>
		<div style="background-color:#FF7300;color:#CCCCCC;height:60px;line-height:60px;border:2px solid #CCCCCC;padding:10px;margin:10px;border-radius:5px;">
			Welcome to you!
		</div>
		<div data-role="footer" class="jqm-footer">
			<p class="jqm-version"></p>
			<p>Copyright 2013 The jQuery Foundation</p>
		</div>
	</body>
</html>

其他相关代码无需改变:

相关的演示结果:



现在我们已经完成:phonegap+jquery mobile(javascript移动开发的环境搭建工作)。



搭建 Android 开发环境,初试HelloWorld (win7) (上)

搭建Android开发环境主要有以下几步要做: 1、JDK安装 2、Eclipse安装 3、Android SDK安装 4、ADT安装 5、创建AVD 1、JDK(Java D...
  • wangwenjing90
  • wangwenjing90
  • 2013年04月24日 10:46
  • 13003

移动端Web开发环境搭建

本文主要总结一下移动端进行前端开发时需要用到的一些工具,以及他们之间互相的组合,同时也包括本人使用的组合。 1. Chrome To Mobile PC机上安装该chrome插...
  • zhang1027963459
  • zhang1027963459
  • 2016年01月18日 13:08
  • 1038

Android Studio 开发环境的搭建与安装

一.安装的前期准备1.jdk 的安装与配置 甲骨文jdk官网下载尽量下载最新版本,X86是32位版本,X64是64位版本,根据自己电脑的系统决定。 配置java环境变量 计算机→属性→高级系统设置...
  • Bruce_shan
  • Bruce_shan
  • 2016年07月14日 19:08
  • 1294

五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程

引言 在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境...
  • pj386960300
  • pj386960300
  • 2017年03月03日 19:26
  • 2412

Mac下Android开发环境搭建

1.JDK 1)下载安装 mac系统一般默认会安装jdk 1.6,路径为/System/Library/Java/JavaVirtualMachines/1.6.0.jdk,但有时候可能需...
  • wei_lei
  • wei_lei
  • 2017年05月05日 10:59
  • 1565

Qt On Android开发环境安装、配置

本文记录在Windows 8.1下,Qt on Android 5.5开发环境的安装和配置。 1、安装JDK 到甲骨文网站下载JDK:http://www.oracle.com 下载安装成功后...
  • str999_cn
  • str999_cn
  • 2015年08月28日 01:10
  • 1750

五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程

原文链接 引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友...
  • a214919447
  • a214919447
  • 2017年01月18日 17:10
  • 3151

androidstudio集成开发环境搭建

安装androidstudio集成开发环境分两步 1.安装androidstudio 2.配置模拟器AVD 但是要先安装androidsdk androidsdk里面是什么东西?? 我们开发应...
  • fight_onlyfor_you
  • fight_onlyfor_you
  • 2017年07月13日 00:41
  • 591

基于Eclipse的Android开发环境搭建

对于才接触Android开发的人员来说,复杂的开发环境搭建,各种新知识,新内容要接触总是让人无从下手。通过这篇文章,让零基础开发人员成功搭建基于Eclipse的android开发环境。Android使...
  • lzhitwh
  • lzhitwh
  • 2017年05月18日 13:48
  • 5840

android开发环境搭建(Studio版)

Android Studio推出也快3年了,面对android开发者对拥有一款更加优秀的IDE的愿望,google也加快脚步,一直在更新着这款软件,目前来看,开发者是时候转向Studio阵营了,如果你...
  • wangyueyishi
  • wangyueyishi
  • 2016年03月04日 15:48
  • 2090
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript(phonegap+jquery monile)移动开发之(android)-----------搭建开发环境
举报原因:
原因补充:

(最多只允许输入30个字)