从小程序新手到全栈：群相册开发初体验-CSDN博客

本文链接：https://blog.csdn.net/sofreshcoder/article/details/124596525

从零开始做一个小程序（1）

最近一直在做小程序的逆向和程序分析工作，闲来无事，刚好学一学小程序开发的整个流程，体验一下“全栈工程师”的感觉。

目标：制作一个群相册，能实现三大类功能：照片，视频，查看操作记录。
大致流程： 整体功能规划，前端设计，后端（逻辑，服务器，域名等），测试。

整体功能规划

在这里插入图片描述

前端设计

目的是熟悉整个前后端的交互过程，并不准备在前端投入太多精力。
目前的计划如下：

1. 采用底部tabBar的方式进行页面的切换，共三个主要页面，分别为相册，视频，修改记录。
2. 修改记录页面UI准备采用一些卡片样式的设计，显示部分照片，上传者姓名，修改时间。
3. 相册页面包括顶部的功能按钮（新建，删除），搜索框，相册缩略图。

主页的大致效果:

相册页面的效果图：

(时间有限，很丑见谅)

记录页面：

后面准备把卡片改成矩形长条样式

卡片样式的wxss文件和wxml如下：

/* pages/uploadRecord/uploadRecord.wxss */

.card{
    border: 2px solid #ffffff;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 4px 1px 1px #cccccc;
    margin: 30px;
    position: relative;
    padding: 10px;
}

.card_image{
    width: 100%;
    height: 200px;
    background-color: #eeeeee;
}
.uploader{
    color: darkgrey;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    font-size: 12px;
}
.photo_video_title{
    color: darkgrey;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    font-size: 12px;
}

<!--pages/uploadRecord/uploadRecord.wxml-->
<scroll-view class="concrete_record" scroll-y>
    <view class="card" >
        <image class="card_imag" src="../../img/record_demo1.jpg" mode="widthFix"></image>
        <view class="uploder">上传者：xx，上传时间：xxx</view>
        <view class="photo_video_title">照片主题/视频标题：xxx</view>
    </view>
    <view class="card" >
        <image class="card_imag" src="../../img/record_demo2.jpg" mode="widthFix"></image>
        <view class="uploder">上传者：xx，上传时间：xxx</view>
        <view class="photo_video_title">照片主题/视频标题：xxx</view>
    </view>
    <view class="card" >
        <image class="card_imag" src="../../img/record_demo3.jpg" mode="widthFix"></image>
        <view class="uploder">上传者：xx，上传时间：xxx</view>
        <view class="photo_video_title">照片主题/视频标题：xxx</view>
    </view>

</scroll-view>