微信开发者工具小程序通讯录图标怎么添加

微信开发者工具中的小程序通讯录图标通常用于获取用户授权访问其微信好友的联系信息。要在小程序页面中添加这个图标，你需要在`wxml`文件中使用`<button>`标签，并设置它的type属性为"open-contacts"。下面是一个简单的示例：

<button open-type="contact" wx:if="{{permission.contacts}}">查看通讯录</button>

在这个例子中，`permission.contacts`是一个条件判断，如果用户已经授予了访问通讯录的权限，则会显示按钮。当用户点击此按钮时，会弹出一个授权提示，允许他们选择是否分享联系人。

如果你想直接在右上角显示一个固定的获取联系人的按钮，可以在app.json文件中配置页面路径的导航栏样式，例如：

{
  "window": {
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle": "black", // 可选值：black、white，默认白色
    "backgroundColor": "#fff",
    "navigationBarBackgroundColor": "#404040", // 菜单背景色
    "customTitleView": "path/to/your/custom-view.wxss", // 自定义标题视图
    "navigationBarNeedShowBackButton": true, // 是否需要显示返回按钮
    "navigationBarButtons": [
      {
        "type": "search",
        "position": "right"
      },
      {
        "type": "contact",
        "position": "right",
        "iconPath": "path/to/your/icon.png", // 设置自定义图标路径
        "selectedIconPath": "path/to/your/icon-selected.png" // 选中状态下的图标路径
      }
    ]
  }
}

记得替换`path/to/your...`为实际的图片资源路径。这样就会在右上角显示一个搜索和联系人的按钮，点击联系人按钮同样会请求用户的授权。