pc 响应式网站模板千锋教育靠谱吗

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文件夹下，如下图所示：

 

 

 

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