热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

PhoneGap安装配置

PhoneGap是一能够让你用普通NewsShow的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台。是唯一的一个支持7个平台的开源移动框架。它的优势是

  PhoneGap是一能够让你用普通NewsShow的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台。是唯一的一个支持7个平台的开源移动框架。它的优势是无以伦比的:开发成本低——据估算,至多Native App的五分之一!
  PhoneGap中文平台:http://www.phonegapcn.com/

一、PhoneGap简介

二、 PhoneGap是如何做到的?

三、安装PhoneGap(Cordova)环境

一、PhoneGap简介

  PhoneGap是一个用基于HTML,CSS和Javascript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系 人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用。现在PhoneGap的代码已经贡献给了Apache软件基金会(ASF),并且改名为 Apache Cordova。这个名字来源于温哥华的科尔多瓦街(Cordova Street),它是创建PhoneGap时Nitobi公司的所在地。

二、PhoneGap是如何做到的?

  使用HTML+CSS+Js开发的Web App, 会被PhoneGap包装成WebView, 嵌入到发布App中。这样最后打包的App实际上就是一个外壳,外壳中包装的就是我们开发的Web App针对不同的平台,PhoneGap会使用不同的平台编译打包。对于NativeAPI的调用,是通过Js调用完成的。这些调用的代码同样会被PhoneGap翻译成不同平台的代码,从而实现对于和不同设别的交互。也就是下图中的Phone Gap Bridge做的事情。

技术分享

三、安装PhoneGap(Cordova)环境

  Apache Cordova官网安装文档: http://cordova.apache.org/docs/en/3.5.0//guide_cli_index.md.html#The%20Command-Line%20Interface

  这里我为大家整理一下安装流程,因为我的开发环境是android,所以以android开发平台为例:

  第一步,配置安装的准备工作:

  分别下载安装最新的JDK、Android SDK、Apache Ant

  JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

  Android SDK下载地址:http://developer.android.com/sdk/index.html

  Apache Ant下载地址:http://ant.apache.org/bindownload.cgi

  安装完成之后,配置好环境变量。

  添加新的环境变量, 根据安装路径,调整下面的路径:

ANDROID_HOME Value: C:\Program Files\adt-bundle-windows-x86_64-20140321\sdk
ANT_HOME Value: C:\Program Files\apacheant
JAVA_HOME Value: C:\Program Files\Java\jdk1.8.0_05

  添加到Path

%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

  以上完成后再在Android SDK的安装目录中,有SDK Manager.exe程序,在命令行中启动该程序。
在Tools->Manage AVDs中,创建一个新的Android模拟器。

  技术分享

  技术分享

  这里有个问题要注意:在创建Android模拟器时,可能会遇到,调加不了设备,那么我们这时候要去检索,第一种图片里面的是否有要安装的install packages

  最后就可以开始在Android平台上编译和运行我们的的第一个PhoneGap程序了。

cordova emulate android   //启动android 虚拟机

  技术分享

  第二步,命令行安装配置cordova项目:

  首先下载安装 node.js 

  全局安装 cordova:

npm install -g cordova

  创建App:

cordova create hello com.example.hello HelloWorld
  • 第一个参数hello表示在工程目录中创建一个 hello 的文件夹
  • 第二个参com.example.hello表示包名(反向域名),用于标志不同的 app
  • 第三个参数HelloWorld表示项目的名称,可以在 config.xml 文件中修改

  添加平台:

  进入创建的项目中:

cd hello

  查看已经安装的平台和支持的平台:

cordova platforms list

  在 windows 下,可以通过以下命令添加支持的平台:

cordova platform add wp7
cordova platform add wp8
cordova platform add windows8
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos

  当然,也可以删除不想要的平台:

cordova platform remove android
cordova platform rm android

  这里注意,window的只能开发andriod app 项目,不能开发ios的。

  编译项目

  通过下面命令,即可编译项目:

cordova build android

  编译完成后可以看到 platforms/android/bin/ 下已经生成了 apk 文件,会发现assets底下多了个www文件夹,为我们写css。html,js的目录,然后res下面的www文件夹可以删掉了。

  测试、运行项目

  启动 android 虚拟机:

cordova emulate android

  运行 app 项目(在虚拟机或者在真机):

cordova run android

  运行结果:

技术分享

  参考资料:

  phonegapcn中国:http://www.phonegapcn.com/

  cordova官网:http://cordova.apache.org/docs/en/3.5.0//guide_cli_index.md.html#The%20Command-Line%20Interface   

  cordova教程: https://ccoenraets.github.io/cordova-tutorial/             

  cordova 初识之命令行工具:http://wenzhixin.net.cn/2014/02/11/cordova_command_line

  我的PhoneGap安装配置经历:http://www.it165.net/pro/html/201407/17784.html

  PhoneGap入门教程(1) - 环境搭建与配置:http://www.zwlme.com/frontend/phonegap-getting-started-tutorial-1.html

PhoneGap安装配置


推荐阅读
  • 我们程序员为什么要关注 JavaScript ?_js
    受这周我在企业中看到的JS现状的启发,我写了这篇文章。10年之前,我从来没有想过现在的JavaScript竟然会变得几乎无处不在。下面是几个你之所以要关注Java ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 下面是hybridapp的开发工具1PhoneGap是一个免费开发的开发环境可以开发出夸平台的app,使用的html和javascript,可以使用加速剂࿰ ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • 本文介绍了django中视图函数的使用方法,包括如何接收Web请求并返回Web响应,以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
  • 本文介绍了腾讯最近开源的BERT推理模型TurboTransformers,该模型在推理速度上比PyTorch快1~4倍。TurboTransformers采用了分层设计的思想,通过简化问题和加速开发,实现了快速推理能力。同时,文章还探讨了PyTorch在中间层延迟和深度神经网络中存在的问题,并提出了合并计算的解决方案。 ... [详细]
  • 前言jQueryMobile入门经典毫无疑问,当前我们在获取、使用和分享网上的资源时,所采用的方式正在不断变得越来越移动化。每个月都会有数以千计的新智能 ... [详细]
  • App混合开发(英文名:HybridApp),是指在开发一款App产品的时候为了提高效率、节省成本即利用了原生的开发技术还应 ... [详细]
author-avatar
志信俊霖2542
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有