PhoneGap之hello world(附Android支持配置)

最近可能需要做Hybrid的开发,所以浏览了一下几个热门的框架。
React Native当然是很流行啦。但是前阵子的许可协议的问题总让人不踏实。
所以还是选择了完全开源的PhoneGap。
实际开发中这些框架各有各的好处吧,慢慢研究了。
以下基于windows环境。


首先当然是上PhoneGap官网下载客户端了。(当然你也得装JDK并配置好相应的环境变量,不过这个只要你不是第一天做开发,就应该已经有了的样子,就不多说了。)

下载PC端和手机端的两个应用并安装。

他们分别长这样:


image.png

和这样:


dev-app-enter-add.png

接下来新建一个项目

点击加号按钮选择项目类型


image.png

选择了项目类型后要设置项目目录、名称、包名。(要注意包名也就是ID的规范,你将来可是有可能要android和iOS跨平台的)


image.png

项目跑起来了!So easy!

image.png

这里要注意的就是底部的那个地址。
直接在浏览器里输入这个地址就可以预览项目。


image.png

另外,在手机端应用的那个Server Address框里输入这个地址也可以在手机端预览项目了。(当然你们得在同一个网关)


dev-app-preview.jpg

以上操作都很傻瓜,现在重点来了,具体怎么才能进行开发呢?

首先是web部分

这块的配置很简单,就是基本不用配置。
sublimetextATOM之类的前端IDE编辑相关html、css和js文件就好了。
需要注意的是目录结构

1.jpg

www目录下的文件就是我们的web部分代码。
platforms\browser\目录下也有个www目录,上面位置的代码修改完后需要在PhoneGap中重新run一下,在这个www目录中就会生成相应的生产文件。

接下来我们添加一下Android平台支持。

先配置一下Android sdk的系统环境变量,比如:

ANDROID_HOME=D:\adt-bundle-windows-x86_64-20131030\sdk

然后要安装一下Node.js,安装完毕后在命令行执行node -v看看是否成功了。
Node.js是用来在命令行中安装phonegap的:

npm install -g phonegap

等啊等……
完毕后phonegap -v一下看看版本,确认是否安装成功。
cd到你的项目目录下,再来装个cordova库(其实Cordova才是真正的核心,js就靠它来调用硬件api了。)

phonegap plugin add cordova-plugin-media --save

还是在项目目录下,添加平台支持:

phonegap platform add android browser

再次等啊等……
完事后发现项目目录的platforms目录下会出现android目录和browser目录。(browser目录其实之前创建项目的时候就存在了)
从Android Studio中选择android目录打开项目:

image.jpg

接上你的手机run一下,应用就安装到手机上了。(需要注意的是web部分代码修改过的话,需要先在PhoneGap中重新run一下,不然从platforms\browser\www目录中取的文件就还是旧的。我还没理解这是个什么流程。)

好了,web部分和native部分的工具都准备好了,继续搬砖吧,Good luck!

推荐阅读更多精彩内容