小程序云函数路由tcb-router入门(内附项目实践)

tcb-router – GitHub 地址

使用原因/解决痛点

1. 微信小程序云开发云函数有个数限制
2. 代码层级结构清晰，底层数据库操作函数可复用
3. 还原真实前后端交互过程

使用方法

安装

在小程序开发者工具下新建一个云函数，在终端的云函数文件夹下

npm install --save tcb-router
## 如果打算使用本地调试，需要再执行安装wx-server-sdk
npm install

云函数使用

(以下代码主要来源于作者的 github 示例，仅补充部分代码和注释)

// 假如需要进行数据库操作或登陆操作需要引入wx-server-sdk, 并启动
const cloud = require("wx-server-sdk");
cloud.init();
// 引入TcbRouter
const TcbRouter = require("tcb-router");

exports.main = (event, context) => {
  const app = new TcbRouter({ event }); // 此段代码不可省略

  // app.use 表示该中间件会适用于所有的路由(可不使用)
  app.use(async (ctx, next) => {
    ctx.data = {};
    await next(); // 执行下一中间件
  });

  // 路由为数组表示，该中间件适用于 user 和 timer 两个路由(可不使用)
  app.router(["user", "timer"], async (ctx, next) => {
    ctx.data.company = "Tencent";
    await next(); // 执行下一中间件
  });

  // 路由为字符串，该中间件只适用于 user 路由
  app.router(
    "user",
    async (ctx, next) => {
      ctx.data.name = "heyli";
      await next(); // 执行下一中间件
    },
    async (ctx, next) => {
      ctx.data.sex = "male";
      await next(); // 执行下一中间件
    },
    async (ctx) => {
      ctx.data.city = "Foshan";
      // ctx.body 返回数据到小程序端
      ctx.body = { code: 0, data: ctx.data }; // 此段代码不可省略，其余代码取决于操作本身
    }
  );

  // 路由为字符串，该中间件只适用于 timer 路由
  app.router(
    "timer",
    async (ctx, next) => {
      ctx.data.name = "flytam";
      await next(); // 执行下一中间件
    },
    async (ctx, next) => {
      ctx.data.sex = await new Promise((resolve) => {
        // 等待500ms，再执行下一中间件
        setTimeout(() => {
          resolve("male");
        }, 500);
      });
      await next(); // 执行下一中间件
    },
    async (ctx) => {
      ctx.data.city = "Taishan";
      // ctx.body 返回数据到小程序端
      ctx.body = { code: 0, data: ctx.data }; // 此段代码不可省略，其余代码取决于操作本身
    }
  );

  return app.serve(); // 此段代码不可省略
};

小程序使用

// 调用名为 router 的云函数，路由名为 user
wx.cloud.callFunction({
  // 要调用的云函数名称
  name: "router",
  // 传递给云函数的参数
  data: {
    $url: "user", // 要调用的路由的路径，传入准确路径或者通配符*
    other: "xxx",
  },
});

大佬的原理解析

小程序·云开发的云函数路由高级玩法

个人使用

在个人项目实践过程中，将云函数分为 DAO 层、Service 层和 Controller 层，并根据 RESTful 设计 API，但由于 tcb-router 暂不支持动态路由和 queryString，因此单列 method 和 queryString 字段以便进行判断和处理。

云函数

目录结构
路由文件 index.js

const cloud = require("wx-server-sdk");
const TcbRouter = require("tcb-router");

const userService = require("./service/userService");
const userServices = new userService();
// 云函数入口函数
exports.main = async (event, context) => {
  const app = new TcbRouter({ event });

  app.router("login", async (ctx, next) => {
    if (event.method === "POST") {
      const userId = cloud.getWXContext().OPENID;
      const { userInfo } = event.data;
      ctx.body = await userServices.login(userId, userInfo);
      return;
    }
  });

  return app.serve();
};

Service 层

const userDao = require("../dao/userDao");
class userService {
  constructor() {
    this.userDao = new userDao();
  }

  async login(userId, userInfo) {
    try {
      await this.userDao.login(userId, userInfo);
      return {
        code: 200,
        msg: "登陆成功",
        data: { userId, ...userInfo },
      };
    } catch (err) {
      return { code: 500, msg: "服务器错误！", err };
    }
  }
}

module.exports = userService;

DAO 层

const cloud = require("wx-server-sdk");
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
const db = cloud.database();
const collection = db.collection("user");
const _ = db.command;

class userDao {
  constructor() {}
  login(userID, userInfo) {
    return new Promise((resolve, reject) => {
      collection
        .doc(userID)
        .set({ data: userInfo })
        .then(() => {
          resolve();
        })
        .catch((err) => {
          reject(err);
        });
    });
  }
}
module.exports = userDao;

由于篇幅原因，仅列举登陆部分代码

小程序

封装 fetch 函数

export function fetch(params) {
  return new Promise((resolve, reject) => {
    const { url, queryString = null, data } = params;
    const method = params.method.toUpperCase();
    wx.cloud.callFunction({
      name: "request",
      data: { $url: url, method, queryString, data },
      success: (res) => {
        resolve(res.result);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

fetch 函数使用

fetch({
  url: "login",
  method: "POST",
  data: { userInfo: e.detail.userInfo },
}).then((res) => {
  app.toast(res.msg);
});

踩坑

1. tcb-router 暂不支持动态路由和 queryString

项目地址

个人开发的云开发小程序 Github 地址

打卡小程序，利用 tcb-router 规范云函数，功能已实现打卡目标的增删改查、打卡的增删改查以及打卡记录日历可视化，不断更新中，希望可以给个 Star

也欢迎有问题咨询、一并学习的小伙伴加群，或者添加个人微信 Class_Eddie