文档章节

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

j
 james_laughing
发布于 2014/12/17 16:23
字数 902
阅读 38
收藏 0

phonegap   安装 环境搭建 完整版

 

刚刚接触 phonegap 因为配环境遇到各种各样问题.花了一下午时间才完成,所以写一个篇文章希望能给大家节约点时间.

      本文主讲windows系统下的phonegap的环境搭建 ,以android视角为主.ios用户可参考;

 

首先介绍搭建环境的基本准备:

1 java JDK   (搜索一下.......)

2 android SDK 最新版(我当时的版本是 API 19  点击打开链接)

3 Ant 打包工具  (百度一个或者 点击打开链接)

4 eclipse   (建议使用google的  因为内置ADT     点击打开链接 )

5 ADT (ecplise 里的插件,安卓开发工具插件     下载上面的链接,内部集成了ADT)

6 Node.js   (点击打开链接)

7 sublime  点击打开链接 ;是我开发js h5 css 的工具;如果大家有好的开发软件希望能告诉我一下谢谢

 

下图是Node.js安装成功后

 

将以上配置好环境变量  (配置方法略 点击 )

特别提一下需要配环境变量的东西:  java JDK  ; android SDK;Ant ; 

 

贴上我的 path 供大家参考:

 (建议配成 ;%ANT_HOME%\bin;  去掉\bin)

F:\工具\Ant\ant-1.8\bin;     

C:\Develop\sdk\sdk\platform-tools;C:\Develop\sdk\sdk\tools;%Android%\.;C:\Develop\nodejs;%JAVA_HOME%\bin;C:\Develop\nodejs\

 

拥有以上工具后 

 

 

接下来开始phonegap的安装了

 phonegap 官网 点击

 

 

在控制台运行命令:


 npm install -g phonegap                                     ( Mac使用: sudo npm install -g phonegap )

//等待安装   完成后安装 cordova:

 npm install -g cordova                                       ( Mac使用: sudo npm install -g cordova )

 

 

 

 

 

安装完成后  
检验语句:

phonegap -version

cordova -version

 

 

 

在命令行 使用:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. phonegap create my-app  
  2. cd my-app  
  3. phonegap run android  

 

第一个 phonegap写的程序就出现了

 

在my-app 目录下出现5个文件夹     打包好的工程放在platforms里面

文件夹详解:

 

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

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

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

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

.cordova        : 存放的是配置文件 

 

 

将此文件夹导入 eclipse 就可以使用

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

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

 

导入eclipse后  文本结构....下图打的camera 和 vibration 是 相机与铃声的插件  下章节介绍

 

 

(图 1)

 

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

 

 

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. public class baozi extends CordovaActivity   
  2. {  
  3.     @Override  
  4.     public void onCreate(Bundle savedInstanceState)  
  5.     {  
  6.         super.onCreate(savedInstanceState);  
  7.         super.init();  
  8.         // Set by <content src="index.html" /> in config.xml  
  9. //        super.loadUrl(Config.getStartUrl());  
  10.         super.loadUrl("file:///android_asset/www/index.html");  
  11.             
  12.           
  13.     }  
  14. }  

 


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

 

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

指的是( 图  1)的  assets目录下 www 文件夹下的  index.html

 

 

 

贴上一张 工程导入后的属性图

 

工程下载    将phonegap的platforms导入到eclipse中  

如果报错clear一下  查看导的lib包 有没有报错

如果还有错  那么就是您选用了  google的API   改成最新版的android  API 就好了

如果导入工程遇到问题 可以查阅我此篇文章

Blog:  http://blog.csdn.net/aaawqqq/article/details/20463183

Phonegap解决错误:Error initializing Cordova:Class not found:

http://blog.csdn.net/aaawqqq/article/details/21243869

本文转载自:http://blog.csdn.net/aaawqqq/article/details/19755179

j
粉丝 29
博文 455
码字总数 22188
作品 0
广州
私信 提问
phonegap安装 环境搭建与配置详解( 完整版 提供下载地址)

phonegap 安装 环境搭建 完整版 刚刚接触 phonegap 因为配环境遇到各种各样问题.花了一下午时间才完成,所以写一个篇文章希望能给大家节约点时间. 本文主讲windows系统下的phonegap的环境搭建...

james_laughing
2014/12/17
144
0
phonegap桌面开发工具视频教程-不搭建环境就可以开发phonegap app

不搭建andrid 环境 不配置android sdk 或者不搭建xcode环境,或者不安装 node.js npm 的情况下就可以创建phoengap应用 电脑敲代码 手机上的phonegap app实时自动更新显示 Phonegap桌面开发工...

2tman
2015/01/22
407
0
phonegap android开发初体验

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

弓影
2011/11/14
1K
2
Phonegap桌面开发工具 Desktop-App与手机调试工具

天猫phonegap Desktop-App:可以在不搭建andrid 环境 不配置android sdk 或者不搭建xcode环境,或者不安装 node.js npm 的情况下就可以创建phoengap应用 Phonegap Desktop-App:它绕过了全部...

liaolzy2
2015/05/29
472
1
关于跨平台移动应用开发框架的探索 -- PhoneGap

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

IBMdW
2011/11/24
3.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

iptables删除命令中的相关问题

最近在做一个中间件的配置工作,在配置iptables的时候,当用户想删除EIP(即释放当前连接),发现使用iptables的相关命令会提示错误。iptables: Bad rule (does a matching rule exist in t...

xiangyunyan
50分钟前
3
0
IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1。 1 autocomplete属性 autocomplete属性规定form或input域应该拥有自动完成功能,当用户在自动完成域中开始输入时,浏览器...

老码农的一亩三分地
今天
7
0
OSChina 周五乱弹 —— 葛优理论+1

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享米津玄師的单曲《LOSER》: mv中的舞蹈诡异却又美丽,如此随性怕是难再跳出第二次…… 《LOSER》-...

小小编辑
今天
1K
23
nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部