PhoneGap开发环境搭建及入门

原创 2015年11月18日 12:12:40

应用程序开发分为不同的层次,从最复杂的NDK ==》JDK ==》中间件 ==》图形界面。NDK开发的主要是C++开发,JDK 开发主要 java 开发,中间件开发主要:PhoneGap、MonoTouch、Rexsee EMS等等。   

    NDK是比较底层的东西,主要开发大型的3D游戏之类的;JDK的话比较普遍,大部分搞android开发的人都在用,开发周期比较长,做出来的东西效果和体验都还不错,也可以集成一些效果架包;中间件的话,因为是用第三方语言来开发,也就是普遍的HTML语言,所以开发周期比较短,速度快,而且WEB工程师可以直接去开发。但是用户体验方面的话会稍差,适合企业内部系统移植,或者已经有后台的系统移植。

中间件现在大家一般常用的就是PhoneGap了,最近对这个东西做了一点基础研究,下面介绍下我的学习过程。

一. 环境搭建:通过Node.js安装PhoneGap开发环境

1. 下载安装Node.js

下载完成后得到node-v5.1.0-x86.msi,运行安装完成。

2. 下载安装PhoneGap

    · 运行cmd,进入node.js的安装目录,运行命令npm install -g phonegap,如下图:

           

· 接下来就是等待phonegap下载完成。安装完成后,检验是否成功,输入phonegap -version:


· 输出phonegap版本号标识安装成功。


3. 下载安装 cordova:

安装方法同phonegap的安装过程,在cmd命令行中运行npm install -g cordova,等待下载完成够,输入cordova -version检验是否安装成功。

二. 创建phonegap应用

1) 在命令行中分别运行以下命令:

<span style="white-space:pre">	</span>phonegap create my-app  
<span style="white-space:pre">	</span>cd my-app  
<span style="white-space:pre">	</span>phonegap run android  
运行效果如下图:



结束后,第一个 phonegap写的程序就出现了;在my-app 目录下出现5个文件夹     打包好的工程放在platforms里面,如下图所示:

文件夹详解:


www              : 文件夹  开发的 HTML5 ; CSS ; JS 文件都拷贝到这下面

plugins          : 文件夹  存放的是phonegap插件  以后 文件,摄像头等插件都下载到这里,在下篇文章中介绍用法 

merges          : 我也没用过  以后知道了再补上

platforms      : 文件夹 存放的是编译好后的android文件   ,(如果这个文件夹为空,需要你在命令行编译一次才能生成. 如上面 phonegap run android)

.cordova        : 存放的是配置文件 


2)运行项目

将platforms下的android项目导入 eclipse 中;

phonegap 将以第三方库的形式导入

如果src文件报错 检查是否是   phonegap的功能没有导入进来

 

导入eclipse后  文本结构....


下图是     phonegap的启动页面  调用 super.loadUrl(); 方法

public class MainActivity extends CordovaActivity   
{  
    @Override  
    public void onCreate(Bundle savedInstanceState)  
    {  
        super.onCreate(savedInstanceState);  
        super.init();  
        // Set by <content src="index.html" /> in config.xml  
//        super.loadUrl(Config.getStartUrl());  
        super.loadUrl("file:///android_asset/www/index.html");  <span style="color: rgb(77, 77, 77); font-family: 'Microsoft Yahei', Arial; line-height: 26px;"><span style="font-size:12px;"><span style="font-family: Arial;"><span style="font-size: 14px;"></span></span></span></span><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;"><span style="white-space: pre;"></span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;"><span style="color: rgb(77, 77, 77); font-family: 'Microsoft Yahei', Arial; line-height: 26px;"><span style="font-size:12px;"><span style="font-family: Arial;"><span style="font-size: 14px;"></span></span></span></span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;"><span style="white-space: pre;"></span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;"><span style="white-space:pre">	</span>//在 super.loadUrl("  "); 中填写你的启动页面
</p><span style="white-space:pre">	</span>//参数: " <a target=_blank target="_blank" href="file://android_asset/www/" style="color: rgb(202, 0, 0); text-decoration: none;">file:///android_asset/www/index.html</a> " <span style="color: rgb(77, 77, 77); font-family: 'Microsoft Yahei', Arial; line-height: 26px;"><span style="font-size:12px;"><span style="font-family: Arial;"><span style="font-size: 14px;"></span></span></span></span><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;"><span style="white-space: pre;"></span></p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;"><span style="white-space:pre">	</span>//指的是( 图  1)的  assets目录下 www 文件夹下的  index.html</p>
} }

在 super.loadUrl("  "); 中填写你的启动页面

 

参数: " file:///android_asset/www/index.html " 

指的是项目中的  assets目录下 www 文件夹下的  index.html



phonegap安装 环境搭建与配置详解( 完整版 提供下载地址)

phonegap 安装 环境搭建 完整版   刚刚接触 phonegap 因为配环境遇到各种各样问题.花了一下午时间才完成,所以写一个篇文章希望能给大家节约点时间.       本文主讲window...
  • aaawqqq
  • aaawqqq
  • 2014年02月23日 13:34
  • 129195

PhoneGap从入门到精通视频教程

跨平台开发技术-PhoneGap从入门到精通视频教程 课程讲师:厉风行  课程分类:手机开发 适合人群:中级 课时数量:76课时 用到技术:PhoneGap、罗盘、运动传感器、地理位...

详解关于PhoneGap框架学习教程

PhoneGap支持多达6种主流智能移动平台,PhoneGap的使用很简单,只要使用其提供的API来访问相关的功能就可以把获取的结果在HTML5(JS)中使用了。 AD: 2013大数据全球技术峰会...

PhoneGap 教程:一个跨平台的 Todo App

PhoneGap 是一个允许开发中使用s

phonegap 开发入门 PhoneGap官方网站上有详细的入门示例教程,这里,我针对使用PhoneGap进行Android移动应用的开发对其官网的Get Started进行一些介绍、补充。 Ste

phonegap 开发入门 PhoneGap官方网站上有详细的入门示例教程,这里,我针对使用PhoneGap进行Android移动应用的开发对其官网的Get Started进行一些介绍、补充。 ...
  • gdky005
  • gdky005
  • 2012年04月05日 20:47
  • 22135

phoneGap环境搭建教程

搭建phoneGap环境遇到各种问题,一直拖到现在也没有搭建好,写Blog记录,也是一个鞭策。 切入正文: 1. 搭建好安卓开发环境,这里不是重点,想看的直接点击 点击打开链接 2. 安装Node...

phoneGap+iOS环境搭建

写了7年多的原生APP程序,今天老板说android搞一套,IOS搞一套,Web搞一套,成本太高了。面对压力,在此基础上我决定用phoneGap html5。结合自己的实践,搭建了基于phoneGap...
  • manyxh
  • manyxh
  • 2015年09月09日 17:24
  • 2986

ios phoneGap的安装及使用

首先Phonegap是一个利用HTML5去开发App的框架。可以支持移动、PC等移动操作系统,是一个跨平台的应用,比较节省成本,缩短开发时间。性能不如专门的原生的好,做一些简单应用可以使用;Phone...

phonegap菜鸟入门小结

之前没开发过移动应用,用phonegap打包出了可运行的ios平台app和android平台apk。这是本人第一次开发出移动应用,很开心。 下面罗列mac上环境搭建的主要步骤和可能的坑: 1. 要...
  • jdk137
  • jdk137
  • 2015年12月30日 09:45
  • 389

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PhoneGap开发环境搭建及入门
举报原因:
原因补充:

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