Phoegap(cordova)开发跨平台app之HelloWorld

PhoneGapcordova)的hellworld程序

1           安装JDK 配置环境变量:

2           安装android-sdk 配置环境变量:

set Path=E:\android-sdk\platform-tools;E:\android-sdk\tools;

3           安装Git.exe配置环境变量

set Path=E:\Program Files\Git\cmd

4           安装Apache-ant-???-bin.zip 配置环境变量

set Path=C:\apache-ant\bin;

5           安装Eclipse

6           安装phonegap

下载nodejs

npm install –g phonegap(在线安装)

HelloWord程序的建立:

1     新建一个文件夹    存放android程序 例如:pg

2     cd pg      如若要切换到E盘,直接E:回车即可

Phonegap create  photos(文件夹名) com.itcast(包名)  项目名

Cd photos

Phonegap build android        这一步会在photos文件夹下的platforms里创建一个android文件夹,这个就是我们的android项目,有其他平台的sdk,也可以创建其他平台的项目,相应的也会生成其他的项目的文件夹

3     assets的www文件夹里放的是网页

Bin  编译后生成的内容

Ccordova PhoneGap的库文件

Gen 静态的资源文件

Libs

Platform_www .js文件

Res 资源文件 里面有一个xml文件夹里下面有个config.xml文件

注意配置:<access origin="*" />

待会如果要使用系统的一些硬件功能,应该在里面配置相应

的插件(后面会介绍)

Src  源代码

AndroidManifest.xml 系统级别的配置文件 配置权限很关键

4     将我们创建的项目在eclipse里打开(如果发现有乱码问题,请点击project——>properties下的编码设置)

新建Project platforms里的就是android项目 打开

Eclipse会自动加载这些插件run 提示要选择的部署的设备

如果发现在eclipse里无法打开www文件夹和Res里的config.xml文件请选择files

里的属性的Resource里的resource filters设置其属性为空

5         在vs里打开www网站     进行编辑 编辑完成后保存

6     eclipse f5刷新

7     使用phonegap 引用phonegap.Js文件

8     在phoegap3.0后所有的插件都是要自己下的

因为插件是需要配置权限的,用一个插件就需要开启一个权限

因此需要那个插件就自己配置这个插件

配置插件的两种方法:

1           直接在网上找到所有的插件包自己配置,较复杂,这里不建议使用该方法

2           在自己建立的phonegap项目的目录下,执行命令,注意这些命令的执行一定要联网,phonegap会自动帮我们在项目里配置好相应的文件

Basic device information (Device API):

phonegap plugin add org.apache.cordova.device

Network Connection and Battery Events:

phonegap plugin add org.apache.cordova.network-information

phonegap plugin add org.apache.cordova.battery-status

Accelerometer, Compass, and Geolocation:

phonegap plugin add org.apache.cordova.device-motion

phonegap plugin add org.apache.cordova.device-orientation

phonegap plugin add org.apache.cordova.geolocation

Camera, Media playback and Capture:

phonegap plugin add org.apache.cordova.camera

phonegap plugin add org.apache.cordova.media-capture

phonegap plugin add org.apache.cordova.media

Access files on device or network (File API):

phonegap plugin add org.apache.cordova.file

phonegap plugin add org.apache.cordova.file-transfer

Notification via dialog box or vibration:

phonegap plugin add org.apache.cordova.dialogs

phonegap plugin add org.apache.cordova.vibration

Contacts:

phonegap plugin add org.apache.cordova.contacts

Globalization:

phonegap plugin add org.apache.cordova.globalization

Splashscreen:

phonegap plugin add org.apache.cordova.splashscreen

Open new browser windows (InAppBrowser):

phonegap plugin add org.apache.cordova.inappbrowser

Debug console:

phonegap plugin add org.apache.cordova.console

9     开发完成后的打包:

注意事项一定要是的最外层的www文件夹与android项目里的assests文件夹下的

www文件夹里的内容相同

10   dos切换到phonegap项目,执行phonegap build android 在android项目的ant-build

文件夹下会有相应的android apk

时间: 2024-12-18 12:52:23

Phoegap(cordova)开发跨平台app之HelloWorld的相关文章

Sublime用户如何快速高效开发跨平台App

2015年9月15日,APICloud举办了一周年开源分享会,发布开源插件支持Sublime用户开发跨平台App,APICloud 开源技术负责人周兴海分享了Sublime关于插件方面相关的内容. Sublime是一款关注度很高的的开发工具,有以下几个特点: 主流前端开发编辑器 体积较小,运行速度快 文本功能强大 支持编译功能且可在控制台看到输出 内嵌python解释器支持插件开发以达到可扩展目的 Package Control:ST支持的大量插件可通过其进行管理 接着,周兴海对APICloud

开发者技术分享日:如何快速开发跨平台App

活动概况 时间:2014年12月20日14:00-17:00 地点:车库咖啡(北京市海淀西大街48号鑫鼎宾馆二层) 主办:APICloud 活动背景 在这个移动.云.大数据的时代背景下,人人口中都离不开“App”这个热门名词,然而如何降低App开发难度,减少成本,提高效率成为创业者和开发者尤为关注的内容.作为Web圈里的人想进来,但无奈技术门槛和人力成本太高:作为Native开发圈里的人又想出去,但无奈WebApp体验太差,面对当前的现状如何轻松突破App开发难题是这次沙龙交流的主题. 这次沙龙

Crosswalk+Cordova开发安卓app之 JavaScript调用java (附源代码下载)

 Crosswalk+Cordova开发安卓app之 JavaScript调用java (附源代码下载) 定义js回调接口 /** * js回调接口 * * @author graceup * */ public class JsInterface { public JsInterface() { } @JavascriptInterface public String sayHello() { // TODO do more thing return "Hello World!";

带你从零学ReactNative开发跨平台App开发(二)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 上一篇教程我们一步步配置了开发RN的必备环境,这篇文章我们依然配置环境,昨天配置的是CRNA模式开发的环境,我们今天配置原生混合开发环境. 第一次写系列教程,写的不好,多多担待,有错误欢迎评判指正. 说一下这个系列教程的目标吧,实战一个CRNA模式开发的跨平台App打包并发布,并将这个App用原生混合开模式实现并打包发布. 废话不多说开始撸码,你准备好了吗? 环境配置 配置原生混合模式开发的环

带你从零学ReactNative开发跨平台App开发(五)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学ReactNative开发跨平台App开发(五) 其实写到第三篇的时候,再写第四篇,我突然感到再往后写,好 艰难 啊,坚持,我坚持写,坚持就是胜利,有人说你写这干什么,我说爱好而已,就好比有的人喜欢打王者,

带你从零学ReactNative开发跨平台App开发(十)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学ReactNative开发跨平台App开发(五) 带你从零学ReactNative开发跨平台App开发(六) 带你从零学ReactNative开发跨平台App开发(七) hot:更多>> 贴一个交流群的二

带你从零学ReactNative开发跨平台App开发(十三)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学ReactNative开发跨平台App开发(五) 带你从零学ReactNative开发跨平台App开发(六) 带你从零学ReactNative开发跨平台App开发(七) hot:更多>> 好久没写了,最近

使用Ionic + Apache Cordova开发跨平台混合型的移动应用

JavaScript 写多了,要想真正提高js水平,研究其他js框架源码是不错的选择.Github上大部分都是js.css相关的项目,可以有目的性的 check out 下来,研读研读,还是非常收益的,跟随nb的人,也会慢慢变的nb. 场景:有一个朋友,他公司是做移动应用开发的,3个安卓开发人员,3个 ios,然后是 java 开发,美工 ,10多个人的公司,主要是以接项目为主,一个项目(电商.微信.聊天 类型的)大概在20万左右, 差不多1个半月 做完(代码质量能不能保证,不知道,不过我觉得开

Sublime插件库新成员基于APICloud快速开发跨平台App

互联网时代强调用户体验,那什么是HTML5跨平台App开发者的编程体验?"不剥夺.不替换开发者喜欢的开发工具,就是人性化的用户体验",APICloud给出了这样的答案! 重磅发布"多开发工具支持策略" "如果,你以为此次分享会APICloud只是讲解Eclipse开源插件代码经验,那就大错特错了!"APICloud CEO刘鑫以调侃的话进行了开场. 经过一年的上线摸索,APICloud团队充分的认识到"剥夺开发者已经习惯的开发工具,替换