uni-app获取手机通讯录（基于HTML5+）

官方API：https://www.html5plus.org/doc/zh_cn/contacts.html

话不多说，直接上代码

contacts.vue

<template>  
    <view>  
        <button type="primary" @tap="getContacts">获取联系人</button>  
        <block  v-for="(item,index) in list" :key="index">  
            <view>{{item.displayName}}</view>  
                <block v-for="(subitem,idx) in item.phoneNumbers" :key="idx">  
                    <view>{{subitem.value}}</view>  
                </block>  
        </block>  
    </view>  
</template>  

<script>  
    var Contacts  
    export default {  
        data() {  
            return {  
                list: []  
            }  
        },  
        onShow() {  
            uni.setNavigationBarTitle({  
                    title: '通讯录'  
            });  
        },  
        methods: {  
            getContacts: function() {  
                var that = this  
                // 获取通讯录对象  
                plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {  
                    uni.showToast({  
                        title: '获取通讯录对象成功',  
                        duration: 2000  
                    })  
                    console.log('获取通讯录对象成功')  
                    console.log(addressbook)  
                    // 查找联系人  
                    addressbook.find(["displayName","phoneNumbers"],function(contacts){  
                        uni.showToast({  
                            title: '获取联系人成功',  
                            duration: 2000  
                        })  
                        console.log('获取联系人成功')  
                        console.log(JSON.stringify(contacts))  
                        that.list = contacts  
                    }, function () {  
                        uni.showToast({  
                            title: '获取联系人失败',  
                            duration: 2000  
                        })  
                    },{multiple:true});  
                }, function ( e ) {  
                    uni.showToast({  
                        title: '获取通讯录对象失败:' + e.message,  
                        duration: 2000  
                    })  
                });  
            }  
        }  
    }  
</script>  

<style>  

</style>

注：由于hx调试输出console.log()不能直接输出对象，故用JSON.stringify()转一下，好作调试输出。示意：console.log(JSON.stringify(contacts))