点击上方“水之Coding工房”并关注，更多好玩的等着你~
大家好，我是本公众号唯一御用小编，
水水是也！
总结页原型图
设计预期图
今天给大家带来的是学习专题——从0到1造个小程序 的实战篇5：页面设计之事项记录总结页。
有了首页查看事项列表，点击进入事项详情页查看详情，对时间管理事项计时结束后，总得对该次事项进行总结记录吧？对于本篇——实战篇的第5篇，则会将计时页点击计时结束并保存后所跳转的记录总结页进行页面设计&逻辑设计，同样地，这个页面做起来也不难，而且也是小程序的最后一个页面了，该页面完成以后，我们就进攻后端设计了，所以继续冲冲冲~
本文主要分为2个部分，主要分为页面分部分设计、功能逻辑设计。
那么接下来，我们就一点点地开始吧~
1. 页面分部分设计
同样地，按照惯例，先看看原型图和设计预期图：
那么我们再来分解一下，页面由那几部分组成：
- 事项标题；
- 记录统计：开始时间、结束时间、持续时间；
- 记录总结文本输入框；
有了这三部分的区分，我们就知道一个页面的骨架是怎么样的了。
同样的，事项标题直接根据后端传值、页面跳转传参加以页面渲染即可；对于记录总结的话，同样是对页面跳转传参解析即可；而对于文本框的话可以使用原生自带的组件即可，而对于保存按钮的话，绑定一个封装过的存入数据库的云函数方法就可以完成记录的持久化保存了。
因此分析完后，对总结页的设计是不是已经慢慢摸透了呢？那我们再看看wxml的代码该怎么写：
❝所以我们首先在
❞miniprogram/pages路径下新建summary文件夹，并新建pages并命名为index，形成记录总结页页面设计空间。
<view class="header">
<view class="title">{{eventTitle}}view>
<view class="subtitle">本次记录统计view>
view>
<view class="info-container">
<view class="date-container begin">
<view class="time">{{beginTime}}view>
<view class="date">{{beginDate}}view>
<view class="date-desc">开始时间view>
view>
<view class="duration-container">
<view class="duration">{{durationStr}}view>
<view class="line">view>
view>
<view class="date-container end">
<view class="time">{{endTime}}view>
<view class="date">{{endDate}}view>
<view class="date-desc">结束时间view>
view>
view>
<view class="subtitle">有什么要总结的吗？view>
<textarea name="textarea" bindinput="onSummaryInput" maxlength="140" />
<view class="button" bind:tap="onSubmit">保存view>
这么看来，这个页面的wxml代码，简单地不能再简单了吧？
那么我们再来看看wxss的样式设计：
//index.wxss
.header > .title {
font-size: 44rpx;
font-weight: bold;
margin: 24rpx 40rpx;
height: 48rpx;
}
.subtitle {
font-size: 32rpx;
color: #9370DB;
font-weight: bold;
margin: 16rpx 40rpx;
margin-top: 40rpx;
}
.info-container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 24rpx 40rpx;
margin-bottom: 80rpx;
padding: 24rpx;
border-radius: 18rpx;
box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.08);
}
.info-container > .date-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.info-container > .date-container.end {
align-items: flex-end;
}
.info-container > .date-container > .time {
font-weight: bolder;
font-size: 44rpx;
}
.info-container > .date-container > .date {
margin: 24rpx 0;
font-weight: bold;
font-size: 24rpx;
color: #555;
}
.info-container > .date-container > .date-desc {
color: #999;
font-weight: bold;
font-size: 24rpx;
}
.duration-container {
display: flex;
flex-direction: column;
align-items: center;
}
.duration-container > .duration {
margin: 16rpx 12rpx;
margin-top: 0;
color: #9370DB;
font-weight: bold;
font-size: 32rpx;
}
.duration-container > .line {
position: relative;
margin-bottom: 30rpx;
width: 120rpx;
height: 8rpx;
border-radius: 8rpx;
background-color: rgb(188, 170, 226);
}
.duration-container > .line::before {
position: absolute;
top: -6rpx;
left: 0;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #9370DB;
content: '';
}
.duration-container > .line::after {
position: absolute;
top: -6rpx;
right: 0;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #9370DB;
content: '';
}
textarea {
box-sizing: border-box;
border: 6rpx solid #f8f8f8;
background-color: #fff;
border-radius: 16rpx;
margin: 0 40rpx;
width: calc(100% - 80rpx);
padding: 24rpx;
font-size: 28rpx;
}
.button {
box-sizing: border-box;
padding: 16rpx 28rpx;
border-radius: 40rpx;
font-weight: bold;
background-color: #9370DB;
color: #EEE;
font-size: 32rpx;
margin: 0 auto;
text-align: center;
margin-top: 32rpx;
width: 200rpx;
}
那么，记录总结页的页面设计大功告成。
2. 功能逻辑设计
按照惯例，在编写逻辑前，我们先看看我们记录总结页的index.wxml中的各种按钮操作的方法以及对应的所有属性：
eventId: 事项id
eventTitle: 事项标题
begin: 开始时间毫秒数
beginTime: 格式化后的开始时间
beginDate: 开始日期
end: 结束时间毫秒数
endTime: 格式化后的结束时间
endDate: 结束日期
duration: 持续毫秒数
durationStr: 格式化后的持续时长
summary: 记录总结
isUploading: 是否正在上传标志
onSummaryInput(e)：总结文本输入方法
onSubmit()：总结文本提交方法
而对于提及方法的话，是需要调用云函数操作数据库的，基于解耦的原则，我们再将连接后端的方法放到models/summary.js中，而其中的话只有一个将总结文本持久化的方法：
//miniprogram/models/summary.js
export default class SummaryModel {
static addEventRecord(eventId, beginDate, endDate, duration, summary) {
return wx.cloud.callFunction({
name: 'addEventRecord',
data: {
eventId,
beginDate,
endDate,
time: duration,
summary
}
})
}
}
那么，对于页面js——index.js的编写的话，只需要围绕属性以及提及的方法展开编码即可，以下即为页面js的内容，已经加上了必要的注释，可以结合查看理解：
//miniprogram\pages\summary\index.js
//导入依赖类
import {
formatDate,
formatTime,
formatDurationToStr
} from '../../utils/dateTimeUtil'
import SummaryModel from '../../models/summary'
import { showToast } from '../../utils/UIUtil'
Page({
//初始化必要的属性值
data: {
eventId: '',
eventTitle: '',
begin: 0,
beginTime: '',
beginDate: '',
end: 0,
endTime: '',
endDate: '',
duration: 0,
durationStr: '',
summary: '',
isUploading: false
},
//onLoad钩子函数负责将页面跳转传过来的Data进行分解赋值
onLoad(options) {
const { eventId, eventTitle, beginDate, endDate, duration } = options
this.data.eventId = eventId
this.data.begin = +beginDate
this.data.end = +endDate
this.data.duration = +duration
this.setData({
eventTitle: decodeURIComponent(eventTitle),
beginTime: formatTime(+beginDate),
beginDate: formatDate(+beginDate),
endTime: formatTime(+endDate),
endDate: formatDate(+endDate),
durationStr: formatDurationToStr(duration)
})
},
//将总结文本赋值到summary属性中
onSummaryInput(e) {
this.setData({
summary: e.detail.value
})
},
//调用云函数，提交summary
onSubmit() {
if (this.data.isUploading) return
//将上传标志设置为true
this.data.isUploading = true
const { eventId, begin, end, duration, summary } = this.data
//调用Model中封装的调用云函数的方法
SummaryModel.addEventRecord(
eventId,
begin,
end,
duration,
summary ? summary : '无标题'
).then(
res => {
wx.navigateBack({
delta: 1
})
},
err => {
this.data.isUploading = false
showToast('提交失败')
}
)
}
})
至此，「记录总结页」页面和逻辑设计已经完成。之后的实战篇，将对小程序后端——数据库设计&云函数设计编写等进行实践实战。
■ Over ■
历史推荐
从0到1造个小程序 · 实战篇3：页面设计之事项详情页 从0到1造个小程序 · 实战篇2：页面组件化设计&首页逻辑设计 秋招已经全面开启？面试求职需要怎么准备？请收下这篇求职不完全准备指南！ 从0到1造个小程序 · 实战篇1：首页页面设计 ★
我是水水
我们下期再见
★本公众号不具备留言功能
有什么问题的话欢迎在后台输入框中回复哦~
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
