Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Ionic
Code

Ionic入门:Cordova

by
Difficulty:BeginnerLength:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by Qiang Ji (you can also view the original English article)

Final product image
What You'll Be Creating

Ionic入门系列的最后一部分中,你将了解如何利用Cordova为你的应用添加设备硬件功能。 我们将介绍如何使用地理位置等功能,并向你展示如何与ngCordova库集成以完成我们的应用程序。 在我们开始之前你需要确保已经为Ionic设置了你的计算机,并确保你还设置了特定于平台的工具。

项目文件

GitHub上可找到教程项目文件。 此应用程序的基本用途是,它显示一些关于你附近设施的信息。 在本教程中,我们使此应用程序拥有了查找当前位置并显示附近结果的能力。 你可以在这里看到工作示例

如果你克隆此项目,你也可以使用Git和运行git checkout -b start来接着编写代码。 这个课程的编码从最后一篇教程(Ionic入门:导航)结束处开始。 你还可以预览此起始点

设置Cordova

在我们编写任何代码之前,我们需要设置我们的项目。 Ionic已经建立了一个基本的Cordova项目,但是我们需要自己初始化一些额外的东西。

首先,我们需要安装ngCordova库。 这是一个Angular模块,它让使用一些最流行的Cordova插件变得更容易。 (虽然不是所有的插件ngCordova都支持。)Bower 就是用来安装此依赖关系的。

其次,我们需要为我们的项目添加一个平台。 这将是iosandroid(或两者都添加!),这取决于你选择支持的平台。 我在我的例子中使用了ios,但你可以用android替换它,以在android里实现相同的应用程序。

第三,我们将为Cordova安装geolocation插件。 这可以增强应用程序获取用户的当前位置(需要权限)的能力。 您可以在https://cordova.apache.org/plugins/查看所有插件的目录,以及如何设置每个插件的详细信息。

以下命令应从项目的根目录运行,以执行这三个设置步骤。

一旦完成,我们需要给应用程序添加ngCordova,以便它被Ionic识别。 打开www/index.html文件,并在ionic.bundle.js文件后添加下面几行代码。

然后我们需要更新www/js/app.js文件来收入ngCordova模块。 第一行应该被更新,显示如下。

现在我们已经更新了依赖,我们的项目已经准备好使用geolocation插件。 下一步是设置一个新的视图并开始使用它!

添加Location视图

我们将为该应用创建一个新的首页。 此屏幕显示有关使用用户当前位置查找附近地点的消息。 他们将点击一个按钮以确认他们希望此应用访问他们的位置,然后查看反映其当前位置的地点目录。

用户位置数据有关隐私,应用程序在收集时应小心,所以移动设备不允许应用自动访问地理位置数据。 应用程序必须请求权限(这可以被随时拒绝或撤消),所以在使用需要权限的某些插件时,你需要牢记这一点。 (仔细使用该数据,并避免违反用户的隐私!)

首先,我们将为location视图创建模板。 创建一个新文件www/views/location/location.html,并包括以下内容。 (我们应该从前面的教程中熟悉这个,但它本质上是创建一个新的视图与一个按钮,调用我们的控制器中的一个方法,我们将在下面定义这个方法。)

我们现在将创建控制器外壳,然后添加一个方法来处理用户位置的获取。 创建另一个新文件www/views/location/location.js,并包含以下代码。 请务必在www/index.html文件中加入此文件的链接。

当下,我们有一个新的location视图,但该按钮还不能工作。 你可以通过运行ionic serve从你的浏览器中预览该应用程序。 如果你去http://location:8100/#/location,你应该能看到这个视图。

你会注意到在控制器构造函数中有一个名为$cordovaGeolocation的服务,它将向我们提供对用户位置数据的访问。 其余的服务注入只是为了处理与位置数据相关的业务逻辑。

在此应用中获取用户的位置实际上涉及两个步骤,首先是从Cordova插件获取地理位置数据(仅返回纬度和经度值),然后在Google Geocode API中执行反向查找以找到当前的位置(这与我们的其他API调用工作良好)。

将以下方法添加到控制器,我们将在下面详细介绍。

第一件事是使用$ionicLoading服务在检测到当前位置时显示加载指示器。

然后我们使用$cordovaGeoposition服务,它有一个名为getPosition的方法,这是用来获取当前位置的。 我们指定选项,这是合理的默认值。 你可以阅读文档中的其它getPosition选项

getPosition方法返回一个promise,所以我们使用then来处理响应。 假设用户同意共享他们的位置,它会返回给我们一个对象,这包含纬度和经度的坐标。 然后,我们将使用这些值调用API执行反向地址解析,以查找最接近的位置。 如果它失败了,缓存处理程序将使用$ionicPopup显示一个失败的警报。

$http服务用于查找反向地址,如果它成功,我们需要检查是否返回任何结果。 如果找到一个,则更新Geolocation服务值,并使用$state.go将用户重定向到地点目录。 否则,它使用$ionicPopup显示一条警告,说找不到任何地方。

这就是我们必须做的,以用来启用在我们的应用程序中的设备的地理位置功能。 但是,我们仍然需要对location视图和app.js文件进行一些小的调整。

首先打开www/js/app.js文件并将Geolocation服务更新为以下内容。 这有必要去清除我们以前硬编码到芝加哥地理位置服务的默认值,并启用消化周期来正确地同步更改。

然后,通过将最后一个配置行更新为以下内容来修改应用程序的默认视图。 这将使应用程序在location视图上被启动。

最后,我们要调整location视图,使其不再缓存(因此始终反映更新的位置),如果找不到位置,则重定向到location视图。 打开www/views/places/places.html并更新第一行代码,如下。

然后打开www/views/places/places.js并更新控制器的开始部分以匹配以下内容。

我们在控制器启动之前进行快速检查,以检测是否找到地理位置,如果没有找到,我们将重定向到该位置去重置它。

这实际上也可在你的浏览器中工作,因为浏览器支持地理位置功能。 在下一节中,我们将简要介绍如何在模拟器中预览应用程序。

在模拟器中预览

Ionic CLI有一个命令,可以让你轻松地在设备的软件版本中模拟应用程序的使用。 并不是所有的硬件功能都可用,但许多都可以被模拟,包括地理位置。

运行ionic emulate ios,Ionic将启动模拟器并加载应用程序(类似于Android)。 如果你看到有报错,可能是你的机器对你试图模拟的平台尚未完全地设置好。

此命令将启动平台操作系统的真实版本,并模拟一个非常现实的设备。 对于没有实际设备进行测试的用户,这是一种快速验证不同设备与你应用程序配合使用的好方法。

你可能需要在一些时候重置模拟器,以确保你所做的更改会体现在模拟器里。 例如,如果你拒绝应用程序的地理位置权限,你将需要找到设置页面来允许以后再修改,或者你可以重置模拟器来删除所有的设置。

结论

在本教程中,我们讨论了如何使用Cordova创建一个能利用硬件功能和传感器的应用程序。 使用ngCordova,很容易在Ionic应用程序中访问此信息。 你现在可以访问设备功能,如相机,地理位置,指纹读取器和日历。 如果可能,你应该利用ngCordova库来使与硬件集成变的容易,但还有其他Cordova插件并没有包含在ngCordova库中。

这也是Ionic入门系列的一个总结。 你现在应该掌握了Ionic的基本知识,并能够运用它进行更多的开发。 如果你有更多的兴趣,请查阅我们的其他课程和Ionic框架的教程。


Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.