微信小程序开发案例 | 通讯录小程序（下）
【摘要】 通讯录小程序
阶段案例-通讯录小程序
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>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. }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>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 阶段案例逻辑实现：监听数字和符号按键
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>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. }修改后重新编译，随机按下任意一串电话号码再删除末尾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>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章阶段案例最终效果图
本案例主要为了演示tabBar布局、列表布局以及九宫格布局，其中wx.makePhoneCall()实现的拨打电话功能属于小程序设备API中一项内容。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）