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

作者：志昂张呀日期：2025/11/8

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

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属性相关代码如下：

11. {
22. "pages":[…],
33. "window":{
44. "navigationBarBackgroundColor": "#fff",
55. "navigationBarTitleText": "我的相册",
66. "navigationBarTextStyle":"black"
77. },
88. …9. }

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

图片

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

2 首页设计

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

图片

■ 图7-15 首页设计图

计划使用组件如下：

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

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

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

1）顶部标题面板设计

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

index.wxml代码如下：

11. <!-- 1 顶部标题面板 -->
22. <view class="topBox">
33. <!-- 1-1 标题 -->
44. <text class="title">我的摄影相册</text>
55. <!-- 1-2 副标题 -->
66. <text class="subTitle">好友可见 · 10照片</text>
77. </view>
88. 
99. <!-- 2底部相册列表 -->
1010. …待补充…
1111. 
1212. <!-- 3 悬浮上传按钮 -->
1313. …待补充…

index.wxss样式代码如下：

11. /* 1 顶部标题面板 */
22. .topBox {
33. /* 宽高尺寸 */
44. width: 100%;
55. height: 300rpx;
66. /* 渐变背景颜色 */
77. background: linear-gradient(to bottom right, #0081ff, #1cbbb4);
88. /* 垂直居中布局 */
99. display: flex;
1010. flex-direction: column;
1111. align-items: center;
1212. justify-content: center;
1313. }
1414. 
1515. /* 1-1 标题 */
1616. .topBox .title {
1717. font-size: 50rpx;/* 字体大小 */
1818. color: white;/* 文字颜色 */
1919. }
2020. 
2121. /* 1-2 副标题 */
2222. .topBox .subTitle {
2323. color: whitesmoke;/* 文字颜色 */
2424. margin-top: 20rpx;/* 外边距顶部 */25. }

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

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

图片

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

2）底部相册列表设计

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

11. <!-- 1 顶部标题面板（…内容略…） -->
22. 
33. <!-- 2 底部相册列表 -->
44. <view class="photoBox">
55. <!-- 2-1 相片单张区域 -->
66. <view class="photoOne">
77. <!-- 2-2 图片 -->
88. <image src="http://localhost/myAlbum/pic01.jpg"></image>
99. </view>
1010. </view>
1111. 
1212. <!-- 3 悬浮上传按钮 -->
1313. …待补充…

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

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

11. /* 2 底部相册列表 */
22. /* 2-1 相册单张区域 */
33. .photoBox .photoOne {
44. /* 宽高尺寸 */
55. width: 250rpx;
66. height: 250rpx;
77. float: left;/* 向左浮动 */
88. padding: 7rpx;/* 内边距 */
99. box-sizing: border-box;/* 宽高要包含边框和内边距 */
1010. }
1111. 
1212. /* 2-2 图片 */
1313. .photoBox .photoOne image {
1414. /* 宽高尺寸 */
1515. width: 100%;
1616. height: 100%;17. }

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

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

11. // index.js
22. // 服务器地址，可根据实际情况修改
33. const baseUrl = 'http://localhost/'
44. 
55. Page({
66. 
77. /**
88. * 页面的初始数据
99. */
1010. data: {
1111. baseUrl:baseUrl,
1212. photoList:[
1313. 'myAlbum/pic01.jpg',
1414. 'myAlbum/pic02.jpg',
1515. 'myAlbum/pic03.jpg',
1616. 'myAlbum/pic04.jpg',
1717. 'myAlbum/pic05.jpg',
1818. ]
1919. },
2020. …21. })

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

index.wxml代码修改如下：

11. <!-- 1 顶部标题面板 -->
22. <view class="topBox">
33. <!-- 1-1 标题 -->
44. <text class="title">我的摄影相册</text>
55. <!-- 1-2 副标题 -->
66. <text class="subTitle">好友可见 · {{photoList.length}}照片</text>
77. </view>
88. 
99. <!-- 2 底部相册列表 -->
1010. <view class="photoBox">
1111. <!-- 2-1 相片单张区域 -->
1212. <view class="photoOne" wx:for="{{photoList}}" wx:key="*this">
1313. <!-- 2-2 图片 -->
1414. <image src="{{baseUrl+item}}"></image>
1515. </view>
1616. </view>
1717. 
1818. <!-- 3 悬浮上传按钮 -->
1919. …待补充…

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

图片

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

3）浮动按钮设计

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

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

index.wxss代码更新如下：

11. /* 3 上传按钮 */
22. .uploadBtn {
33. /* 宽高尺寸 */
44. width: 100rpx;
55. height: 100rpx;
66. font-size: 80rpx;/* 字体大小 */
77. line-height: 90rpx;/* 行高 */
88. text-align: center;/* 字体水平方向居中 */
99. color: white;/* 文字颜色 */
1010. background-color: #006FD1;/* 背景颜色 */
1111. border-radius: 50%;/* 圆形边框 */
1212. /* 绝对位置 */
1313. position: fixed;
1414. right: 60rpx;
1515. bottom: 60rpx;16. }

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

图片

■ 图7-18 首页效果图

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

《微信小程序开发案例 | 个人相册小程序（上）》 是转载文章，点击查看原文。

上一篇：🍎 Electron 桌面端应用合法性问题全流程解决指南（新手友好版）

下一篇：自定义instanceof运算符行为API: Symbol.hasInstance

相关推荐

Python 的内置函数 getattr
IMPYLH2025/11/6

Python 内建函数列表 > Python 的内置函数 getattr def getattr(obj, name:str): ''' 获取属性的值 :param obj: 一个对象 :param name: 属性的名字 ''' Python 的内置函数 getattr 是一个非常有用的反射工具，主要用于动态获取对象的属性或方法。其基本语法为：getattr(object, name[, default])，其中 object 是目标对象，nam

Flash游戏破解参考
FD_20132025/11/1

编 者按：工作、学习之余，玩一会Flash小游戏，放松一下紧绷的神经，是不少朋友的最爱。不过，大部分Flash小游戏并不提供SWF文件的下载，想玩游 戏就必需打开网页，也给我们带来了不小的麻烦。当然，小小的问题难不倒我们，通过各种途径，我们依然可以获取各种被加密的SWF文件，从而无需联网，便能 在本地运行Flash小游戏。 对症下药，玩转Flash游戏下载 Flash游戏下载，关键便在于获取SWF文件的真实URL地址。由于不同类型的Flash游戏，采用的加密、运行方式各不相同，因此必需采

南京大学LLM开发基础（四）MoE, LoRA, 数的精度 + MLP层实验
nju_spy2025/10/30

https://njudeepengine.github.io/llm-course-lecture/2025/lecture8.html#1 目录 1. Mixture-of-experts (MoE) 1.1 优势 1.2 结构 1.3 训练 2. Low-rank adaptation (LoRA) 3. 数的精度 -- 混合精度 + 量化操作 Task1：DenseMLPWithLoRA 一、任务背景 二、任务要求 Task2：Sparse MLP 1.

【C++list】底层结构、迭代器核心原理与常用接口实现全解析
m0_748233642025/10/27

一、官方源码的探究 在实现list的底层前，我们先看下官方的核心成员变量，link_type node，其中link_type是list_node*，也就是说是节点的指针 在这里插入图片描述 下面我们看下其的初始化，在空初始化中，链表为空并不是把节点的指针给成空，而是给了个节点，让其的前驱指针和后继指针均指向自己，在C语言阶段的数据结构中我们便知道这个节点是哨兵位头节点 注意： 这里创捷新的节点不是new的，而是使用get_node出来的，这里是由于内存池的原因，后续再介绍

从复杂到高效：QtitanNavigation助力金融系统界面优化升级
Aevget2025/10/24

QtitanNavigation 组件模拟Microsoft Dynamics CRM-2016 / Office 365导航界面和一组控件，来改善Qt.C ++应用程序的用户体验。QtitanNavigation结合用户界面构建“Ribbon UI”和“Side Bar”的各种示例，可以更好地在您的应用程序中导航，使用户更直观地访问应用程序的某些部分。因此，它允许同时显示更多的信息，并让您高效地查看所有实体（工作区域，网格或其他项目），滚动次数更少，点击次数更少。与我们的其他解决方案一样，Qt

Rust 与 Go – 比较以及每个如何满足您的需求
std78792025/10/22

Rust 和 Go 是新的编程语言。每个都解决了以前编程语言（例如 C 和 C++）固有的问题。 如果您不确定哪一个适合您的项目，请查看这篇比较文章，我们将在其中更深入地研究 Rust 与 Go。 在比较结束时，您将清楚地了解 Rust 和 Go 提供的功能。我们将介绍它们的主要特点、优缺点、异同，并根据您的要求讨论正确的选择。 除此之外，我们还将争辩说，大多数团队可能能够同时使用这两种语言来支持他们的应用程序，并且比只坚持使用一种编程语言获得好处。 那么，为什么还要等呢？让我们

node.js上传图片接口
郏国上2025/10/21

node.js需要使用koa-multer库来实现上传图片接口。 实际上先通过koa-multer下载到本地指定目录，然后上传到阿里云（部分格式图片需要转换成网络格式图片jgp再上传）。 首先在系统启动文件引入注册路由： app.use(BodyParser({ 'formLimit':'3mb', 'jsonLimit':'3mb', 'textLimit':'3mb' })); // 注意顺序，必须body parser在前, router在后 app.use(rou

SpringBoot的学习
ʚ希希ɞ ྀ2025/10/20

学习目标： 1.掌握基于SpringBoot框架的程序开发步骤 2.熟练使用SpringBoot配置信息修改服务器配置 3.基于SpringBoot的完成SSM整合项目开发 下图创建一个Spring模块： 下图是一个SpringBoot程序最基本的架子： 如下一个SpringBoot程序就开发好了。 SpringBoot程序之所以好用是因为pom文件中的继承和一个dependency： 最后运行Application类： Spring程序和S

小杰深度学习（sixteen）——视觉-经典神经网络——MobileNetV2
jie*2025/10/19

7.MobileNetV2 1. 网络的背景 MobileNetV1 还不够轻量和高性能，为了让移动设备有更好的体验，Google 团队提出了 MobileNetV2 架构 MobileNetV2网络是由谷歌团队在2018年提出的，它相对于MobileNetV1而言，有着更高的准确率和更小的网络模型。 论文地址：https://arxiv.org/abs/1801.04381 Inverted Residuals and Linear Bottlenecks.pdf 2. 网络的

C#：函数默认参数
曹牧2025/10/17

C#函数默认参数允许在方法定义时为参数指定默认值，当调用时未提供该参数值则自动使用默认值：    ‌1、基本语法‌     在方法声明中通过参数名=默认值形式定义，例如void Print(string msg="default")。调用时可省略有默认值的参数Print()，此时msg取值为"default"。    ‌2、使用规则‌         默认参数必须从右向左连续定义，即某个参数有默认值后，其右侧所有参数必须都有默认值        默认值必须是编译时常量，不支持运行时动态赋值

上一篇：🍎 Electron 桌面端应用合法性问题全流程解决指南（新手友好版）

下一篇：自定义instanceof运算符行为API: Symbol.hasInstance

首页编辑器站点地图

Copyright © 2025 聚合阅读

License: CC BY-SA 4.0