「0.1分记账小程序翻身记」Uni-app、UniCloud、TM-Vuetify共同打造记账小程序

前端

2023-01-01 20:03:15

利用尖端技术打造卓越记账小程序：蜕变之旅

技术选型

在着手构建记账小程序时，我审慎地选择了技术栈：

Uni-app： 跨平台开发，简化多平台支持
UniCloud： 云端功能，轻松连接后端
TM-Vuetify： 美观 UI 框架，提升用户体验

实现思路

这款小程序秉承以下原则：

无缝登录： 自动登录，无需繁琐步骤
直观记账： 便捷地记录收入和支出
图表统计： 清晰呈现财务状况
预算管理： 设定预算，控制支出

具体实现

1. 无缝登录和注册

利用 UniCloud 云函数实现自动登录和注册：

// 云函数代码
const loginOrRegister = async (ctx) => {
  const { code } = ctx.request.body;
  const { openid } = await uniCloud.auth.getOpenidByCode(code);
  let user = await uniCloud.database.collection('users').where({ openid }).get();
  if (user.data.length === 0) {
    await uniCloud.database.collection('users').add({ openid });
    user = await uniCloud.database.collection('users').where({ openid }).get();
  }
  ctx.data = {
    token: 'YOUR_JWT_TOKEN',
    user: user.data[0],
  };
};

2. 直观记账

使用 Uni-app 表单轻松添加收入和支出：

<!-- 页面代码 -->
<template>
  <view>
    <form>
      <input type="number" v-model="income" placeholder="收入" />
      <input type="number" v-model="expense" placeholder="支出" />
      <button type="submit">提交</button>
    </form>
  </view>
</template>

<script>
  import { uniCloud } from "@uni-app/uni-cloud-js";
  export default {
    data() {
      return {
        income: 0,
        expense: 0,
      };
    },
    methods: {
      onSubmit() {
        const { income, expense } = this;
        uniCloud.database.collection('records').add({
          userId: 'USER_ID',
          income,
          expense,
          date: new Date(),
        });
        this.income = 0;
        this.expense = 0;
        uni.showToast({ title: '提交成功' });
      },
    },
  };
</script>

3. 图表统计

利用 TM-Vuetify 图表组件生成清晰的财务图表：

<!-- 页面代码 -->
<template>
  <view>
    <tm-vuetify-bar-chart :data="chartData" />
  </view>
</template>

<script>
  import { uniCloud } from "@uni-app/uni-cloud-js";
  export default {
    data() {
      return {
        chartData: [],
      };
    },
    onLoad() {
      const { userId } = uni.getStorageSync('userInfo');
      uniCloud.database.collection('records')
        .where({ userId })
        .orderBy('date', 'desc')
        .get()
        .then((res) => {
          this.chartData = res.data.map((item) => ({
            label: item.date,
            value: item.income - item.expense,
          }));
        });
    },
  };
</script>

4. 预算管理

使用 Uni-app 进度条组件实现预算控制：

<!-- 页面代码 -->
<template>
  <view>
    <tm-vuetify-progress-bar :value="budgetProgress" />
  </view>
</template>

<script>
  import { uniCloud } from "@uni-app/uni-cloud-js";
  export default {
    data() {
      return {
        budgetProgress: 0,
      };
    },
    onLoad() {
      const { userId } = uni.getStorageSync('userInfo');
      uniCloud.database.collection('users').where({ userId }).get().then((res) => {
        const budget = res.data[0].budget;
        uniCloud.database.collection('records').where({ userId }).orderBy('date', 'desc').get().then((res) => {
          const totalExpense = res.data.reduce((acc, cur) => acc + cur.expense, 0);
          this.budgetProgress = totalExpense / budget;
        });
      });
    },
  };
</script>