Question

我是混合应用程序开发概念的新手，并不习惯任何脚本语言，如javascript。

我正在尝试通过cordova联系人选择器插件访问设备电话簿，但我没有收到任何错误，也没有获得所需的功能。

这是我的视图部分，我称之为插件api。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

   <link href="../lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">


<link href="../css/radio.css" rel="stylesheet">
  <!--<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>-->


 <!-- ionic/angularjs js -->
    <script src="../lib/ionic/js/ionic.bundle.js"></script>

    <!-- your app's js -->
    <script src="../js/emergency.js"></script>

    <script src="../js/services.js"></script>
 <script src="../js/ng-cordova.min.js"></script>


  </head>
  <body ng-app="emergency">



<ion-view title="My Profile - Emergency" ng-controller="SmsCtrl">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
        <form class="list">
            <label class="item item-input">
                <span class="input-label"></span><textarea placeholder=""> I am in danger</textarea>
            </label>
        </form>
        <div class="spacer" style="width: 285px; height: 34px;"></div>

        <button class="button button-light button-icon button-small icon ion-android-add-circle" ng-click="doContactPicker()">Emergency contacts</button>
<div id="contactFetched"></div>


    </ion-content>
</ion-view>


  </body>
</html>

我写的两个js文件是emergency.js和services.js

这是我的 emergency.js ，它由调用联系人选择器服务的控制器组成： -

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var finalContacts="";
var contactCount=0;
angular.module('emergency', ['ionic','ngCordova','NameService'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller('SmsCtrl', ['$scope','$ionicPlatform','$cordovaSms','ContactPicker', function ($scope, $ionicPlatform, $cordovaSms, ContactPicker) {
  console.log('enetered in ctrl');
  $scope.form={}
$scope.counter=contactCount;
/*
calling the contact picker service : ContactPicker which returns the merged contact details of the contacts picked
*/
$scope.doContactPicker=function() {
console.log(ContactPicker);
$scope.answer='answer';
$scope.answer =ContactPicker.pickedContact();

 $scope.$watch('answer', function() {
        document.getElementById("contactFetched").innerHTML =$scope.answer;
alert('sample alert displayed');
 });

};



/*
function to add contact data to the array of items
gentrating new div items on button click
*/
 $scope.users = [];

        $scope.add = function () {
          $scope.users.push({ 
            firstName: "",
            email: "",
            mobile: ""
          });
        };


/*
function to send sms using cordova message plugin api
input : form.number and form.message
*/
  $scope.sendSms = function(){
    console.log($scope.form.number);
    console.log($scope.form.message);
     var options = {
            replaceLineBreaks: false, // true to replace \n by a new line, false by default
            android: {
                intent: ''  // send SMS with the native android SMS messaging
                //intent: '' // send SMS without open any other app
            }
        };
    $ionicPlatform.ready(function(){
      $cordovaSms
      .send($scope.form.number, $scope.form.message, options)
      .then(function(result) {
        console.log(result);

      }, function(error) {
        console.log(error);
      })
    })
  }

}]);

最后是 services.js 文件

var finalContacts="";
var nameService=angular.module('NameService',[]);



nameService.service('getName',function() {
console.log("service created");
 this.nameFetched=function getUserName(c) {
console.log("inside picked contact");
    var name =c; 
    return name;
}
});



nameService.service('ContactPicker',function() {
console.log("service created");
this.pickedContact=function() {
console.log("inside picked contact");
//alert("inside");
    navigator.contacts.pickContact(function(contact){
//alert("inside");
//      console.log('The following contact has been selected:' + JSON.stringify(contact));
//alert(JSON.stringify(contact));
        //Build a simple string to display the Contact - would be better in Handlebars
        var s = "";
        //s += "<h2>"+getName.nameFetched('yatin data')+"</h2>";

        if(contact.emails && contact.emails.length) {
            s+= "Email: "+contact.emails[0].value+"<br/>";
        }

        if(contact.phoneNumbers && contact.phoneNumbers.length) {
            s+= "Phone: "+contact.phoneNumbers[0].value+"<br/>";
        }

        if(contact.photos && contact.photos.length) {
            s+= "<p><img src='"+contact.photos[0].value+"'></p>";
        }

        finalContacts+=s;

        //$("#selectedContact").html("hello world");

    },function(err){
        alert('Error: ' + err);
        console.log('Error: ' + err);

    });
return finalContacts;
}

});

控件在此函数调用navigator.contacts.pickContact(function(contact){

上中断

使用离子服务我在浏览器上测试了它，但由于选择的联系功能可以在设备上运行，因此我在浏览器中收到以下错误： -

TypeError：无法读取未定义
的属性'pickContact'

但是使用设备调试选项，我无法访问navigator.contacts.pickContact（函数（联系人）内部{即，此处不会显示警报。请帮我解决这个问题。感谢

Answer 1

首先，对cordova.js的引用在哪里？那就是：

<script src="cordova.js"></script>

然后，您是否正确安装了cordova-plugin-contacts？

Cordova插件仅在设备上提供，而不是在浏览器中提供，因此您必须在设备上安装内置应用程序，将其连接到计算机并通过usb进行调试（具体取决于具体平台iOS / Android / ...）。

Answer 2

我不确定您是否知道如果您想要一个插件，则需要安装它。因此，要安装所需的插件（ cordova-plugin-contacts ），您需要使用cordova安装它。这将在当前项目的plugins文件夹中添加插件。 plugins文件夹位于项目的根目录中。在里面你应该看到一个名为 cordova-plugin-contacts 或 org.apache.cordova.contacts 的文件夹。否则你应该运行以下命令。

cordova plugin add cordova-plugin-contacts

You can find more info about installing the cordova-plugin-contacts here.

联系人插件cordova没有接收联系人也没有给出任何错误？

2 个答案: