Categories: Cordova 教程

Cordova 第一个应用程序

在上一个教程中,我们向您展示了如何安装Cordova并设置环境。一旦一切准备就绪,我们可以创建我们的第一个混合Cordova应用程序。

步骤1 – 创建应用程序

在命令提示符下打开要在其中安装应用程序的目录。我们将在桌面上创建它。

C:UsersusernameDesktop>cordova create CordovaProject io.cordova.hellocordova CordovaApp
  • CordovaProject 是创建应用程序的目录名称。

  • io.cordova.hellocordova 是默认的反向域值。 如果可能,您应该使用您自己的域值。

  • CordovaApp 是您应用的标题。

步骤2 – 添加平台

您需要在命令提示符下打开您的项目目录。在我们的示例中是 CordovaProject 你应该只选择你需要的平台。为了能够使用指定的平台,您需要安装特定的平台SDK。由于我们在Windows上开发,我们可以使用以下平台。我们还安装了Android SDK,因此我们只会为本教程安装Android平台。

C:UsersusernameDesktopCordovaProject>cordova platform add android

还有其他平台可以在Windows操作系统上使用。

C:UsersusernameDesktopCordovaProject>cordova platform add wp8

C:UsersusernameDesktopCordovaProject>cordova platform add amazon-fireos

C:UsersusernameDesktopCordovaProject>cordova platform add windows

C:UsersusernameDesktopCordovaProject>cordova platform add blackberry10

C:UsersusernameDesktopCordovaProject>cordova platform add firefoxos

如果你是在Mac上开发,你可以使用 –

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

您也可以从您的项目中删除平台使用 –

C:UsersusernameDesktopCordovaProject>cordova platform rm android

步骤3 – 构建和运行

在这一步,我们正在为指定的平台构建应用程序,所以我们可以在移动设备或模拟器上运行它。

C:UsersusernameDesktopCordovaProject>cordova build android

现在我们可以运行我们的应用程序。 如果你使用默认模拟器,你应该使用 –

C:UsersusernameDesktopCordovaProject>cordova emulate android

如果你想使用外部模拟器或真实设备,你应该使用 –

C:UsersusernameDesktopCordovaProject>cordova run android

注意 – 我们将使用genymotion android模拟器,因为它比默认的更快,更灵敏。 您可以在此处找到它。 您也可以使用实际设备进行测试,方法是从选项中启用 USB调试,然后通过USB电缆将其连接到计算机。对于某些设备,您还需要为特定设备安装USB驱动程序。

一旦我们运行应用程序,它将安装在我们指定的平台上。如果一切都完成没有错误,输出应该显示应用程序的默认开始屏幕。

在下一个教程中,我们将向您展示如何配置Cordova应用程序。

andy

前端小白,在Web176教程网这个平台跟大家一起学习,加油!

Share
Published by
andy

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

4 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago