手把手教你玩转cordova(PhoneGap)

Hello Cordova

前言

在上一节中我们已经搭建好了cordova的开发环境。现在,我们就来创建我们的第一个cordova应用:Hello Cordova。

一、创建项目

双击电脑桌面上的“PhoneGap Desktop”以启动在上一节中安装的PhoneGap PC端。

PhoneGap PC端启动后应是这个样子的:

点击左边的“+”,再点击“Create new PhoneGap project...”:

然后在“Local Path”下选择项目保存的目录,在“Name”下填写项目的名字,“ID”是可选的,它是你的应用在App商店中的唯一标识符,推荐使用你的域名(将域名的后缀移到前面):

填写完毕后,点击“Create project”以创建项目。项目创建成功后,我们的PhoneGap PC端应该是这样子的:

二、编辑文件

项目创建成功后,在我们选择的项目存放目录中就多了一个“HelloCordova”文件夹,该文件夹中存放的就是PhoneGap自动为我们创建的所有文件,我们自己创建的文件也将存放在此目录中。

打开该文件夹,其中有一个“www”文件夹,打开它,其中有一个“index.html”文件,该文件就是我们项目的起始文件,用你喜欢的任何编辑工具打开它,删掉所有的注释并编辑它,使其最终成为以下的样子:

三、添加Android平台

默认情况下“PhoneGap”并没有为我们创建任何平台的应用,若想创建Android或iOS平台的应用,需使用命令去创建。在此我们为我们的项目添加一个Andorid平台的应用。

打开命令行窗口,并进入我们的项目文件夹:

E:
cd E:\MyDocuments\Apps\HelloCordova

输入以下命令并回车以添加Android平台:

cordova platform add android

此过程可能需要一点时间,稍等片刻,待命令执行完毕后,在我们的项目文件夹下的“platforms”文件夹下便会多出一个文件夹“android”。

同理,如果想添加iOS平台,则执行的命令应该是:

cordova platform add ios

四、在真实设备上运行

准备一部Android手机,并使其与你的开发电脑处于同一个局域网中(最简单的方式是让你的手机连接到开发电脑所在局域网的WIFI),你也可以将手机的数据线连接到你的电脑后,在你的手机端打开“USB共享网络”。

PhoneGap PC端中点击我们项目后面的“启动铵钮”:

项目启动后PhoneGap PC端应该是类似下面的样子:

注意底部的IP地址,就是你电脑的IP,后面的“3000”是项目运行的默认端口。

启动手机端的PhoneGap,并将IP地址和端口改为上面PhoneGap PC端显示的IP地址和端口:

然后点击“Connect”,稍等片刻后我们的“HelloCordova”应用就会在手机端运行了:

如果你的手机中出现类似这样的提示:

则表示你的手机无法连接到你的电脑。

如果你是使用WIKI连接,请确保你的手机与电脑处于同一个局域网内。

如果你是使用USB共享网络,在你电脑的“网络和共享中心”应该会看到多出一个网络连接。如果没有,则表示没有共享成功。不同的手机启用USB共享网络的方法可能会有所不同。

也有可能是你电脑的防火墙阻止了来自外部的连接。你可以设置安全规则来解决。如果不懂如何设置,可直接在 控制面板 -> 系统安全 -> Windows防火墙 -> 启用或关闭Windows防火墙 里关闭防火墙。

五、打包

若要使其他用户也能安装我们开发的应用,则需将我们开发的应用打包。

和“步骤三”一样,打开命令行窗口,并进入我们的项目文件夹:

E:
cd E:\MyDocuments\Apps\HelloCordova

然后输入以下命令并回车:

cordova build android

此过程可能需要一点时间。编译完成后,在 platforms -> android -> build -> outputs -> apk 目录下会多出两个 .apk 文件,我们需要的是文件名中不带“-unaligned”的那个,这就是我们的App的Android平台的安装包。

如果编译过程中遇到类似以下这样的错误:

:mergeDebugResourcesAAPT err(Facade for 930892549): libpng error: Read Error FAILED

则可能是gradle的版本问题,打开文件 platforms -> android -> build.gradle,找到以下这段代码:

task wrapper(type: Wrapper) {
gradleVersion = '2.2.1'
}

将它改成:

task wrapper(type: Wrapper) {
gradleVersion = '2.2.1'
}

注意,这里的“gradleVersion”的值取决于你的App所使用的gradle的版本。打开文件夹 platforms -> android -> .gradle,里面会有一个名字类似于“2.2.1”的文件夹,这个就是我们的App所使用的gradle的版本号。

修改完毕后,打开PhoneGap PC端,启动要编译的项目,然后再次在命令行中执行“cordova build android”进行编译,这样问题应该就能解决了。

经验证,以上解决问题的方法只对RP值像我这么高的人才有效,而RP值稍稍低一点的人可以尝试一下以下方法:

点击这里下载一个压缩包,解压后会得到一个包含了多张图标的名叫“android”的文件夹,用这个文件夹替换掉你项目中的 www -> res -> screen -> android 文件夹,然后再次编译。

最后,来个广告

若你觉得此文不错,请分享,若认为尚需改进,请点讚。

结束语