体验phonegap3.0

简介: 网上有各种各样的phonegap环境搭建资料,鉴于学习和整理的考虑,我还是把我搭建的过程整理出来 这篇文章中将涉及到的内容 PhoneGap环境需要的组件 Node环境 JDK Android SDK ADT ANT 命令行安装phonegap 命令行安装  创建项目 wind...

网上有各种各样的phonegap环境搭建资料,鉴于学习和整理的考虑,我还是把我搭建的过程整理出来

这篇文章中将涉及到的内容

PhoneGap环境需要的组件

Node环境

JDK

Android SDK

ADT

ANT

命令行安装phonegap

命令行安装

 创建项目

windows下android环境搭建

疑难问题

参考资料

 

Phonegap环境需要的组件

node环境

 http://phonegap.com/install/直接安装即可

JDK环境 

 主要涉及到环境变量的设置:ClassPath中添加 ;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

Android SDK

参考 http://developer.android.com/sdk/index.html#download

新建

 Path中添加 ;%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;

 ClassPath中添加;%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;

 ADT 

 ADT的功能是建立eclipse与android sdk的关联,使得在eclipse中可以建立android项目。

 ANT

 参考地址: http://ant.apache.org/bindownload.cgi

 下载文件放到指定目录下,在环境变量中,设置目录即可

 

 classpath 中添加 ;%ANT_HOME%\lib\ant.jar;

 path 中添加 ;%ANT_HOME%\bin;

 验证命令

 cmd下执行 ant,出现以下界面标识安装成功。

 

 命令行安装phonegap

 安装phonegap有两个命令,npm install -g phonegap 和 npm install -g cordava,按道理说这两个命令使用一个就行了,实际上还是有些问题。

 执行npm install -g phonegap 安装完以后在 在登录用户的特定位置会产生两个文件夹 npm和npmcache

 我的环境下的位置

 C:\Users\Administrator\AppData\Roaming\

 这两个文件夹可以作为安装成功与否的辅助验证。

 如果以上两个安装命令都执行的话,会出现以下两个文件夹依次对应。安装完成后,在 C:\Users\Administrator\AppData\Roaming 路径下,会出现npm-cache 和npm两个文件夹,这就是phonegap安装文件所在。

 

 

创建项目

phonegap的命令行工具,我的理解是有两套,phonegap开始以及 cordova。我在实际使用中发现,phongap命令不是很靠谱,因此折腾了好长时间。之后就使用cordova了。

比如:创建项目 可以用 cordava create  <projectName>  也可以使用 phonegap create  <projectName> 

 生成一个默认的phonegap项目

 

 之后是 在项目中加入android平台。

 

加入成功后,在platforms文件夹下会生成android文件夹,这样用android IDE工具就可以引进这个android项目进行开发了,实际上phonegap的功能也主要体现在这里,之后的工作就在Android IDE 即eclipse中进行。

windows下android环境搭建

以下是一个简要的关联图解

 

疑难问题

1  虽然安装了android sdk,但是执行phonegap install android 或者 phonegap build android时,还是在检测android sdk环境

  最终这个问题没有解决,但是我通过cordova 命令创建项目,加入android平台也实现了功能。这个问题还需要以后慢慢研究。

2 document.addEventListener("deviceready", onDeviceReady, false);

这句话是针对手机/平板设备有用的.所以在浏览器里不会执行。

正确的写法是

if(!window.device){
$(document).ready(onDeviceReady);
}
else{
document.addEventListener("deviceready", onDeviceReady, true);
console.log('===>> document.addEventListener');
}

参考资料

PhoneGap 3.0发布:新API、更好的工具以及多平台支持

ant安装、环境变量配置及验证

PhoneGap 在 Android 上的插件开发方法介绍

关于Phonegap,存在跨域吗?

提及到jQuery默认对跨域请求有一定的限制。于是就找到了代码:$.support.cors = true;

 

目录
相关文章
|
3月前
|
IDE 开发工具 Android开发
安卓与iOS开发环境对比:选择哪个平台开始你的移动应用之旅?
【8月更文挑战第12天】在移动应用开发的世界中,安卓和iOS是两个巨头,它们各自拥有独特的开发环境和生态系统。本文将深入探讨这两个平台的开发环境,包括它们的编程语言、工具、社区支持和市场覆盖度等方面。无论你是新手开发者还是有经验的专业人士,了解这些差异都将帮助你做出更明智的决策,选择最适合你项目需求和个人技能的平台。
49 1
|
1月前
|
前端开发 安全 Android开发
跨平台开发的新纪元:Tauri 2.0 横空出世,移动端、桌面端一网打尽!
Tauri 2.0 正式版于 2024 年 10 月 2 日发布,带来了多项重大更新。此次更新不仅全面支持 iOS 和 Android,实现“一次编写,到处运行”,还升级了插件系统,增强了灵活性与可扩展性。安全性大幅提升,引入新的权限系统,并优化了 IPC 层,支持原始有效载荷传输,大幅提高性能。此外,Tauri 2.0 还支持热模块替换(HMR),简化了应用分发流程,成为跨平台开发的重要里程碑。
225 0
跨平台开发的新纪元:Tauri 2.0 横空出世,移动端、桌面端一网打尽!
|
编解码 移动开发 容器
|
Web App开发 Dart JavaScript
无影Flutter for Web技术预研
## 介绍 [Flutter](https://flutter.dev/)是Google推出并[开源](https://github.com/flutter)的跨平台开发框架,它采用Skia渲染并兼容了Android、iOS、Mac、Windows、Linux及Web,Flutter在2.0版本正式发布了对Web的支持 ![](https://ata2-img.oss-cn-zhangjiak
1079 0
无影Flutter for Web技术预研
|
移动开发 JSON JavaScript
Day 10: PhoneGap —— 开发手机应用如此简单
我们发现了比较有趣的系列文章《30天学习30种新技术》,准备翻译,一天一篇更新,年终礼包。下面是第10天的内容。 今天又是“30天学习30种新技术”的一天。长期以来,我觉得手机开发很恐怖,大部分应用都没有商业模式。事实上,编写手机应用从来都不能让我兴奋。然而,考虑到手机领域的飞速发展,以及更多的人通过手机而不是桌面访问互联网,我决定尝试下手机开发。我的手机开发之旅将从PhoneGap 起步。
547 0
Day 10: PhoneGap —— 开发手机应用如此简单
|
人工智能 数据可视化 物联网
HarmonyOS 2.0 手机开发者 Beta 版如期而至,带来“应用天生跨端”的全新开发体验
HarmonyOS 2.0 手机开发者 Beta 版如期而至,带来“应用天生跨端”的全新开发体验
HarmonyOS 2.0 手机开发者 Beta 版如期而至,带来“应用天生跨端”的全新开发体验
|
Android开发 UED iOS开发
安卓设计师不容错过的15款实用UI界面设计工具
最近刮起了一股“养蛙儿子”的风潮。独特的UI设计、萌萌的画风和简洁的用户体验吸引了大批的用户。在不少人直呼“哇,我的蛙儿子好可爱,好萌”的背后,我们可以看到一个高质量的UI设计对于提高应用下载量有着非常重要的作用。
2500 0
|
Java C# Android开发
|
Web App开发 iOS开发 开发者
下一篇
无影云桌面