从 0 到 1 带你开发一个全端记账小程序（一）

目标：前后端联动实现全端记账小程序，让你进阶高级程序员。

后端技术栈：spring boot2.7+MySQL8.0+ redis5.0

前端技术栈：vue3+uniapp+vite+unibest

1，首页

1.1 页面分析

首页分为 3 部分，分别是顶部导航栏、搜索及统计区、列表展示、记账按钮，下面我们逐步进行编码实现。

1.1.1 顶部导航栏

顶部导航栏使用自定义导航栏，这样方便设置统一的背景色。

<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom', //自定义导航栏
    navigationBarTitleText: 'i 记账',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#44b57c',
    enablePullDownRefresh: true, //下拉刷新
    onReachBottomDistance: 50,
  },
}

为了复用顶部导航栏，我们可以自己封装一个简单的导航栏组件。

导航栏封装好以后，就可以在首页直接使用了。

<CCNavbar :bg-color="prop_color_out" title="i 记账"></CCNavbar>

看一下效果：

可以看到，顶部导航栏的标题、背景色、安全区都实现好了。

1.1.2 搜索及统计区

搜索主要包括按类型查找、按月份查找，统计内容包括本月支出和收入的总计。

因为下方内容区可能包括很多列表项，所以我们先给整体的内容区设计一个吸顶效果。

（gif 图曝光比较高，所以列表区的背景色无法很好的显示）

搜索区的源码如下：

js 相关的代码太多，就不一一展示了，后续会全部放到最终篇。

我们看下实现的效果：

1.2.3 列表展示

列表区我们按照每日明细为维度进行展示。

我们将列表项直接封装成一个组件，这样在首页只需引入组件就可以展示每日的明细了。

封装完这个组件，直接在首页引入即可。

<view class="body-list">
    <note-body :note="item" v-for="(item, index) in dataList" :key="item.id"></note-body>
</view>

1.2.4 记账按钮

最后，我们再来实现记账按钮。

我们通过固定定位+zindex 即可轻松实现。

<view class="fix-button" @click="note" v-if="showNoteBtn">
    <wd-icon name="edit-outline" size="25px" color="#44b57c"></wd-icon>
    <text class="fix-button-text">记一笔</text>
</view>

.fix-button-text {
  margin-right: 10rpx;
}
.fix-button {
  display: flex;
  align-items: center;
  gap: 10rpx;
  position: fixed;
  right: 38rpx;
  /* #ifdef H5 */
  bottom: 180rpx;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  bottom: 110rpx;
  /* #endif */

  z-index: 99;
  border-radius: 60rpx;
  background-color: #fff;
  color: $uni-primary;
  padding: 20rpx;
  border: 1px solid #ececec;
}

2，最后

今天我们先实现首页的相关功能，下一篇我们继续实现记账相关的逻辑。

（需要源码的同学可私信我）

再看下最终的效果吧。