微信小程序开发案例 | 通讯录小程序（下）

阶段案例-通讯录小程序

01、逻辑实现

1 通讯录页逻辑

通讯录页主要功能就是点击每行的电话图标可以拨打电话。修改首页wxml代码，在每一行的拨打电话图标处追加点击事件，并携带联系电话参数。

index.wxml相关代码修改如下：

复制代码

1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 单行容器 -->
4. <view class="bar" wx:for="{{peopleList}}" wx:key='id'>
5. <!-- 2-1 头像图标（代码略）-->
6. <!-- 2-2 姓名和电话文字区域（代码略）-->
7. <!-- 2-3 拨打电话图标 -->
8. <image src="/images/call.png" bindtap="bohao" data-tel="{{item.tel}}"></image>
9. </view>
10. </view>

在index.js中追加自定义函数bohao，相关代码如下：

复制代码

1. // index.js
2. Page({
3. ...,
4. /**
5. * 自定义函数--拨号
6. */
7. bohao: function (e) {
8. // 获取联系电话
9. let tel = e.currentTarget.dataset.tel
10. // 给指定电话拨号（真机预览有效）
11. wx.makePhoneCall({
12. phoneNumber: tel
13. })
14. },
15. ...16. }

上述代码中用到了wx.makePhoneCall()进行电话拨打，该功能在微信开发工具中仅为模拟效果，但可在真机预览时查看实际效果。

2 拨号盘页逻辑

1）监听数字和符号按键

修改bohao.wxml代码，为数字和符号按键追加自定义点击事件onInput并携带按键字符参数。

bohao.wxml相关代码修改如下：

复制代码

1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 顶部电话显示区域（内容略） -->
4. <!-- 3 中间数字键盘区域 -->
5. <view class="numBox">
6. <!-- 3-1 数字键和*#符号键按钮 -->
7. <button wx:for="{{num}}" wx:key="*this" class="num" bindtap="onInput" data-num='{{item}}'>{{item}}</button>
8. </view>
9. <!-- 4 底部按钮区域（内容略）-->
10. </view>

在bohao.js中追加自定义函数onInput，相关代码如下：

复制代码

1. // bohao.js
2. Page({
3. ...,
4. /**
5. * 自定义函数--监听数字和符号按键
6. */
7. onInput: function (e) {
8. // 获取按键符号
9. let num = e.currentTarget.dataset.num
10. // 更新顶部电话显示
11. let newTel = this.data.tel+num
12. this.setData({
13. tel:newTel
14. })
15. },
16. ...17. }

修改后重新编译，随机按下任意一串电话号码效果如图3-33所示。

■ 图3-33 阶段案例逻辑实现：监听数字和符号按键

2）监听删除按键

修改bohao.wxml代码，为删除按键追加自定义点击事件delete并携带按键字符参数。

bohao.wxml相关代码修改如下：

复制代码

1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 顶部电话显示区域（内容略） -->
4. <!-- 3 中间数字键盘区域（内容略） -->
5. <!-- 4 底部按钮区域 -->
6. <view class="bottomBox">
7. <!-- 4-1 拨号按钮 -->
8. <image class="callImg" src="/images/call.png"></image>
9. <!-- 4-2 删除按钮 -->
10. <image class="deleteImg" src="/images/delete.png" bindtap="delete"></image>
11. </view>
12. </view>

在bohao.js中追加自定义函数delete，相关代码如下：

复制代码

1. // bohao.js
2. Page({
3. ...,
4. /**
5. * 自定义函数--监听删除按键
6. */
7. delete: function () {
8. // 获取当前顶部显示的号码
9. let tel = this.data.tel
10. // 如果不是空的，则去掉末尾一位
11. if (tel.length > 0) {
12. tel = tel.slice(0, tel.length - 1)
13. }
14. // 更新顶部电话显示
15. this.setData({
16. tel: tel
17. })
18. },
19. ...20. }

其中tel.slice(0, tel.length - 1)用的是JavaScript自带函数str.slice(start, end)，表示重新截取字符串从start位到end位的一段内容，因此这里表示将字符串tel重新截取从第0位到倒数第二位的所有内容，即去掉了末尾一位字符。

修改后重新编译，随机按下任意一串电话号码再删除末尾3位的效果如图3-34所示。

■ 图3-34 阶段案例逻辑实现：监听删除按键

3）拨打电话

修改bohao.wxml代码，为拨号按键追加自定义点击事件call。

bohao.wxml相关代码修改如下：

复制代码

1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 顶部电话显示区域（内容略） -->
4. <!-- 3 中间数字键盘区域（内容略） -->
5. <!-- 4 底部按钮区域 -->
6. <view class="bottomBox">
7. <!-- 4-1 拨号按钮 -->
8. <image class="callImg" src="/images/call.png" bindtap="call"></image>
9. <!-- 4-2 删除按钮 -->
10. <image class="deleteImg" src="/images/delete.png" bindtap="delete"></image>
11. </view>
12. </view>

在bohao.js中追加自定义函数call，相关代码如下：

复制代码

1. // bohao.js
2. Page({
3. ...,
4. /**
5. * 自定义函数--监听打电话按键
6. */
7. call: function () {
8. // 获取联系电话
9. let tel = this.data.tel
10. // 给指定电话拨号（真机预览有效）
11. wx.makePhoneCall({
12. phoneNumber: tel
13. })
14. },
15. ...16. }

至此整个阶段案例就完成了，完整运行效果如图3-35所示。

■ 图3-35 第3章阶段案例最终效果图

本案例主要为了演示tabBar布局、列表布局以及九宫格布局，其中wx.makePhoneCall()实现的拨打电话功能属于小程序设备API中一项内容。