文档章节

使用Intellij Idea 搭建PhoneGap Android开发环境

Realfighter
 Realfighter
发布于 2015/02/04 16:29
字数 1287
阅读 3409
收藏 7

    看这里:使用Intellij Idea 搭建PhoneGap Android开发环境

    最近几天在学习使用phonegap进行android应用的开发,首先当然是phonegap android开发环境的搭建,网上的资料比较乱,cordova和phonegap也有点分不清,个人参考了很多资料,也试验了很多次,一直在摸索,总算小有心得,这里简单的整理一下,使用Intellij Idea 搭建PhoneGap Android开发环境。

    首先需要理清楚phonegap和cordova的关系,以下内容引自百度百科

    本篇使用的是Phonegap 2.9.0搭建,官方最新的版本是2.9.1,Cordova 提供的最新版本为4.0.0,使用还是有差异的,使用的开发工具是Intellij,默认集成了Android的插件,只需要简单的配置下SDK就可以了,关于Eclipse Android开发环境的搭建,请咨询度娘,这里不再赘述。

    使用Intellij Idea,通过File-->New Module,创建一个Android Application Module,如下图所示:


    选择Next,在这里定义你的应用名称Hello PhoneGap和包名com.phonegap.hello,以及程序的入口MainActivity,如下所示:


    继续选择Next,进入设置页面,设置程序的路径,以及模拟器的target,由于我使用的是Genymotion模拟器,这里选择User Device,关于Genymotion模拟器的安装及使用,请参见这里


   选择Finish,即完成了Hello PhoneGap最基本Android应用程序的开发,当然本篇使用的是Phonegap移动开发框架,通过编写html+javascript+css 代码完成Android应用程序的开发,首先为我们的module引入cordova-2.9.0.jar,在module的libs目录增加相应的 jar包,作为类库引入,如下:

     这样,我们就可以在我们的java类中使用phonegap提供的API了,接下来,我们需要在module的assets目录下创建www文件夹,之 后,我们大部分的开发过程都需要在www文件夹下面进行,包括编写js+html+css文件等,为了分包明确,在www文件夹创建 html,css,js文件夹,同样的我们需要在js目录引入cordova.js,以及在html目录新建一个基本的html,html的内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script>
    <title>Hello PhoneGap</title>
</head>
<body>
    <h1>Hello PhoneGap</h1>
</body>
</html>

    另外,需要在Android的res资源目录下,新建xml目录,引入phonegap的config.xml,主要是配置一些phonegap提供的插件,完整xml文件如下:

<widget
        id="com.phonegap.hello"
        version="2.0.0"
        xmlns="http://www.w3.org/ns/widgets">
 
    <name>
        Hello PhoneGap
    </name>
 
    <description>
        A Hello World PhoneGap application.
    </description>
 
    <author
            email="hsp62692180@126.com"
            href="http://www.xx566.com">
        www.xx566.com
    </author>
 
    <access origin="*"/>
 
    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
    <content src="index.html"/>
 
    <preference
            name="loglevel"
            value="DEBUG"/>
    <!--
      <preference name="splashscreen" value="resourceName" />
      <preference name="backgroundColor" value="0xFFF" />
      <preference name="loadUrlTimeoutValue" value="20000" />
      <preference name="InAppBrowserStorageEnabled" value="true" />
      <preference name="disallowOverscroll" value="true" />
    -->
 
    <feature name="App">
        <param
                name="android-package"
                value="org.apache.cordova.App"/>
    </feature>
    <feature name="Geolocation">
        <param
                name="android-package"
                value="org.apache.cordova.GeoBroker"/>
    </feature>
    <feature name="Device">
        <param
                name="android-package"
                value="org.apache.cordova.Device"/>
    </feature>
    <feature name="Accelerometer">
        <param
                name="android-package"
                value="org.apache.cordova.AccelListener"/>
    </feature>
    <feature name="Compass">
        <param
                name="android-package"
                value="org.apache.cordova.CompassListener"/>
    </feature>
    <feature name="Media">
        <param
                name="android-package"
                value="org.apache.cordova.AudioHandler"/>
    </feature>
    <feature name="Camera">
        <param
                name="android-package"
                value="org.apache.cordova.CameraLauncher"/>
    </feature>
    <feature name="Contacts">
        <param
                name="android-package"
                value="org.apache.cordova.ContactManager"/>
    </feature>
    <feature name="File">
        <param
                name="android-package"
                value="org.apache.cordova.FileUtils"/>
    </feature>
    <feature name="NetworkStatus">
        <param
                name="android-package"
                value="org.apache.cordova.NetworkManager"/>
    </feature>
    <feature name="Notification">
        <param
                name="android-package"
                value="org.apache.cordova.Notification"/>
    </feature>
    <feature name="Storage">
        <param
                name="android-package"
                value="org.apache.cordova.Storage"/>
    </feature>
    <feature name="FileTransfer">
        <param
                name="android-package"
                value="org.apache.cordova.FileTransfer"/>
    </feature>
    <feature name="Capture">
        <param
                name="android-package"
                value="org.apache.cordova.Capture"/>
    </feature>
    <feature name="Battery">
        <param
                name="android-package"
                value="org.apache.cordova.BatteryListener"/>
    </feature>
    <feature name="SplashScreen">
        <param
                name="android-package"
                value="org.apache.cordova.SplashScreen"/>
    </feature>
    <feature name="Echo">
        <param
                name="android-package"
                value="org.apache.cordova.Echo"/>
    </feature>
    <feature name="Globalization">
        <param
                name="android-package"
                value="org.apache.cordova.Globalization"/>
    </feature>
    <feature name="InAppBrowser">
        <param
                name="android-package"
                value="org.apache.cordova.InAppBrowser"/>
    </feature>
 
</widget>

      同样的,我们需要在AndroidManifest.xml文件中增加以下内容,以开启相应的权限,如下:

<supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true"
        android:xlargeScreens="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"/>

    并将以下内容添加到AndroidManifest.xml文件的activity标签中:

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

    最后,我们需要修改入口MainActivity文件,使其继承DroidGap,去除setContentView(R.layout.main),使用super.loadUrl加载入口页面,如下:

public class MainActivity extends DroidGap {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/html/index.html");
    }
}

   在模拟器中,运行此module,人品正常的话,你可以看到这样的画面,表示基本的phoneGap Android开发环境搭建完成,撒花ing...

    phoneGap提供了一些js的api,用于调用设备的GPS获取经纬度信息,以及调用摄像头进行拍照等,我将在接下来的文章中整理介绍,敬请期待。

    项目地址:http://git.oschina.net/realfighter/Hello-PhoneGap

© 著作权归作者所有

Realfighter

Realfighter

粉丝 150
博文 139
码字总数 144564
作品 2
洛阳
程序员
私信 提问
加载中

评论(4)

Realfighter
Realfighter 博主

引用来自“会飞的章鱼”的评论

如何链接外部网址,我试了很多网上方法,都没有用,网址比如 :www.baidu.com
phonegap里面使用的不是原生的webview,是其内部封装的cordovaWebView,可以先添加白名单,Config.init();Config.addWhiteListEntry("http://www.baidu.com, true);再loadUrl("www.baidu.com");类似于这样
会飞的章鱼
会飞的章鱼
如何链接外部网址,我试了很多网上方法,都没有用,网址比如 :www.baidu.com
Realfighter
Realfighter 博主

引用来自“Tom-Lin”的评论

我用这个开发的程序,启动时总有1-3秒的黑屏,你的是不是也这样?
你使用的phonegap的版本是多少,我开发的应用没有黑屏的问题,你的AndroidManifest.xml配置的有问题吧?
Tom-Lin
Tom-Lin
我用这个开发的程序,启动时总有1-3秒的黑屏,你的是不是也这样?
Android应用开发之使用PhoneGap实现位置上报功能

看这里:Android应用开发之使用PhoneGap实现位置上报功能 上一篇,使用Intellij Idea 搭建PhoneGap Android开发环境中,简单的介绍了PhoneGap Android开发环境的搭建,并且开发了Hello World...

Realfighter
2015/02/05
682
1
Android应用开发之使用PhoneGap实现拍照上传功能

看这里:Android应用开发之使用PhoneGap实现拍照上传功能 在之前的使用Intellij Idea 搭建PhoneGap Android开发环境以及Android应用开发之使用PhoneGap实现位置上报功能两篇文章中,我们学习...

Realfighter
2015/02/05
10.6K
3
关于跨平台移动应用开发框架的探索 -- PhoneGap

本文通过介绍移动互联网的发展,引出了跨平台移动应用开发的现状,并对当前的跨平台移动应用开发框架进行了比较。在实践环节中,本文首先使用 PhoneGap Build 将 HTML 程序发布为多移动平台的...

IBMdW
2011/11/24
3.7K
0
phonegap android开发初体验

最近想学习一下手机上的web app开发,朋友推荐phonegap是一个很不错的跨平台开发框架,下面是初次使用的一些总结总结。 1、开发环境配置 系统要求可以具体参考:http://developer.android.co...

弓影
2011/11/14
1K
2
使用IntelliJ IDEA搭建phoneGap for Android开发环境HelloW...

前文 大家都知道phoneGap跨平台移动框架,支持平台有 IOS/android/windows8/……等主流移动操作系统! 接现在就来搭建使用phoneGap开发Android的HelloWorld程序! IDE:IntelliJ IDEA(如何安...

郏高阳
2012/12/09
9.1K
14

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
40分钟前
4
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
7
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
10
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
14
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部