(1) 添加层并在层中插入“获取手机通讯录信息”元素。

(2) 拖拽一个布局置于容器内，点击“编辑”按钮进入文档流编辑页面。

(3) 编辑内容，在源码页面调整内容，如下图：

(4) 找到所有内容的父标签上点击（下图左），选择“逻辑”→数据绑定→绑定模式：数组绑定→绑定参数：webpage_contacts。

(5) 在“名字”的标签上点击（下图左），选择“逻辑”→数据绑定→绑定模式：文本内容绑定→绑定参数：displayName。

(6) 在“电话类型：电话号码”的父标签上点击（下图左），选择“逻辑”→数据绑定→绑定模式：数组绑定→绑定参数：phoneNumbers。

(7) 在“电话类型”的标签上点击（下图左），选择“逻辑”→数据绑定→绑定模式：文本内容绑定→绑定参数：type。

(8) 在“电话号码”的标签上点击（下图左），选择“逻辑”→数据绑定→绑定模式：文本内容绑定→绑定参数：value。

(9) 进入第一步层的文档流编辑页面，在“获取手机通讯录数据”元素上右键，选择“逻辑”→数据绑定→绑定模式：属性绑定→绑定参数：{"data--update":refresh}。

(10) 拖拽一个布局置于容器内，点击“编辑”按钮进入文档流编辑页面，添加一个按钮。在按钮上右键，选择“逻辑”→逻辑→产生某种效果：绑定数据编程→高级编辑： _vm.refresh("true");。

效果图：

3. 元素获取数据的说明

下面是此元素能够获取通讯录的所有信息，使用者可根据需求获取相应的信息。id、nickname、birthday、note与上文的“名字”设置方式相同，其它的与“电话类型：电话号码”的设置方式相同。

[
  {
    "id": "1",  //联系人的唯一ID。
    "displayName": "酷派客服热线",//此联系人的名字，适于显示给最终用户
    "name": { //含有一个人的名字的所有组成部分的对象。
      "formatted": "酷派客服热线 ", //该联系人的完整名称
      "familyName": "", //联系人姓氏
      "givenName": "酷派客服热线", //联系人的名
      "middleName": "", //联系人中间名
      "honorificPrefix": "", //联系人前缀
      "honorificSuffix": "" //联系人后缀
    },
    "nickname": "", //联系人别名
    "phoneNumbers": [ //联系人的电话号码数组
      {
        "type": "work",// 类型
        "value": "076923075280",//值，即电话号码
        "id": "2",
        "pref": false //当前电话号码是否是用户的首选号码
      },
      {
        "type": "mobile", // 类型
        "value": "4000111388", //值，即电话号码
        "id": "3",
        "pref": false //当前电话号码是否是用户的首选号码
      }
    ],
    "emails": [  //联系人的电子邮件地址的数组
      {
        "type": "",// 类型
        "value": "",//值，即电子邮件
        "pref": false //当前电子邮件是否是用户的首选电子邮件
      }
    ],
    "addresses": [  //联系人地址数组
      {
        "pref": false, //当前地址是否是用户的首选地址
        "type": "", //类型
        "formatted": "", //完整的地址格式。
        "streetAddress": "", //完整的街道地址。
        "locality": "", //城市或地方
        "region": "", //国家或地区
        "postalCode": "", //邮政编码
        "country": "" //国名
      }
    ],
    "ims": [ //联系人的IM组成的数组
      {
        "type": "",// 类型
        "value": "",//值，即IM
        "pref": false //当前IM是否是用户的首选IM
      }
    ],
    "organizations": [ //联系人组织的数组
      {
        "pref": false, //当前组织是否是用户的首选组织
        "type": "", //类型
        "name": "", //组织的名称
        "department": "", //当前联系人工作的部门
        "title": "" //联系人在组织的标题
      }
    ],
    "birthday": "", //联系人的生日，Date类型
    "note": "", //联系人备注
    "photos": [ //联系人照片的数组
      {
        "value": "content://com.android.contacts/contacts/1/photo", //值，即照片
        "type": "url", //类型
        "id": "4",
        "pref": false //当前照片是否是用户的首选照片
      }
    ],
    "categories": [ //联系人的用户定义的类别的数组
      {
        "type": "",// 类型
        "value": "",//值，即用户定义的类别
        "pref": false //当前用户定义的类别是否是用户的首选用户定义的类别
      }
    ],
    "urls": [ //联系人的相关网页的数组
      {
        "type": "",// 类型
        "value": "",//值，即相关网页
        "pref": false //当前相关网页是否是用户的首选相关网页
      }
    ]
  }
]