原生微信小程序+云开发，源码给你们多久能开流量主？（下）

原创

一起重学前端

修改于 2024-11-20 20:43:58

3400

“好事”文章推荐：前端打包与资源优化导览

文章链接：https://cloud.tencent.com/developer/article/2466737

推荐好文介绍前端打包优化4个方向：减少打包时长、减少打包体积、减少访问时长、减少响应时长讲解每个方向都有哪些优化点等等

书接上回

「原生微信小程序+云开发，源码给你们多久能开流量主？（上）」

决战-云开发☁️

为什么要用云开发

我先引用微信小程序官方的介绍：

《优势》

无需搭建服务器快速构建小程序、公众号
免登录、免鉴权调用微信开放服务
统一开发多端应用
按量计费，成本更低

《能力》

储存数据与文件:「云数据库、云存储」
运行后端代码:「云函数」
扩展能力: 「静态网站、内容管理CMS」
打通微信生态: 「云调用、微信支付、环境共享」

是不是很牛逼，不知道大家怎么看，我觉得不管是在敏捷开发效率上，还是开发的便利性，或是微信生态环境的能量指数全都是五颗星啊，作为一个一直在一线从事前端开发的切图仔来说，自己开发一个完整的项目完全足够了。

战前准备工作

在创建项目的是时候，我选择了云开发

云函数--提供api接口能力
云数据库--提供数据库能力

配置app.js

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error("请使用 2.2.3 或以上的基础库以使用云能力");
    } else {
      wx.cloud.init({
        env: "换上你的云开发环境ID mp-6gxxxxx31",
        traceUser: true,
      });
    }
    this.globalData = {};
  },
  globalData: {
    mortgageData: null
  }
});

云数据库

因为对后端不是很熟悉，根据需要大概分了几个集合，欢迎指点

myb_user.json对应用户表{ "_id":"id", "province":"Hubei", "_openid":"openid", "loginTime":{"$date":"2021-02-05T06:41:43.744Z"}, "nickName":"记账喵喵", "city":"WuHan", "country":"China", "gender":1, "language":"zh_CN", "createdTime":{"$date":"2020-02-12T08:39:08.453Z"}, "updateTime":{"$date":"2021-02-05T06:41:43.744Z"}, "user":"BYD", "avatarUrl":"", "status":0 }
myb_book对应账本表{ "_id":"id", "isDefault":true, "isAuto":true, "_openid":"openid", "status":0," createdTime":{"$date":"2020-02-12T08:39:08.453Z"}, "updateTime":{"$date":"2020-02-12T08:39:08.453Z"}, "user":"BYD", "name":"喵喵默认账本" }{ "_id":"_id", "bookId":"bookId", "count":"9999", "incomeId":"XGJ4nYnnuWjcixB6", "incomeName":"工资", "typeText":"收入", "bookName":"喵喵默认账本", "date":1550100000000, "updateTime":{"$date":"2020-02-15T08:39:08.453Z"}, "createdTime":{"$date":"2020-02-15T08:39:08.453Z"}, "typeValue":1, "_openid":"openid", "desc":"", "user":"BYD", "status":0 }{"_id":"XGJ4nYnnuWjcixB6","name":"工资","status":0,"type":1} {"_id":"XGJ4tYnnuWjcixB7","name":"奖金","status":0,"type":1} {"_id":"XGJ4yVsqTi00tnMN","name":"投资","status":0,"type":1} {"_id":"XGJ45FsqTi00tnMO","name":"红包","status":0,"type":1} {"_id":"XGJ5FFsqTi00tnMP","name":"租金","status":0,"type":1} {"_id":"XGJ5LFsqTi00tnMQ","name":"兼职","status":0,"type":1} {"_id":"XGJ5PnkPDdDCJ5HQ","name":"补贴","status":0,"type":1} {"_id":"XGJ5UInnuWjcixB-","name":"其他","status":0,"type":1} {"_id":"XGJ6JlsqTi00tnMT","name":"其他","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMa","name":"吃喝","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMb","name":"交通","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMc","name":"服饰","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMd","name":"居家","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMe","name":"娱乐","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMf","name":"通讯","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMg","name":"学杂","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMh","name":"旅游","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMi","name":"人情","status":0,"type":2} {"_id":"XGJ6JlsqTi00tnMj","name":"医疗","status":0,"type":2}
myb_book_item对应记账记录表
myb_income_type对应记账类型表

云函数

对应创建的云数据库集合，大概也能得出所需要的云函数接口，后续还计划了开发多人账本、添加个性化记账类型等功能 🐦🐦🐦

登录login
获取记账类型数据
获取记账列表数据
记账账单的增删改查
记账统计数据

登录login

登录接口，可以直接获取user信息和openId 超级方便，登录的同时绑定账本

// 云函数入口文件
const cloud = require("wx-server-sdk");

cloud.init({
  env: '换上你的云开发环境ID,或者通过cloud.DYNAMIC_CURRENT_ENV获取',
});
const db = cloud.database({
  env: '换上你的云开发环境ID,或者通过cloud.DYNAMIC_CURRENT_ENV获取',
});

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  let user = event.user;
  let bookList = [];
  // 查询用户是否存在，更新用户信息
  db.collection("myb_user")
    .where({
      _openid: wxContext.OPENID,
      user: wxContext.OPENID,
    })
    .get()
    .then((resp) => {
      if (resp.data.length <= 0) {
        let newUser = {
          ...user,
          createdTime: new Date(),
          updateTime: new Date(),
          user: wxContext.OPENID,
          _openid: wxContext.OPENID,
          loginTime: new Date(),
          status: 0,
        };
        // 添加新的用户
        db.collection("myb_user")
          .add({
            data: newUser,
          })
          .then((resp) => {
            console.log(resp);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        let newUser = resp.data[0];
        newUser.loginTime = new Date();
        newUser.updateTime = new Date();
        newUser.status = 0;
        let _id = newUser._id;
        delete newUser._id;
        db.collection("myb_user")
          .doc(_id)
          .update({
            data: newUser,
          })
          .then((resp) => {
            // console.log(resp)
          })
          .catch((err) => {
            console.log(err);
          });
      }
    });
  // 登录后，自动创建默认账本，暂不支持修改
  await db.collection("myb_book")
    .where({
      _openid: wxContext.OPENID,
      isAuto: true,
      user: wxContext.OPENID,
    })
    .get()
    .then((resp) => {
      // 不存在默认账本，创新新的默认账本
      if (resp.data.length <= 0) {
        let book = {
          status: 0,
          createdTime: new Date(),
          updateTime: new Date(),
          user: wxContext.OPENID,
          name: "喵喵默认账本",
          isDefault: true,
          isAuto: true,
          _openid: wxContext.OPENID,
        };

        db.collection("myb_book")
          .add({
            data: book,
          })
          .then((resp) => {
            db.collection("myb_book")
              .where({
                _openid: wxContext.OPENID,
                isAuto: true,
                user: wxContext.OPENID,
              })
              .get()
              .then((book) => {
                bookList = book.data;
              }).catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        bookList = resp.data;
      }
    });

  return {
    event,
    bookList,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  };
};

记录saveData

记账记录的添加/修改

// 云函数入口文件
const cloud = require("wx-server-sdk");
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
});
const db = cloud.database({
  env: cloud.DYNAMIC_CURRENT_ENV,
});

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  let { collection, data } = event;

  let entity = {};
  let _id;
  
  // 判断是否已存在id
  if (data._id) {
    entity = data;
    _id = data._id;
    entity.updateTime = new Date();
    await db
      .collection(collection)
      .doc(_id)
      .update({
        data: entity,
      })
      .then((resp) => {})
      .catch((err) => {
        // console.log(err)
      });
  } else {
    entity = {
      ...data,
      createdTime: new Date(),
      updateTime: new Date(),
      user: wxContext.OPENID,
      _openid: wxContext.OPENID,
      status: 0,
    };

    await db
      .collection(collection)
      .add({
        data: entity,
      })
      .then((resp) => {})
      .catch((err) => {
        console.log(err);
      });
  }

  return {
    data: null,
    errCode: 0,
    errMsg: "操作成功",
  };
};

获取记账类型getIncomeType

这个地方很简单，正常操作。大家可以根据自己的想法，看看要不要添加一个新增/修改个性化记账类型接口

// 云函数入口文件
const cloud = require("wx-server-sdk");

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
});
const db = cloud.database({
  env: cloud.DYNAMIC_CURRENT_ENV,
});

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();

  let incomeTypes = [];

  await db
    .collection("myb_income_type")
    .where({
      status: 0,
    })
    .get()
    .then((resp) => {
      // console.log(resp.data)
      incomeTypes = resp.data;
    });

  return {
    data: incomeTypes,
    errCode: 0,
    errMsg: "操作成功",
  };
};

获取记账数据 getDataList

记账列表数据

// 云函数入口文件
const cloud = require("wx-server-sdk");
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
});
const db = cloud.database({
  env: cloud.DYNAMIC_CURRENT_ENV,
});

const MAX_LIMIT = 100;

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  let collection = event.collection;
  let dataList = [];

  const countResult = await db
    .collection(collection)
    .where({
      status: 0,
    })
    .count();
  const total = countResult.total;
  const batchTimes = Math.ceil(total / 100);

  const tasks = [];
  for (let i = 0; i < batchTimes; i++) {
    const promise = db
      .collection(collection)
      .where({
        status: 0,
      })
      .skip(i * MAX_LIMIT)
      .limit(MAX_LIMIT)
      .get();
    tasks.push(promise);
  }

  dataList = (await Promise.all(tasks)).reduce((acc, cur) => ({
    data: acc.data.concat(cur.data),
    errMsg: acc.errMsg,
  })).data;

  return {
    data: dataList,
    errCode: 0,
    errMsg: "操作成功",
  };
};

获取记账统计数据 getPagingDataList

根据记账类型，分类的统计数据

// 云函数入口文件
const cloud = require("wx-server-sdk");

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
});
const db = cloud.database({
  env: cloud.DYNAMIC_CURRENT_ENV,
});

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  console.log(event);
  let { collection, pageIndex, pageSize, orderFiled, order } = event;
  pageSize = pageSize || 10;
  let dataList = [];

  const countResult = await db
    .collection(collection)
    .where({
      status: 0,
    })
    .count();
  const total = countResult.total;

  dataList = await db
    .collection(collection)
    .orderBy(orderFiled || "_id", order || "desc")
    .limit(pageSize)
    .skip((pageIndex - 1) * pageSize)
    .get();

  let result = {
    list: dataList.data,
    total,
    pageIndex,
    pageSize,
  };

  return {
    data: result,
    errCode: 0,
    errMsg: "操作成功",
  };
};

后续关注微信小程序开发，如何快速找到合适的小程序、如何快速开通流量主，持续更新ing...

关注点赞评论一条龙，超过预期，提供所有代码，教你快速开流量主，赚钱小程序流量主日入100不是梦！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序云开发