从零开始做一个小程序(1)
最近一直在做小程序的逆向和程序分析工作,闲来无事,刚好学一学小程序开发的整个流程,体验一下“全栈工程师”的感觉。
目标:制作一个群相册,能实现三大类功能:照片,视频,查看操作记录。
大致流程: 整体功能规划,前端设计,后端(逻辑,服务器,域名等),测试。
整体功能规划
前端设计
目的是熟悉整个前后端的交互过程,并不准备在前端投入太多精力。
目前的计划如下:
1. 采用底部tabBar的方式进行页面的切换,共三个主要页面,分别为相册,视频,修改记录。
2. 修改记录页面UI准备采用一些卡片样式的设计,显示部分照片,上传者姓名,修改时间。
3. 相册页面包括顶部的功能按钮(新建,删除),搜索框,相册缩略图。
主页的大致效果:
![](https://i-blog.csdnimg.cn/blog_migrate/cc57af71fd9a8bea258f81aa9aa01e56.jpeg)
相册页面的效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/06334e8aa761bef4b271196edacc6391.jpeg)
(时间有限,很丑见谅)
记录页面:
![](https://i-blog.csdnimg.cn/blog_migrate/f25038a9064c00df9f04f4f5ae827b04.png)
后面准备把卡片改成矩形长条样式
卡片样式的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>
后端
斥巨资(¥32)买了一个域名,但是下面该干啥有点懵,还是需要学习啊。。
summary
- 界面优化,或者搜索有没有可以直接import的样式
- 后端学习,包括需要做什么,如何去做