微信小程序开发案例 | 极简清单小程序（上）
【摘要】 阶段案例-极简清单小程序
阶段案例-极简清单小程序
01、准备工作
1 导入代码包
为了节约时间，这里我们直接把完成的小程序空白模板代码包templateDemo复制一份并重命名为demo08_todoList, 导入开发工具等待改造。
2 配置公共样式
在app.wxss文件中事先配置好一些常用的公共样式。
app.wxss代码如下：
1. /* 1 页面整体样式 */
2. page{
3. background-color: #eee;
4. }
5. /* 2 水平布局 */
6. .flexH{
7. display: flex;
8. flex-direction: row;
9. }
10. /* 3 垂直布局 */
11. .flexV{
12. display: flex;
13. flex-direction: column;
14. }
15. /* 4 布局交叉方向居中 */
16. .alignCenter{
17. align-items: center;18. }由于当前案例无需用到图片素材，此时就已经做好了准备工作，最终目录结构如下图所示：
■ 图8-12 项目目录结构
02、视图设计
1 导航栏设计
在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：
19. {
20. "pages":[…],
21. "window":{
22. "navigationBarBackgroundColor": "#4940ce",
23. "navigationBarTitleText": "极简清单",
24. "navigationBarTextStyle":"white"
25. },
26. …27. }
■ 图8-13 自定义导航栏效果
2 首页设计
首页主要是一个垂直排列、水平方向居中的布局，上方是代办区域、下方是已完成区域，右下角另外有一个悬浮在顶层的按钮。页面设计图如图8-14所示。
■ 图8-14 首页设计图
计划使用组件如下：
● 代办|已完成区域及其内部每一行区域：<view>组件；
● 多选框：<checkbox>组件；
● 事项文字描述：<text>组件；
● 添加按钮：<view>组件。
1）代办区域设计
先进行代办区域的设计，并在页面上预留出已完成区域和按钮的代码位置。
index.wxml代码如下：
1. <!-- 1 代办区域 -->
2. <view id="todoBox" class="flexV">
3. …待补充…
4. </view>
5.
6. <!-- 2 已完成区域 -->
7. …待补充…
8.
9. <!-- 3 浮动按钮 -->
10. …待补充…代办区域整体样式在index.wxss中补充，index.wxss样式代码如下：
1. /* 1 代办区域 */
2. #todoBox {
3. margin: 20rpx;/* 外边距 */
4. padding: 15rpx;/* 内边距 */
5. border-radius: 20rpx;/* 圆角边框 */
6. background-color: white;/* 背景颜色*/7. }1. <!-- 1 代办区域 -->
2. <view id="todoBox" class="flexV">
3. <!-- 1-1 单行事项区域 -->
4. <view class="bar flexH alignCenter">
5. <!-- 1-1-1 多选框组件 -->
6. <checkbox color="white"></checkbox>
7. <!-- 1-1-2 事项文字 -->
8. <text>事项1</text>
9. </view>
10. </view>11. …1. /* 1 代办区域 */
2. #todoBox {…}
3.
4. /* 1-1 单条事项区域 */
5. .bar {
6. width: 100%;/* 宽度 */
7. padding: 15rpx;/* 内边距 */
8. box-sizing: border-box;/* 盒子尺寸包含边框和内边距 */
9. }
10.
11. /* 1-2 事项文字 */
12. .bar text {
13. margin-left: 20rpx;/* 外边距左侧 */
14. flex-grow: 1;/* 扩张占用全部剩余空间 */15. }1. Page({
2. /**
3. * 页面的初始数据
4. */
5. data: {
6. todoList: ['事项1','事项2','事项3']
7. },
8. …9. })1. <!-- 1 代办区域 -->
2. <view id="todoBox" class="flexV" wx:if="{{todoList.length>0}}">
3. <!-- 1-1 单行事项区域 -->
4. <view class="bar flexH alignCenter" wx:for="{{todoList}}" wx:key="index">
5. <!-- 1-1-1 多选框组件 -->
6. <checkbox color="white"></checkbox>
7. <!-- 1-1-2 事项文字 -->
8. <text>{{item}}</text>
9. </view>
10. </view>11. …此时代办区域就完成了，效果如图8-15所示。
■ 图8-15 代办区域效果图
2）已完成区域设计
已完成区域内部分为标题区域和列表区域，index.wxml代码更新如下：
1. <!-- 1 代办区域（…内容略…） -->
2. <!-- 2 已完成区域 -->
3. <view id="completeBox" class="flexV">
4. <!-- 2-1 标题区域 -->
5. …待补充…
6. <!-- 2-2 单行事项区域 -->
7. …待补充…
8. </view>
9.
10. <!-- 3 浮动按钮 -->
11. …待补充…1. /* 1 代办|已完成区域 */
2. #todoBox, #completeBox {
3. margin: 20rpx;/* 外边距 */
4. padding: 15rpx;/* 内边距 */
5. border-radius: 20rpx;/* 圆角边框 */
6. background-color: white;/* 背景颜色*/7. }接下来补充标题区域代码到index.wxml对应位置，index.wxml代码更新如下：
1. <!-- 1 代办区域（…内容略…） -->
2. <!-- 2 已完成区域 -->
3. <view id="completeBox" class="flexV">
4. <!-- 2-1 标题区域 -->
5. <view class="title flexH">
6. <!-- 2-1-1 左侧文字 -->
7. <text class="titleLeft">已完成</text>
8. <!-- 2-1-2 右侧文字 -->
9. <text class="titleRight">7</text>
10. </view>
11.
12. <!-- 2-2 单行事项区域 -->
13. …待补充…
14. </view>
15.
16. <!-- 3 浮动按钮 -->
17. …待补充…1. /* 1 代办|已完成区域 */
2. #todoBox, #completeBox {…}
3.
4. /* 1-1 单条事项区域 */
5. .bar {…}
6.
7. /* 1-2 事项文字 */
8. .bar text {…}
9.
10. /* 2 已完成区域 */
11. /* 2-1 标题区域 */
12. #completeBox .title{
13. padding: 20rpx;/* 内边距 */
14. }
15. /* 2-1-1 标题区域左边文字 */
16. #completeBox .title .titleLeft{
17. flex-grow: 1;/* 扩张占用全部剩余空间 */
18. }
19. /* 2-1-2 标题区域右边文字 */
20. #completeBox .title .titleRight{
21. color: gray;/* 文字颜色 */22. }1. <!-- 1 代办区域（…内容略…） -->
2. <!-- 2 已完成区域 -->
3. <view id="completeBox" class="flexV" wx:if="{{completeList.length>0}}">
4. <!-- 2-1 标题区域（…内容略…） -->
5. <!-- 2-2 单行事项区域 -->
6. <view class="bar flexH alignCenter" wx:for="{{completeList}}" wx:key="index">
7. <!-- 2-2-1 多选框组件 -->
8. <checkbox color="white" checked="{{isChecked}}"></checkbox>
9. <!-- 2-2-2 事项文字 -->
10. <text>{{item}}</text>
11. </view>
12. </view>
13.
14. <!-- 3 浮动按钮 -->
15. …待补充…index.js的data属性修改如下：
1. Page({
2. /**
3. * 页面的初始数据
4. */
5. data: {
6. todoList: ['事项1','事项2','事项3'],
7. completeList: ['事项5','事项6','事项7'],
8. isChecked: true
9. },
10. …11. })1. /* 2 已完成区域 */
2. /* 2-1 标题区域（…内容略…） */
3. /* 2-1-1 标题区域左边文字（…内容略…） */
4. /* 2-1-2 标题区域右边文字（…内容略…） */
5.
6. /* 2-2 代办单条记录 */
7. #completeBox .bar {
8. color: gray;/* 文字颜色 */
9. }
10. /* 2-3 checkbox已选中图标样式 */
11. #completeBox checkbox .wx-checkbox-input.wx-checkbox-input-checked {
12. background: #4940ce;/* 背景颜色 */13. }index.wxml代码更新如下：
1. <!-- 1 代办区域（…内容略…） -->
2. <!-- 2 已完成区域 -->
3. <view id="completeBox" class="flexV" wx:if="{{completeList.length>0}}">
4. <!-- 2-1 标题区域 -->
5. <view class="title flexH">
6. <!-- 2-1-1 左侧文字（…内容略…） -->
7. <!-- 2-1-2 右侧文字 -->
8. <text class="titleRight">{{completeList.length}}</text>
9. </view>
10.
11. <!-- 2-2 单行事项区域（…内容略…）-->
12. </view>
13.
14. <!-- 3 浮动按钮 -->
15. …待补充…
■图8-16 已完成区域效果图
3）浮动按钮设计
因为组件有很多自带样式不太容易调整成本次案例需要的效果，这里直接使用更简单的来实现，index.wxml代码更新如下：
1. <!-- 1 代办区域（…内容略…）-->
2. <!-- 2 已完成区域（…内容略…）-->
3.
4. <!-- 3 浮动按钮 -->
5. <view class="addBtn">+</view>1. /* 1 代办|已完成区域（…内容略…） */
2. /* 2 已完成区域（…内容略…） */
3.
4. /* 3 浮动按钮 */
5. .addBtn {
6. /* 宽高尺寸 */
7. width: 100rpx;
8. height: 100rpx;
9. font-size: 80rpx;/* 字体大小 */
10. color: white; /* 文字颜色 */
11. text-align: center;/* 水平方向文字居中 */
12. line-height: 90rpx;/* 行高 */
13. background-color: #4940ce;/* 背景颜色 */
14. /* 绝对位置 */
15. position: fixed;
16. right: 60rpx;
17. bottom: 60rpx;
18. border-radius: 50%; /* 圆角边框 */19. }
■ 图8-17 首页效果图
此时视图设计就全部完成了，下一节将进行页面的逻辑实现。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）