PhoneGap 3 与 IntelliJ IDEA 环境配置教程

什么是 PhoneGap 3

手机里的网页不能实现 Native APP 的一些功能和权限, Native APP 不如 HTML5 JavaScript CSS 那么灵活.
PhoneGap 就是一个中间件,链接 Native App 和 Web App 的桥梁,搞出来的是典型的 Hybrid App.
之前一直被人诟病的是性能不如原生的好,但如果对一些动画效果要求不高的 App ,开发成本大幅降低
更何况最新的 3 版本性能越来越好

什么是 IntelliJ IDEA

我最爱的 IDE.
IntelliJ IDEA, PHPStrom, WebStorm 前端开发指南.

什么是环境变量

例如一个程序在 D:\Dropbox\dev-tools\nodejs ,
我执行 nodejs 的时候必须要在 D:\Dropbox\dev-tools\ 这个目录下,
或者输入完整的路径 D:\Dropbox\dev-tools\nodejs 才能执行

如果把 D:\Dropbox\dev-tools\ 添加到环境变量 PATH 里面,任意地点执行 nodejs 这个命令都会去 PATH 里扫一遍,就实现了一人结扎,全家光荣

环境需求

常用的路径配置到环境变量里
phonegap-1

计算机>属性>高级系统设置>环境变量

大概要设置常用的

ANDROID_SDK_HOME 值 D:\Dropbox\dev-tools\android-sdk
JAVA_HOME 值 D:\Dropbox\dev-tools\Java\jdk1.6.0_45
PATH 值 D:\Dropbox\dev-tools\apache-ant-1.9.2\bin;  
        D:\Dropbox\dev-tools\android-sdk\platform-tools;
        D:\Dropbox\dev-tools\android-sdk\tools;
        D:\Dropbox\dev-tools\nodejs;
        C:\Users\bigCat\AppData\Roaming\npm;
        %JAVA_HOME%\bin;

安装 PhoneGap

因为我们把 npm 添加到了环境变量 PATH 里,所以随便开个 cmd 执行

npm install -g phonegap

就安装好了, -g 代表这是个全局的应用,实际上就丢到了 C:\Users\bigCat\AppData\Roaming\npm 目录,还记得刚添加到了 PATH 咩.

phonegap-2

创建第一个项目

先送个小技巧,按住 Shift 右键点空白会有个在此处打开命令窗口 phonegap-3

$ phonegap create helloworld
$ cd helloworld
$ phonegap build android

phonegap-4

这个时候 helloworld\platforms\android 目录下就有一个完整的项目结构了

导入项目到 IntelliJ IDEA

phonegap-5

phonegap-6

phonegap-7

phonegap-8

phonegap-9

phonegap-10 基本都是智能识别,OK下一步无脑点 phonegap-11

这一步里需要注意,如果左侧没有 Android SDK 的话,就点绿色加号指定一下 Android SDK 的目录

phonegap-12

到这里为止就已经全部配置好了, 左侧的 www 目录里就是你熟悉的 HTML CSS JavaScript,
对着 PhoneGap3 官方文档开搞吧

额外的配置

phonegap-13

phonegap-14 例如你想直接编译到手机里(模拟器这够慢的),那么如图配置 phonegap-15 IntelliJ IDEA 也集成了 DDMS 读取日志什么的更方便啦

祝 App 大卖~

7 评论

添加您的 →

发表回复