微信小程序开发--组织通讯录

1、背景

大家平时用到微信的时候，应该都会用到微信的通讯录功能，刚好我们公司项目中也有要实现组织通讯录的需求，在次记录下实现过程。

我的实现比较简单，目前是没有添加右侧的字母导航模块。

实现效果图如下所示：

分为两部分，上面一部分是部门，下面部分为当前部门下的员工列表，目前做的比较简单，仅供大家参考哈。

2、实现

打开微信开发者工具，创建项目并且在 app.json 文件中添加 "pages/addressbook/addressbook", 如下图所示：

2.1、addressbook.js 的实现

// pages/addressbook/addressbook.js
//https://blog.csdn.net/weixin_44039965/article/details/93503931
//https://www.jianshu.com/p/17b339adbe9b
Page({
  data:{
    windowHeight: '',
    deptData:[{
      "deptName":'基础研发部'
    },
    {
      "deptName":'设计部'
    },
    {
      "deptName":'测试部'
    },
    {
      "deptName":'质量管理部'
    },
    {
      "deptName":'生产部'
    }],
userData:[
{"letter":"A", "data":[{"name":"AAA","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"AAAAAAA","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"B","data":[{"name":"BBB","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"C","data":[{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"D","data":[{"name":"DDD","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"E","data":[{"name":"EEE","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"F","data":[{"name":"FFF","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"G","data":[{"name":"GGG","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"H","data":[{"name":"HHHH","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"I","data":[{"name":"IIIII","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"J","data":[{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"K","data":[{"name":"KKK","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"L","data":[{"name":"LLL","phoneNum":"15771009876","icon":"/image/user_icon.png"},
]},
{"letter":"M","data":[]},
{"letter":"N","data":[{"name":"NNN","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"O","data":[{"name":"OOO","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"P","data":[{"name":"PPP","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"Q","data":[{"name":"QQQ","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"R","data":[{"name":"RRR","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"S","data":[{"name":"SSS","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"T","data":[{"name":"TTT","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"U","data":[{"name":"UUU","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"V","data":[{"name":"VVV","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"W","data":[{"name":"WWW","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"X","data":[]},
{"letter":"Y","data":[{"name":"YYY","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"Z","data":[]},
]
},

  onLoad: function (options) {
    try {
      var res = wx.getSystemInfoSync()
      this.setData({windowHeight: res.windowHeight + 'px'})
    } catch (e) {
      console.log(e);
    }
  },
  
   // 拨打电话给
   callGetPhone(e) {
     // 号码
     let telPhone = e.currentTarget.dataset.getphone;
    if(telPhone == 'null' || telPhone == ''){
      wx.showToast({
        title: '电话号码为空!',
      })
      return;
    }
     wx.showModal({
      title: '拨打电话',
      content: telPhone,
      confirmText: '拨打',
      success: function (res) {
        if (res.confirm) {
          wx.makePhoneCall({
            phoneNumber: telPhone
          })
        }
      }
    })
   },
})

deptData：存放的是部门数据， userData：存放的是用户数据。

2.2、 addressbook.wxml的实现

<!--pages/addressbook/addressbook.wxml-->
<scroll-view scroll-y style="height: {{windowHeight}}">
<view class="alphabet">    
<!-- 部门数据列表 -->
<view class="alphabet-list">
    <view class="section-item">
      <view wx:for="{{deptData}}"  wx:for-item="deptItem" wx:for-index="idx" class="section-item-cells">
          <view class="section-item-cell {{'border-bottom'}}"  data-obj="{{deptItem}}">
            <view class="dept-name">
              <text class="dept-text">{{deptItem.deptName}}</text> 
            </view>
          </view>
    </view>
  </view>
</view>

<!-- 用户数据列表 -->
<view class="alphabet">
    <view class="alphabet-list">
      <view wx:for="{{userData}}" wx:key="unique" id="{{item.letter}}" class="section-item">
        <block wx:if="{{item.data.length > 0}}">
          <view class="item-header">
          {{item.letter}}
        </view>
        <view wx:for="{{item.data}}" wx:for-item="cell" class="section-item-cells">
          <view class="section-item-cell {{'border-bottom'}}">
            <view class="userList">
              <view class="flex-wrp-row item">
                <view class='item-left flex-wrp-row'>
                  <image  class="userIcon"  src="{{cell.icon}}" mode="cover"></image>
                  <text class="cell-name">{{cell.name}}</text>
                </view>                
                <view  class='item-right flex-wrp-row'>
                  <image class="callPhone" src="/image/ic_contact_call.png" catchtap="callGetPhone" data-getPhone="{{cell.phoneNum}}"></image>
                </view> 
              </view>
            </view>
          </view>
      </view>
    </block>
  </view>
</view>
</view>
</view>
</scroll-view>

可以看到整个布局时 scroll-view ，因为里面的列表数据需要进行滚动，另外布局里面的代码也分为两部分：部门数据列表 + 用户数据列表。

2.3、addressbook.wxss 的实现

/* pages/addressbook/addressbook.wxss */
.dept-name{
  height: 54rpx;
}

.alphabet-list .section-item .section-item-header{
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-family: PingFang SC;
  background-color: #f2f4f5;  
  color: #000000;
  padding: 4rpx 20rpx;
}

.item-header{
  display: flex;
  align-items: center;
  font-size: 16rpx;
  font-family: PingFang SC;
  background-color: #f2f4f5;  
  color: #666666;
  padding: 4rpx 20rpx;
}

.alphabet-list .section-item .section-item-cells {
  padding-left: 20rpx;
}
.alphabet-list .section-item .section-item-cells .section-item-cell{
  font-size: 26rpx;
    line-height: 1.0;
    color: #000000;
  padding: 29rpx 0;
}

.dept-text{
  font-size: 26rpx;
  font-family: PingFang SC;
  color: #000000;
  line-height: 54rpx;
}

.border-bottom {
  border-bottom: 1rpx solid #dbdbdb;
}

.userIcon{
  width: 33px;
  height: 33px;
}

.callPhone{
  width: 40rpx;
  height: 40rpx;
  margin-right: 50rpx;
}

.deptName{
  margin-left: 16rpx;
  font-size: 20rpx; 
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 54px;
}

.userList{
  display: flex;
  flex-direction: column;
  height: 50rpx;
}

.cell-name{
  margin-left: 20rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  color: #000000;
}

.flex-wrp-row {
  display: flex;
  flex-direction: row;
}
 
.item {
  position: relative;
}
 
.item-left {
   flex: 1; /* 重要 */
   align-items:center;
}
 
.item-right {
  position: relative;
  align-items:center;
}

样式这块就没什么好说的了，我也是才学习，写的比较简陋。

3、工程图片资源

工程里面用到两个图片资源，放置在image文件夹下，如下图所示：

好了，就先到这里，如果文章对你有所帮助，不要忘记点个赞哟~

posted @ 2021-05-24 15:52 BlueVictory 阅读(558) 评论(0) 编辑收藏举报

指间灵动，快码加编

刷新页面返回顶部