cordova contacts测试

多么希望markdown博客发表后的效果是这样的。
cordova contacts测试

而不是下面这样的(还是在kindeditor下折腾出来的,osc的markdown惨不忍睹)。

  • 从这里http://cordova.apache.org/找到Contacts的入口,看md文档。

  • 打开webstorm9,新建cordova工程。

  • 打开terminal视图,添加对android的支持
    cordova platform add android

  • 添加contacts插件
    cordova plugin add org.apache.cordova.contacts

  • 然后将jquery mobile的js和css拷贝到www/js目录下

  • 打开index.html,修改内容如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <link rel="stylesheet" href="js/jqm/jquery.mobile-1.4.4.min.css"/>
            <script src="js/jqm/jquery-1.11.0.min.js"></script>
            <script src="js/jqm/jquery.mobile-1.4.4.min.js"></script>
            <title>Hello World</title>
        </head>
        <body>
            <div data-role="page">
                <div data-role="header"><h1>Contact Search</h1></div>
                <div data-role="content">
                    <input type="text" name="search" id="search"/>
                    <button id="btnSearch"></button>
                    <ul id="results" data-role="listview" data-inset="true">
    
                    </ul>
                </div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
        </body>



  • 打开index.js修改内容如下

    (function ($) {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        $('#btnSearch').bind("touchend", function () {
            var search = $.trim($('#search').val());
            if (search == "") return;
            var opt = new ContactFindOptions();
            opt.filter = search;
            opt.multiple = true;
            navigator.contacts.find([navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.phoneNumbers], onSuccess, onError, opt);
        })
    }
    
    function onSuccess(contacts) {
        var s = '';
        for (var i = 0; i < contacts.length; i++) {
            s += '<li>' + contacts[i].displayName + '</li>';
        }
        $('#results').html(s);
        $('#results').listview('refresh');
    };
    
    function onError(contactError) {
        navigator.notification.alert('sorry, we had a problem and gave up.');
    };
    })(jQuery);





    输入如下命令编译 
    cordova build
  • 将手机通过USB连接到电脑,输入如下命令测试
    cordova run

  • 搭建环境见这里

你可能感兴趣的:(cordova contacts测试)