微信小程序开发案例 | 个人相册小程序（上）

阶段案例-个人相册小程序

01、准备工作

1 导入代码包

为了节约时间，这里我们直接把完成的小程序空白模板代码包templateDemo复制一份并重命名为demo07_myAlbum, 导入开发工具等待改造。

2 启动服务器

这里我们使用本地电脑安装phpStudy v8.1套件来模拟服务器效果，本次阶段案例不需要使用MySQL数据库，因此直接启动Apache或者Nginx来模拟Web服务器即可。

以Nginx为例，启动效果如图7-8所示。

■ 图7-8  phpstudy_pro启动Nginx示例

找到phpStudy v8.1套件的安装目录phpstudy_pro，打开里面的WWW目录，在下一级新建myAlbum文件夹（该名称可由开发者自定义），并放入若干图片等待案例使用。效果如图7-9所示。

■ 图7-9  新建myAlbum目录与内部图片

尝试在电脑端浏览器中输入“http://localhost/myAlbum/pic01.jpg”，如果可以访问就说明服务器部署成功了，成功访问效果如图7-10所示。

■ 图7-10  尝试访问服务器端图片

注：这里的localhost换成127.0.0.1效果也是一样的，但仅限本机电脑端访问；如果想用手机或其它电脑访问，必须确保手机或其它电脑与这台模拟服务器的电脑在同一个局域网内（例如连了同一个WiFi），且需要把localhost换成IP地址的写法。

【小技巧分享：如何查本机IP地址？】

电脑端开始菜单输入“cmd”回车后唤起命令提示符窗口，在内部输入“ipconfig”指令并回车即可查看本机IPv4地址，如图7-11所示。

■ 图7-11  查询本机IP地址

此时直接在处于同一局域网下的手机浏览器中输入“http://172.28.144.158/myAlbum/pic01.jpg” (注意：这里的172.28.144.158仅为示例，需要换成开发者自己查到的实际IP地址)就可以访问了，如图7-12所示。

■图7-12  手机访问电脑模拟服务器内图片

由于当前案例无需用到小程序端本地图片素材，此时就已经做好了准备工作，最终目录结构如下图所示：

■ 图7-13  项目目录结构

02、视图设计

1 导航栏设计

在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：

1. {
2. "pages":[…],
3. "window":{
4. "navigationBarBackgroundColor": "#fff",
5. "navigationBarTitleText": "我的相册",
6. "navigationBarTextStyle":"black"
7. },
8. …9. }

上述代码可以更改导航栏背景色为白色、字体为黑色，效果如图7-14所示。

■ 图7-14  自定义导航栏效果

2 首页设计

首页主要是一个垂直排列的布局：上方是标题面板，里面包含了相册标题、照片数量等信息；下方是九宫格形式的相册列表，每行3张图片；右下角另外有一个悬浮在顶层的按钮，用于上传图片。页面设计图如7-15所示。

■ 图7-15  首页设计图

计划使用组件如下：

● 顶部标题面板、底部相册列表：组件；

● 底部相册列表中的图片：组件；

● 右下角悬浮按钮：组件。

1）顶部标题面板设计

先进行顶部标题面板的设计，并在页面上预留出底部相册列表区域和按钮的代码位置。

index.wxml代码如下：

1. <!-- 1 顶部标题面板 -->
2. <view class="topBox">
3. <!-- 1-1 标题 -->
4. <text class="title">我的摄影相册</text>
5. <!-- 1-2 副标题 -->
6. <text class="subTitle">好友可见 · 10照片</text>
7. </view>
8. 
9. <!-- 2底部相册列表 -->
10. …待补充…
11. 
12. <!-- 3 悬浮上传按钮 -->
13. …待补充…

index.wxss样式代码如下：

1. /* 1 顶部标题面板 */
2. .topBox {
3. /* 宽高尺寸 */
4. width: 100%;
5. height: 300rpx;
6. /* 渐变背景颜色 */
7. background: linear-gradient(to bottom right, #0081ff, #1cbbb4);
8. /* 垂直居中布局 */
9. display: flex;
10. flex-direction: column;
11. align-items: center;
12. justify-content: center;
13. }
14. 
15. /* 1-1 标题 */
16. .topBox .title {
17. font-size: 50rpx;/* 字体大小 */
18. color: white;/* 文字颜色 */
19. }
20. 
21. /* 1-2 副标题 */
22. .topBox .subTitle {
23. color: whitesmoke;/* 文字颜色 */
24. margin-top: 20rpx;/* 外边距顶部 */25. }

其中第7行用到的linear-gradient可以为面板做一个背景颜色的渐变特效。开发者如果有兴趣还可以自行更换其它颜色进行尝试。

此时顶部标题面板区域就完成了，效果如图7-16所示。

■ 图7-16  顶部标题面板效果图

2）底部相册列表设计

已完成区域内部分为标题区域和列表区域，index.wxml代码更新如下：

1. <!-- 1 顶部标题面板（…内容略…） -->
2. 
3. <!-- 2 底部相册列表 -->
4. <view class="photoBox">
5. <!-- 2-1 相片单张区域 -->
6. <view class="photoOne">
7. <!-- 2-2 图片 -->
8. <image src="http://localhost/myAlbum/pic01.jpg"></image>
9. </view>
10. </view>
11. 
12. <!-- 3 悬浮上传按钮 -->
13. …待补充…

注：如果要真机调试，请将上面第8行代码中的localhost换成同一局域网内的IP地址。

index.wxss代码追加内容如下：

1. /* 2 底部相册列表 */
2. /* 2-1 相册单张区域 */
3. .photoBox .photoOne {
4. /* 宽高尺寸 */
5. width: 250rpx;
6. height: 250rpx;
7. float: left;/* 向左浮动 */
8. padding: 7rpx;/* 内边距 */
9. box-sizing: border-box;/* 宽高要包含边框和内边距 */
10. }
11. 
12. /* 2-2 图片 */
13. .photoBox .photoOne image {
14. /* 宽高尺寸 */
15. width: 100%;
16. height: 100%;17. }

可以用wx:for属性改写相册相关代码，让其自动渲染出多张图片。由于暂时尚未能获取服务器端的完整图片列表数据，这里不妨先在index.js文件中简单写几个本地数据。

index.js的data属性修改如下：

1. // index.js
2. // 服务器地址，可根据实际情况修改
3. const baseUrl = 'http://localhost/'
4. 
5. Page({
6. 
7. /**
8. * 页面的初始数据
9. */
10. data: {
11. baseUrl:baseUrl,
12. photoList:[
13. 'myAlbum/pic01.jpg',
14. 'myAlbum/pic02.jpg',
15. 'myAlbum/pic03.jpg',
16. 'myAlbum/pic04.jpg',
17. 'myAlbum/pic05.jpg',
18. ]
19. },
20. …21. })

注：等逻辑实现环节获取实际图片列表数据时可以清空这里的临时数组photoList。

index.wxml代码修改如下：

1. <!-- 1 顶部标题面板 -->
2. <view class="topBox">
3. <!-- 1-1 标题 -->
4. <text class="title">我的摄影相册</text>
5. <!-- 1-2 副标题 -->
6. <text class="subTitle">好友可见 · {{photoList.length}}照片</text>
7. </view>
8. 
9. <!-- 2 底部相册列表 -->
10. <view class="photoBox">
11. <!-- 2-1 相片单张区域 -->
12. <view class="photoOne" wx:for="{{photoList}}" wx:key="*this">
13. <!-- 2-2 图片 -->
14. <image src="{{baseUrl+item}}"></image>
15. </view>
16. </view>
17. 
18. <!-- 3 悬浮上传按钮 -->
19. …待补充…

此时底部相册列表就全部做好了，效果如图7-17所示

■ 图7-17  底部相册列表效果图

3）浮动按钮设计

因为组件有很多自带样式不太容易调整成本次案例需要的效果，这里直接使用更简单的来实现，index.wxml代码更新如下：

1. <!-- 1 顶部标题面板（…内容略…）-->
2. <!-- 2 底部相册列表（…内容略…）-->
3. 
4. <!-- 3 悬浮上传按钮 -->
5. <view class="uploadBtn">+</view>

index.wxss代码更新如下：

1. /* 3 上传按钮 */
2. .uploadBtn {
3. /* 宽高尺寸 */
4. width: 100rpx;
5. height: 100rpx;
6. font-size: 80rpx;/* 字体大小 */
7. line-height: 90rpx;/* 行高 */
8. text-align: center;/* 字体水平方向居中 */
9. color: white;/* 文字颜色 */
10. background-color: #006FD1;/* 背景颜色 */
11. border-radius: 50%;/* 圆形边框 */
12. /* 绝对位置 */
13. position: fixed;
14. right: 60rpx;
15. bottom: 60rpx;16. }

此时设计环节就全部完成了，效果图如图7-18所示。

■ 图7-18  首页效果图

此时视图设计就全部完成了，下一节将进行页面的逻辑实现。