微信小程序开发案例 | 个人相册小程序（上）
阶段案例-个人相册小程序
01、准备工作
1 导入代码包
为了节约时间，这里我们直接把完成的小程序空白模板代码包templateDemo复制一份并重命名为demo07_myAlbum, 导入开发工具等待改造。
2 启动服务器
这里我们使用本地电脑安装phpStudy v8.1套件来模拟服务器效果，该套件的下载安装步骤见第5章“5.1.3 临时服务器部署”。本次阶段案例不需要使用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 自定义导航栏效果
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. …待补充…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-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. …待补充…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. }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. })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 底部相册列表效果图
3）浮动按钮设计
因为组件有很多自带样式不太容易调整成本次案例需要的效果，这里直接使用更简单的来实现，index.wxml代码更新如下：
1. <!-- 1 顶部标题面板（…内容略…）-->
2. <!-- 2 底部相册列表（…内容略…）-->
3.
4. <!-- 3 悬浮上传按钮 -->
5. <view class="uploadBtn">+</view>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 首页效果图
此时视图设计就全部完成了，下一节将进行页面的逻辑实现。
- 点赞
- 收藏
- 关注作者
评论（0）