阶段案例-通讯录小程序
01、准备工作
1 导入代码包
为了节约时间，这里我们直接把小程序空白模板代码包templateDemo复制一份并重命名为demo03_contactBook, 导入开发工具等待改造。
2 新增页面
在app.json文件的pages属性中追加"pages/bohao/bohao"，然后按快捷键Ctrl+S保存修改后会在pages文件夹下自动生成bohao目录以及里面的页面文件。计划index页面用于显示通讯录，bohao页面用于显示拨号盘。
更新后的app.json文件pages属性相关代码如下：
1. {
2. "pages":[
3. "pages/index/index",
4. "pages/bohao/bohao"
5. ],
6. ...7. }需要注意有多个页面时只有最后一个页面路径地址后面不加逗号，因此这里第3行index页面的路径描述末尾要追加逗号。
3 新增图片素材
在根目录中新建文件夹images然后将图片素材放置其中，相关图片素材如下：
■ 图3-24 图片素材展示
为了图片素材分类更明确，还可以在images中继续新建tabbar文件夹把tab图标单独放置。最终目录结构如下图所示：
■ 图3-25 项目目录结构
02、视图设计
1 导航栏设计
在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：
8. {
9. "pages":[...],
10. "window":{
11. "navigationBarBackgroundColor": "#fff",
12. "navigationBarTitleText": "通讯录",
13. "navigationBarTextStyle":"black"
14. },
15. ...16. }上述代码可以更改导航栏背景色为白色、字体为黑色，效果如图3-26所示。
■ 图3-26 自定义导航栏效果
2 tabBar设计
在app.json中追加tabBar的相关属性代码，代码片段如下：
1. {
2. "pages":[...],
3. "tabBar": {
4. "selectedColor": "#1296db",
5. "list": [{
6. "pagePath": "pages/index/index",
7. "text": "通讯录",
8. "iconPath": "/images/tabbar/tongxunlu.png",
9. "selectedIconPath": "/images/tabbar/tongxunlu_blue.png"
10. },
11. {
12. "pagePath": "pages/bohao/bohao",
13. "text": "拨号键盘",
14. "iconPath": "/images/tabbar/bohaopan.png",
15. "selectedIconPath": "/images/tabbar/bohaopan_blue.png"
16. }]
17. },
18. "window":{...},
19. ...20. }效果如图3-27所示，此时就已经可以切换通讯录页和拨号盘页了
■ 图3-27 tabBar显示效果图
3 通讯录页设计
通讯录页即首页，主要包含一个垂直排列的多行列表结构，每一行里面又横向排列为左中右结构：左边是头像图标、中间是上下2行文字显示姓名和联系电话、右边是拨打电话的按钮。页面设计图如图3-28所示。
■ 图3-28 通讯录页设计图
计划使用组件如下：
● 整体容器和每一行容器：<view> 组件；
● 头像和拨打电话图标：<image> 组件；
● 姓名和电话文字：<text> 组件。
index.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 单行容器 -->
4. <view class="bar">
5. <!-- 2-1 头像图标 -->
6. <image src="/images/avatar.png"></image>
7. <!-- 2-2 姓名和电话文字区域 -->
8. <view class="detail">
9. <text>张三</text>
10. <text>13812345678</text>
11. </view>
12. <!-- 2-3 拨打电话图标 -->
13. <image src="/images/call.png"></image>
14. </view>
15. </view>上述代码第9-10行的文字内容是为了显示样式写的测试数据，开发者可以自由更改。
index.wxss样式代码如下：
1. /* 1 整体容器 */
2. .container{
3. /* 垂直布局 */
4. display: flex;
5. flex-direction: column;
6. /* 内边距 */
7. padding: 20rpx;
8. }
9. /* 2 单行容器 */
10. .bar{
11. /* 水平布局 */
12. display: flex;
13. flex-direction: row;
14. /* 垂直方向居中 */
15. align-items: center;
16. /* 内边距 */
17. padding: 25rpx 0;
18. /* 下划线 */
19. border-bottom: 2rpx solid silver;
20. }
21. /* 2-1 图标 */
22. image{
23. /* 图片尺寸 */
24. width: 80rpx;
25. height: 80rpx;
26. /* 图片外边距 */
27. margin: 0 20rpx;
28. }
29. /* 2-2 姓名和电话文字区域 */
30. .detail{
31. /* 垂直布局 */
32. display: flex;
33. flex-direction: column;
34. /* 本身占据全部剩余空间 */
35. flex-grow: 1;36. }此时可以看到初具雏形的效果图如3-29所示。
■图3-29 通讯录页设计图
4 拨号盘页设计
拨号盘页主要包含上、中、下三个部分：上方是电话号码显示区域、中间是拨号用的数字0-9以及*#符号按键区域、下方是拨号键和删除键区域。页面设计图如图3-31所示。
■ 图3-31 拨号盘页设计图
计划使用组件如下：
● 整体容器和上中下三个区域容器：<view> 组件；
● 顶部区域电话号码显示：<text> 组件；
● 中间区域数字0-9以及*#符号按键：<button> 组件；
● 底部拨号和删除键：组件。
bohao.wxml代码如下：
1. <!-- 1 整体容器 -->
2. <view class="container">
3. <!-- 2 顶部电话显示区域 -->
4. <text>{{tel}}</text>
5. <!-- 3 中间数字键盘区域 -->
6. <view class="numBox">
7. <!-- 数字0-9以及符号*#按钮 -->
8. <button wx:for="{{num}}" wx:key="*this" class="num">{{item}}</button>
9. </view>
10. <!-- 4 底部按钮区域 -->
11. <view class="bottomBox">
12. <!-- 4-1 拨号按钮 -->
13. <image class="callImg" src="/images/call.png"></image>
14. <!-- 4-2 删除按钮 -->
15. <image class="deleteImg" src="/images/delete.png"></image>
16. </view>
17. </view>和通讯录页一样，为了优化代码量，这里也使用wx:for属性循环生成中间区域的数字键和特殊符号键。
bohao.wxss样式代码如下：
1. /* 1 整体容器 */
2. .container {
3. /* 宽高尺寸 */
4. width: 100%;
5. height: 100vh;
6. /* 垂直布局 */
7. display: flex;
8. flex-direction: column;
9. align-items: center; /* 水平方向居中 */
10. justify-content: space-evenly; /* 每个区域之间留出相等空间 */
11. }
12. /* 2 顶部电话显示区域 */
13. text {
14. /* 宽高尺寸 */
15. width: 600rpx;
16. height: 80rpx;
17. font-size: 80rpx; /* 字体大小 */
18. line-height: 80rpx; /* 行高 */
19. text-align: center; /* 文本居中 */
20. overflow: hidden; /* 超出部分隐藏 */
21. white-space: nowrap; /* 文本单行不换行 */
22. text-overflow: ellipsis; /* 末尾加省略号 */
23. }
24. /* 3 中间数字键盘区域 */
25. .numBox {
26. width: 600rpx; /* 宽度 */
27. }
28. /* 3-1 数字键和*#符号键按钮 */
29. .num {
30. /* 宽高尺寸 */
31. width: 150rpx;
32. height: 150rpx;
33. float: left; /* 向左浮动 */
34. border-radius: 50%; /* 圆角效果 */
35. background-color: silver; /* 背景颜色 */
36. text-align: center; /* 文本居中 */
37. line-height: 150rpx; /* 行高 */
38. font-size: 80rpx; /* 字体大小 */
39. margin: 20rpx 25rpx; /* 外边距 */
40. }
41. /* 4 底部按钮区域 */
42. .bottomBox {
43. width: 600rpx; /* 宽度 */
44. /* 水平布局 */
45. display: flex;
46. flex-direction: row;
47. align-items: center; /* 垂直方向居中 */
48. justify-content: flex-end; /* 向右对齐 */
49. }
50. /* 4-1 拨号按钮 */
51. image.callImg {
52. /* 宽高尺寸 */
53. width: 150rpx;
54. height: 150rpx;
55. margin-right: 75rpx; /* 外边距右侧 */
56. }
57. /* 4-2 删除按钮 */
58. image.deleteImg {
59. /* 宽高尺寸 */
60. width: 100rpx;
61. height: 100rpx;
62. margin-right: 50rpx; /* 外边距右侧 */63. }注意：为了保障组件能顺利实现中间区域的数字0-9以及特殊符号键，请检查一下app.json文件中如果出现了"style": "v2",请删除此行内容，因为v2版本的按钮暂时不能兼容当前自定义的按钮样式，去掉以后可以正常实现该案例内容。
在bohao.js的data属性中添加自定义变量num和tel，分别用于记录数字键的显示字符和顶部区域显示电话号码。
bohao.js相关代码如下：
1. Page({
2. /**
3. * 页面的初始数据
4. */
5. data: {
6. num:[1,2,3,4,5,6,7,8,9,'*',0,'#'],
7. tel:''
8. },
9. ...10. }此时可以看到效果图如图3-32所示。
■ 图3-32 拨号盘页效果图
此时视图设计就全部完成了，下一节将进行拨打电话功能的逻辑实现。