一、案例介绍本次实验的【简易电子通讯录】共包含两个页面通讯录页面展示联系人的头像、姓名、电话、点击一键拨号图标可拨打对应电话拨号盘页面实现拨号号码显示、数字键盘输入、一键拨号、号码删除功能。二、效果预览三、开发准备3.1 项目导入下载模板代码包chapter03Exp_Contacts;修改AppID打开chapter03Exp_Contacts文件夹找到Project.config.json文件修改文件中的AppID为自己的AppID登录微信公众平台-开发与服务-开发管理-AppID;导入项目打开微信开发者工具选择左侧导航栏中的小程序选择导入选择chapter03Exp_Contacts文件夹填写自己的AppID选择不使用云服务点击创建运行项目项目导入成功后开发者工具弹出提示点击信任并运行初始化项目。3.2 新增拨号盘页面打开app.json文件在pages属性中添加pages/baohao/baohao代码按快捷键ctrlB保存并运行项目会在pages文件夹自动生成baohao文件夹以及4个页面文件。其中index页面用于显示通讯录页baohao页面用于显示拨号盘页。{ pages: [ pages/index/index, pages/baohao/baohao ], window: { navigationBarTextStyle: black, navigationBarTitleText: Weixin, navigationBarBackgroundColor: #ffffff }, style: v2, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }四、视图设计4.1 导航栏设计要求通讯录页导航栏标题为通讯录拨号盘页导航栏标题为拨号盘。步骤1配置通讯录页导航栏标题打开pages/index/index.json文件通过navigationBarTitleText设置导航栏标题代码如下{ usingComponents: {}, navigationBarTitleText: 通讯录 }步骤2配置拨号盘页导航栏标题打开pages/bohao/bohao.json文件通过navigationBarTitleText设置导航栏标题代码如下{ usingComponents: {}, navigationBarTitleText: 拨号盘 }4.2tabBar设计小程序通过配置app.json文件中的tabBar实现底部页面导航支持最少2个、最多5个tabtabBar属性如下属性必填默认值描述color是tab上的文字默认颜色selectedColor是tab上的文字选中时的颜色backgroundColor是tab的背景色borderStyle否blacktabbar上边框的颜色仅支持black / whitelist是tab的列表position否bottomtabBar的位置仅支持bottom / toplist数组中的属性属性必填说明pagePath是页面路径必须在pages中先定义text是tab上按钮文字iconPath否图标路径selectedIconPath否选中时的图标路径要求点击底部tab可以分别导航到通讯录及拨号盘页面打开app.json文件添加tab配置代码如下{ pages: [ pages/index/index, pages/baohao/baohao ], window: { navigationBarTextStyle: black, navigationBarTitleText: Weixin, navigationBarBackgroundColor: #ffffff }, tabBar: { selectedColor: #1296db, list: [ { pagePath: pages/index/index, text: 通讯录, iconPath: /images/tabbar/tongxunlu.png, selectedIconPath: /images/tabbar/tongxunlu_blue.png }, { pagePath: pages/baohao/baohao, text: 拨号盘, iconPath: /images/tabbar/bohaopan.png, selectedIconPath: /images/tabbar/bohaopan_blue.png } ] }, style: v2, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }4.3 通讯录页面设计通讯录页flex布局分析整体容器通讯录列表项目单行联系人单行联系人容器单行联系人项目头像、姓名电话、电话图标项目电话详情容器姓名电话项目姓名、电话使用index.wxml搭建页面结构index.wxss中使用flex模型布局页面整体样式具体步骤如下步骤1编写index.wxml页面结构打开pages/index/index.wxml文件搭建联系人列表布局每行联系人分别显示头像、姓名电话、电话图标信息先实现单条数据静态显示后通过列表渲染实现多条数据的动态绑定代码如下!--index.wxml-- !-- 整体容器显示联系人列表 -- view classcontainer !-- 单行联系人容器显示联系人信息 -- view classlxrList !-- 头像 -- image src/images/avatar.png/image !-- 姓名电话容器显示姓名、手机号 -- view classdetail !-- 姓名电话 -- view张三/view view13875641532/view /view !-- 电话图标 -- image src/images/call.png/image /view /view步骤2编写index.wxss页面样式核心flex布局打开pages/index/index.wxss文件使用flex布局实现页面自适应解决元素排列、居中、间距问题代码如下/**index.wxss**/ /* 整体容器显示联系人列表 */ .container{ /* 开启flex布局 */ display:flex; /* 联系人列表垂直布局 */ flex-direction:column; } /* 单行联系人容器显示联系人信息 */ .lxrList{ /* 开启flex布局 */ display:flex; /* 联系人信息水平布局 */ flex-direction: row; /* 底部边框线宽度 实线 银色 */ border-bottom:2rpx solid silver ; /* 内边距 */ padding: 25rpx 25rpx; } /* 姓名电话容器显示姓名、手机号 */ .detail{ /* 开启flex布局 */ display:flex; /* 姓名、电话垂直布局 */ flex-direction: column; /* 本身占据全部剩余空间 */ flex-grow:1; } /* 调整图片尺寸 */ image{ /* 宽度 */ width: 80rpx; /* 高度 */ height: 80rpx; /* 内边距 */ padding: 0 20rpx; }步骤3列表渲染单行联系人信息1. 打开pages/index/index.js文件在data属性中声明联系人姓名电话列表变量lxrListInfo;// index.js Page({ /** * 页面的初始数据 */ data: { // 声明联系人姓名电话列表变量 lxrListInfo:[ {name:张三,tel:13875461254}, {name:李四,tel:13975547254}, {name:王五,tel:17675461254} ] }, })2. 回到pages/index/index.wxml文件使用wx:for{{lxrListInfo}}给单行联系人容器绑定lxrListInfo变量使用{{item.属性名}}获取每个联系人的姓名和电话信息代码如下!--index.wxml-- !-- 整体容器显示联系人列表 -- view classcontainer !-- 单行联系人容器显示联系人信息 -- view classlxrList wx:for{{lxrListInfo}} wx:key*this !-- 头像 -- image src/images/avatar.png/image !-- 姓名电话容器显示姓名、手机号 -- view classdetail !-- 姓名电话 -- view{{item.name}}/view view{{item.tel}}/view /view !-- 电话图标 -- image src/images/call.png/image /view /view4.4 拨号页面设计拨号页flex布局分析整体容器存放拨号页面完整结构项目电话号码显示栏、拨号键盘、底部拨号删除图标拨号键盘容器存放12个拨号键项目12个拨号键图标容器存放拨号删除功能图标项目拨号功能图标、删除功能图标使用bohao.wxml搭建页面结构bohao.wxss中使用flex模型布局页面整体样式具体步骤如下步骤1编写bohao.wxml页面结构打开pages/bohao/bohao.wxml文件分别搭建顶部号码显示栏、中间拨号键盘以及底部拨号删除功能图标代码如下!--pages/baohao/baohao.wxml-- !-- 整体容器存放顶部号码显示栏、中间拨号盘、底部功能图标 -- view classcontainer !-- 顶部号码显示栏 -- view classtelShow{{tel}}/view !-- 中间拨号键盘容器存放12个拨号键 -- view classnumBox !-- 12个拨号键 -- view wx:for{{numList}} wx:key*this classnum{{item}}/view /view !-- 底部拨号和删号码功能图标容器存放拨号和删号码功能图标 -- view classbottomBox !-- 拨号功能图标 -- image src/images/call.png classcallImg/image !-- 删除号码功能图标 -- image src/images/delete.png classdeleteImg/image /view /view步骤2编写bohao.wxss页面样式核心flex布局打开pages/bohao/bohao.wxss文件使用flex模型实现页面、数字键盘以及拨号删除功能按钮的布局代码如下/* pages/baohao/baohao.wxss */ /* 整体容器整体布局顶部号码显示栏、中间拨号盘、底部功能图标 */ .container{ width:100%;/*宽度*/ height:100vh;/*高度*/ display: flex;/*开启flex布局*/ flex-direction:column;/*主轴排列方向垂直排列*/ justify-content: space-evenly;/*主轴对齐方式项目与项目首项目与主轴起点最后一个项目与主轴终点均等距离间隔*/ align-items: center;/*交叉轴对齐方式水平居中*/ } /* 顶部号码显示栏 */ .telShow{ width:600rpx; /*宽度*/ height: 80rpx;/*高度*/ font-size: 80rpx;/*字体大小*/ text-align: center;/*文本居中*/ line-height: 80rpx;/*行高*/ overflow: hidden;/*超出部分隐藏*/ text-overflow: ellipsis;/*末尾加省略号*/ } /* 中间拨号键盘容器布局12个拨号键 */ .numBox{ width: 600rpx; /*宽度*/ height: 800rpx;/*高度*/ display: flex;/*开启flex布局*/ flex-direction: row;/*主轴排列方向水平从左到右*/ flex-wrap: wrap;/*允许换行*/ justify-content: space-evenly;/*主轴对齐方式项目与项目首项目与主轴起点最后一个项目与主轴终点均等距离间隔*/ align-content: space-evenly;/*多行项目在交叉轴上对齐方式项目与项目首项目与交叉轴起点最后一个项目与交叉轴终点均等距离间隔*/ } /* 拨号键 */ .num{ width: 160rpx; /*宽度*/ height: 160rpx;/*高度*/ background-color: #acabab;/*背景颜色*/ border-radius: 50%;/*边框圆角切割成圆形*/ font-size:70rpx;/*字体大小*/ text-align: center;/*文本居中*/ line-height: 150rpx;/*行高*/ } /* 底部拨号和删号码功能图标容器布局拨号和删号码功能图标 */ .bottomBox{ width: 600rpx; /*宽度*/ height: 200rpx;/*高度*/ display: flex;/*开启flex布局*/ flex-direction: row;/*主轴排列方向水平布局*/ justify-content: flex-end;/*主轴对齐方式与主轴终点对齐项目间无间隔*/ align-items: center;/*交叉轴对齐方式居中对齐*/ } /* 拨号功能图标 */ .callImg{ width: 160rpx; /*宽度*/ height: 160rpx;/*高度*/ padding-right:20rpx;/*右边距*/ } /* 删除号码功能图标 */ .deleteImg{ width: 120rpx;/*宽度*/ height: 120rpx;/*高度*/ padding-right: 20rpx;/*右边距*/ }步骤3bohao.js中声明拨号列表打开pages/bohao/bohao.js文件在data属性中声明拨号列表代码如下// pages/baohao/baohao.js Page({ /** * 页面的初始数据 */ data: { tel:, // 声明拨号列表 numList:[1,2,3,4,5,6,7,8,9,*,0,#] } })五、逻辑实现5.1 通讯录页逻辑实现通讯录页逻辑功能描述点击联系人拨号图标弹窗显示对应联系人号码可拨打对应电话。步骤1拨号图标绑定事件并传参打开pages/index/index.wxml文件给电话图标的image组件上添加bindtap属性绑定点击事件handleBohao通过data-自定义参数名参数值传递所点击的联系人电话代码如下!--index.wxml-- !-- 整体容器显示联系人列表 -- view classcontainer !-- 单行联系人容器显示联系人信息 -- view classlxrList wx:for{{lxrListInfo}} wx:key*this !-- 头像 -- image src/images/avatar.png/image !-- 姓名电话容器显示姓名、手机号 -- view classdetail !-- 姓名电话 -- view{{item.name}}/view view{{item.tel}}/view /view !-- 电话图标 -- image src/images/call.png bind:taphandleBohao>// index.js Page({ /** * 页面的初始数据 */ data: { // 声明联系人姓名电话列表变量 lxrListInfo:[ {name:张三,tel:13875461254}, {name:李四,tel:13975547254}, {name:王五,tel:17675461254} ] }, // 点击拨号图标拨打电话 handleBohao(e){ //console.log(e.currentTarget.dataset.telnum) wx.makePhoneCall({ phoneNumber:e.currentTarget.dataset.telnum }) } })5.2 拨号盘页逻辑实现拨号盘页逻辑功能描述点击中间拨号键号码显示栏显示对应点击的拨号号码点击底部拨号按钮自动获取号码显示栏的号码信息弹窗拨号提示点击底部删除号码按钮每次删除号码显示栏的最后一位。步骤1实现数字键盘输入功能1. 打开pages/bohao/bohao.wxml文件使用bindtap属性给数字键组件绑定handleGetNum点击事件通过data-num传递当前点击的号码数字代码如下!-- 12个拨号键 -- view wx:for{{numList}} wx:key*this classnum bindtaphandleGetNum>// 获取点击的键盘数字,更新页码输入的号码信息 handleGetNum(event){ let numevent.currentTarget.dataset.num //获取页面传递的号码数字 let newTel this.data.tel num //号码拼接 //更新页面号码信息及data中的tel数据 this.setData({ tel:newTel }) }步骤2实现一键拨号功能1. 打开pages/bohao/bohao.wxml文件使用bindtap属性给底部的拨号图标组件绑定点击事件handleCall代码如下!-- 拨号功能图标 -- image src/images/call.png classcallImg bind:taphandleCall/image2. 打开pages/bohao/bohao.js文件编写handleCall事件函数逻辑代码拼接当前号码信息使用CallsetData()方法更新拨号页顶部的号码信息代码如下//实现一键拨号功能 handleCall(){ let telthis.data.tel //获取当前页面的号码 //号码不为空一键拨号 if(tel){ wx.makePhoneCall({ phoneNumber:tel }) } }步骤3实现号码栏号码删除功能1. 打开pages/bohao/bohao.wxml文件使用bindtap属性给底部的删除图标组件绑定点击事件handleDelete代码如下!-- 删除号码功能图标 -- image src/images/delete.png classdeleteImg bind:taphandleDelete/image2. 打开pages/bohao/bohao.js文件编写handleDelete事件函数逻辑代码每次点击删除顶部号码显示栏的最后一位号码数字代码如下//实现号码栏号码删除功能 handleDelete(){ if(this.data.tel.length0){ let newTelthis.data.tel.slice(0,-1) //手机号删除最后一个字符 //使用setData更新页面显示的号码信息 this.setData({ tel:newTel }) }五、实验总结简易电子通讯录虽然小巧但覆盖了小程序核心知识点全局配置app.jsonpages属性新增页面、TabBar设计页面配置文件xxx.jsonpages属性新增页面、navigationBarTitleText设置导航栏标题WXML核心语法data-*传参、事件对象获取参数、setData更新页面数据、wx:for列表渲染WXSS样式flex布局微信官方原生API调用wx.makePhoneCall()拨打电话。