离子学入门：Cordova

您将要创造的

在“ Ionic入门”系列的最后一部分中，您将学习如何利用向您的应用程序添加设备硬件功能。 我们将研究如何使用地理定位等功能，并向您展示如何与库集成以完成我们的应用程序。 在开始之前，您将需要确保已为Ionic设置了机器 ，并确保还设置了特定于平台的工具。

项目文件

教程项目文件位于上 。 该应用程序的一般前提是它显示有关您附近设施的一些信息。 在本教程中，我们添加了查找当前位置并显示您附近的结果的功能。 您可以在此处查看工作示例 。

如果克隆项目，则还可以使用Git并运行git –b start编码。 本课程的编码从最后的帖子“ Ionic入门：导航”开始。 您还可以实时预览起点 。

设置科尔多瓦

在编写任何代码之前，我们需要设置我们的项目。 Ionic已经建立了一个基本的项目，但是我们需要自己初始化一些其他内容。

首先，我们需要安装库。 这是一个模块，它使使用一些最流行的插件更加容易。 （尽管并非支持所有插件。） Bower用于安装此依赖项。

其次，我们需要为项目添加一个平台。 这将是ios或 （或两者都是！），具体取决于您选择支持的平台。 我在示例中使用了ios ，但是您可以将其替换为以在该平台上实现相同的功能。

第三，我们将为安装地理定位插件 。 这样可以增强您的应用程序的功能，使其能够获取用户的当前位置（需要获得许可）。 您可以在上看到所有插件的列表，以及有关如何设置每个插件的详细信息。

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

node_modules/.bin/bower install ngCordova
ionic platform add ios # or android
ionic plugin add cordova-plugin-geolocation

完成后，我们需要将添加到应用程序中，以便Ionic可以识别它。 打开www / index.html文件，并在ionic..js文件之后添加以下行。

然后，我们需要更新www / js / app.js文件以包含模块。 第一行应更新为如下所示。

angular.module('App', ['ionic', 'ngCordova'])

既然我们已经更新了依赖关系，我们的项目就可以使用插件了。 下一步是设置一个新视图以开始使用它！

添加位置视图

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

用户位置数据是一个隐私问题，应用程序在收集时应格外小心，因此移动设备不允许应用程序自动访问地理位置数据。 应用必须请求权限（可以随时拒绝或撤销权限），因此在使用某些需要权限的插件时，请记住这一点。 （请谨慎使用该数据，并避免侵犯用户的隐私！）

首先，我们将为位置视图创建模板。 在www / views / / .html创建一个新文件，并包含以下内容。 （这在以前的教程中都应该很熟悉，但是实际上它创建了一个带有按钮的新视图，该按钮将调用控制器中的方法，接下来将对其进行定义。）

Set your current location, it is only accessed by pressing the button below.
Use Current Location

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

angular.module('App')
.config(function($stateProvider) {$stateProvider.state('location', {url: '/location',controller: 'LocationController as vm',templateUrl: 'views/location/location.html'});
})
.controller('LocationController', function($ionicLoading, $http, $state, Geolocation, $cordovaGeolocation, $ionicPopup) {var vm = this;
});

此时，我们有了一个新的位置视图，但是该按钮暂时还无法使用。 您可以使用ionic serve在浏览器中预览应用程序。 如果您转到http：// ：8100 /＃/ ，则应该能够看到该视图。

您会注意到控制器构造函数中的一项名为$的服务，该服务将为我们提供对用户位置数据的访问。 注入的其余服务仅用于处理与位置数据有关的业务逻辑。

在此应用中获取用户位置实际上涉及两个步骤，首先是从插件（仅返回纬度和经度值）获取地理位置数据，然后在 API中进行反向查找以找到当前位置（与我们的其他API调用配合使用）。

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

vm.useGeolocation = function() {$ionicLoading.show();$cordovaGeolocation.getCurrentPosition({timeout: 10000, enableHighAccuracy: false}).then(function (position) {var lat  = position.coords.latitude;var lng = position.coords.longitude;var url = 'https://civinfo-apis.herokuapp.com/civic/geolocation?latlng=' + lat + ',' + lng;$http.get(url).then(function(response) {$ionicLoading.hide();if (response.data.results.length) {Geolocation.data = response.data.results[0];$state.go('places');} else {$ionicPopup.alert({title: 'Unknown location',template: 'Please try again or move to another location.'});}}).catch(function(error) {$ionicLoading.hide();$ionicPopup.alert({title: 'Unable to get location',template: 'Please try again or move to another location.'});});});
};

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

然后，我们使用$服务，该服务具有一种名为的方法来获取当前位置。 我们指定选项，它们是合理的默认值。 您可以在文档中了解其他选项 。

方法返回一个 ，因此我们使用then来处理响应。 假设用户同意分享他们的位置，它将为我们提供一个包含纬度和经度坐标的对象。 然后，我们将使用这些值来调用API进行反向地址解析，以查找最近的位置。 如果失败，则catch处理程序将使用$显示失败通知。

$http服务用于查找反向地理编码，如果成功，我们需要检查是否返回了任何结果。 如果找到一个，则服务值将更新，并使用$state.go将用户重定向到位置列表。 否则，它将使用$显示警告，提示未找到任何地方。

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

首先打开www / js / app.js文件，然后将服务更新为以下内容。 这对于清除我们以前硬编码到的地理位置服务的默认值是必要的，并使摘要周期能够正确同步更改。

.factory('Geolocation', function() {return {data: {}};
})

然后，通过将最后一个配置行更新为以下内容，为应用程序应用程序修改默认视图。 这将使该应用开始在位置视图上启动。

.config(function($urlRouterProvider) {$urlRouterProvider.otherwise('/location');
})

最后，我们希望将位置视图调整为不再缓存（因此始终反映更新的位置），如果找不到位置，则重定向到位置视图。 打开www / views / / .html并更新第一行，如下所示。

然后打开www / views / / .js并更新控制器的启动以匹配以下内容。

.controller('PlacesController', function($http, $scope, $ionicLoading, $ionicHistory, $state, Geolocation, Types) {var vm = this;if (!Geolocation.data.geometry || !Geolocation.data.geometry.location) {$state.go('location');return;}var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.data.geometry.location.lat + ',' + Geolocation.data.geometry.location.lng;

我们会在控制器点火之前进行快速检查，以检测是否找到了地理位置，如果没有找到，我们将重定向到该位置以进行重置。

实际上，这也将在您的浏览器中起作用，因为该浏览器支持地理位置功能。 在下一节中，我们将简要讨论如何在模拟器中预览应用程序。

在仿真器中预览

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

使用ionic ios ，Ionic将启动模拟器并加载应用程序（与类似）。 如果有错误，则可能是您的计算机尚未针对您要模拟的平台进行完整设置。

该命令将引导平台操作系统的实际版本，并模拟非常逼真的设备。 对于没有可用于测试的实际设备的人，这是一种快速验证不同设备可与您的应用配合使用的好方法。

有时您可能需要重置模拟器，以确保所做的更改不会持久。 例如，如果您拒绝应用程序的地理位置许可，则可能必须找到设置以供以后使用，或者您可以重置模拟器以删除任何设置。

结论

在本教程中，我们研究了如何使用创建利用硬件功能和传感器的应用程序。 使用，可以在Ionic应用程序中轻松访问此信息。 现在，您可以使用设备功能，例如照相机，地理位置，指纹读取器和日历。 在可能的情况下，您应该利用库来简化集成，但是并未公开其他插件。

这也结束了《 Ionic入门》系列 。 您现在应该掌握基础知识，并能够继续使用Ionic。 如果您对更多内容感兴趣，请查看有关ionic框架的其他一些课程和教程。

翻译自: