Question

我已完成本教程 http://coenraets.org/blog/phonegap-tutorial/。它适用于搜索员工，也可以为单个员工呈现视图。但是，位置，联系人和相机无法正常工作。它只是说... .API不支持。我使用了phonegap构建并在我的设备中安装了apk。

我还尝试过添加插件摄像头，控制台，设备，联系人，对话框和地理位置，并运行以下命令

cordova build

cordova模拟android

但仍然不在我的路上？

这是我的所有代码

的index.html

<html>
    <head>
        <script src="css/source-sans-pro.js"></script>
        <link href="css/styles.css" rel="stylesheet"/>
    </head>
    <body>
        <script id="home-tpl" type="text/x-handlebars-template">
            <div class='header'><h1>Home</h1></div>
            <div class='search-bar'><input class='search-key' type="search"/></div>
            <div class="scroll"><ul class='employee-list'></ul></div>
        </script>
        <script id="employee-li-tpl" type="text/x-handlebars-template">
            {{#.}}
            <li><a href="#employees/{{this.id}}">{{this.firstName}} {{this.lastName}}<br/>{{this.title}}</a></li>
            {{/.}}
        </script>

        <script id="employee-tpl" type="text/x-handlebars-template">
            <div class='header'><a href='#' class="button header-button header-button-left">Back</a><h1>Details</h1></div>
            <div class='details'>
                <img class='employee-image' src='img/{{firstName}}_{{lastName}}.jpg' />
                <h1>{{firstName}} {{lastName}}</h1>
                <h2>{{title}}</h2>
                <span class="location"></span>
                <ul>
                    <li><a href="tel:{{officePhone}}">Call Office<br/>{{officePhone}}</a></li>
                    <li><a href="tel:{{cellPhone}}">Call Cell<br/>{{cellPhone}}</a></li>
                    <li><a href="sms:{{cellPhone}}">SMS<br/>{{cellPhone}}</a></li>
                    <li><a href="#" class="add-location-btn">Add Location</a></li>
                    <li><a href="#" class="add-contact-btn">Add to Contacts</a></li>
                    <li><a href="#" class="change-pic-btn">Change Picture</a></li>
                </ul>
            </div>
        </script>



        <script src="lib/jquery-1.8.2.min.js"></script>
        <script src="lib/iscroll.js"></script>
        <script src="lib/handlebars.js"></script>
        <script src="js/storage/memory-store.js"></script>
        <script src="js/HomeView.js"></script>
        <script src="js/EmployeeView.js"></script>
        <script src="js/main.js"></script>

        </body>
</html>

main.js

var app = {
   initialize: function() {
        var self = this;
        this.detailsURL = /^#employees\/(\d{1,})/;
        this.registerEvents();
        this.store = new MemoryStore(function() {
            self.route();
        });
   },
    showAlert: function (message, title) {
        if (navigator.notification) {
            navigator.notification.alert(message, null, title, 'OK');
        } else {
            alert(title ? (title + ": " + message) : message);
        }
    },

    registerEvents: function() {
        $(window).on('hashchange', $.proxy(this.route, this));
        var self = this;
        // Check of browser supports touch events...
        if (document.documentElement.hasOwnProperty('ontouchstart')) {
            // ... if yes: register touch event listener to change the "selected" state of the item
            $('body').on('touchstart', 'a', function(event) {
                $(event.target).addClass('tappable-active');
            });
            $('body').on('touchend', 'a', function(event) {
                $(event.target).removeClass('tappable-active');
            });
        } else {
            // ... if not: register mouse events instead
            $('body').on('mousedown', 'a', function(event) {
                $(event.target).addClass('tappable-active');
            });
            $('body').on('mouseup', 'a', function(event) {
                $(event.target).removeClass('tappable-active');
            });
        }

    },
    route: function() {
        var self = this;
        var hash = window.location.hash;
        if (!hash) {
            if (this.homePage) {
                this.slidePage(this.homePage);
            } else {
                this.homePage = new HomeView(this.store).render();
                this.slidePage(this.homePage);
            }
            return;
        }
        var match = hash.match(this.detailsURL);
        if (match) {
            this.store.findById(Number(match[1]), function(employee) {
                self.slidePage(new EmployeeView(employee).render());
            });
        }
    },
    slidePage: function(page) {

        var currentPageDest,
        self = this;

        // If there is no current page (app just started) -> No transition: Position new page in the view port
        if (!this.currentPage) {
            $(page.el).attr('class', 'page stage-center').attr('id', 'homePage');;
            $('body').append(page.el);
            this.currentPage = page;
            return;
        }

        // Cleaning up: remove old pages that were moved out of the viewport
        $('.stage-right, .stage-left').not('#homePage').remove();

        if (page === app.homePage) {
            // Always apply a Back transition (slide from left) when we go back to the search page
            $(page.el).attr('class', 'page stage-left');
            currentPageDest = "stage-right";
        } else {
            // Forward transition (slide from right)
            $(page.el).attr('class', 'page stage-right');
            currentPageDest = "stage-left";
        }

        $('body').append(page.el);

        // Wait until the new page has been added to the DOM...
        setTimeout(function() {
            // Slide out the current page: If new page slides from the right -> slide current page to the left, and vice versa
            $(self.currentPage.el).attr('class', 'page transition ' + currentPageDest);
            // Slide in the new page
            $(page.el).attr('class', 'page stage-center transition');
            self.currentPage = page;
        });

    }


};

app.initialize();

HomeView.js

var HomeView = function(store) {
   this.initialize = function() {
        // Define a div wrapper for the view. The div wrapper is used to attach events.
       this.el = $('<div />');
       var that = this;
       this.el.on('keyup', '.search-key', function(){
           that.findByName();
       });
    };

    this.initialize();

    this.render = function() {
        this.el.html(HomeView.template());
        return this;
    };

   this.findByName = function() {
        store.findByName($('.search-key').val(), function(employees) {
            $('.employee-list').html(HomeView.liTemplate(employees));
            if (self.iscroll) {
                console.log('Refresh iScroll');
                self.iscroll.refresh();
            } else {
                console.log('New iScroll');
                self.iscroll = new iScroll($('.scroll', self.el)[0], {hScrollbar: false, vScrollbar: false });
            }
        });
   };
}

HomeView.template = Handlebars.compile($("#home-tpl").html());
HomeView.liTemplate = Handlebars.compile($("#employee-li-tpl").html());

EmployeeView.js

var EmployeeView = function(employee) {
    this.initialize = function() {
        this.el = $('<div/>');
        var that=this;

        this.el.on('click', '.add-location-btn',function(event){
             that.addLocation(event);
        });


        this.el.on('click', '.add-contact-btn',function(event){
            that.addToContacts(event);
        });

        this.el.on('click', '.change-pic-btn',function(event){ 
            that.changePicture(event);
        });
    };

    this.initialize();
    this.render = function() {
        this.el.html(EmployeeView.template(employee));
        return this;
    };

    this.addToContacts = function(event) {
        event.preventDefault();
        console.log('addToContacts');
        if (!navigator.contacts) {
            app.showAlert("Contacts API not supported", "Error");
            return;
        }
        var contact = navigator.contacts.create();
        contact.name = {givenName: employee.firstName, familyName: employee.lastName};
        var phoneNumbers = [];
        phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
        phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true); // preferred number
        contact.phoneNumbers = phoneNumbers;
        contact.save();
        return false;
    };

    this.changePicture = function(event) {
        event.preventDefault();
        if (!navigator.camera) {
            app.showAlert("Camera API not supported", "Error");
            return;
        }
        var options =   {   quality: 50,
                            destinationType: Camera.DestinationType.DATA_URL,
                            sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album
                            encodingType: 0     // 0=JPG 1=PNG
                        };

        navigator.camera.getPicture(
            function(imageData) {
                alert("this is image data::"+imageData)
                $('.employee-image', this.el).attr('src', "data:image/jpeg;base64," + imageData);
            },
            function() {
                app.showAlert('Error taking picture', 'Error');
            },
            options);

        return false;
    };

    this.addLocation = function(event) {
        event.preventDefault();
        console.log('addLocation');
        navigator.geolocation.getCurrentPosition(
            function(position) {
                $('.location', this.el).html(position.coords.latitude + ',' + position.coords.longitude);
            },
            function() {
                alert('Error getting location');
            });
        return false;
    };

}

EmployeeView.template = Handlebars.compile($("#employee-tpl").html());

Answer 1

我自己正在做这个教程，它非常好，但针对早期版本的PhoneGap。首先，教程中名为 namedconfig.xml 的文件现在应该被称为 config.xml ，这对于更改很重要！

您提到您正在使用模拟器，但您可能会发现某些项目（如联系人和地理位置）仅适用于物理设备。

此外，从那以后PhoneGap引入了插件的想法。你提到插件但是你正确添加了它们吗？对我来说，我发现对于我的Android 4.1.1设备，我只需要将以下内容添加到我的 config.xml 中以使其全部正常工作。我把它们放在功能标签之后。

<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.camera" />

但是，根据您的设备，您可能会发现您也需要其他设备，例如地理位置和对话框。插件列表位于：https://build.phonegap.com/plugins。单击PhoneGap插件以获取默认情况下曾用于内置的功能。

Answer 2

我有SO Q & A可以解决您的问题。

基本上，即使你认为平台和插件都是安装的，也没有安装。运行cordova plugins ls进行检查。要实际安装它们，请从git repos添加它们。一切都在链接中。我希望它有所帮助。

Answer 3

你应该在其他js：

之前加入 cordova.js

ColoredConsoleAppender

相机，位置和联系人api不支持phonegap

3 个答案: