小程序云开发tcb-router快速上手及封装使用

前言 

最近发现小程序云开发推出了tcb-router的云函数路由管理工具，它是一个类似koa+koa-router的路由处理方式。

正好最近也在写云开发，就使用了一下，也踩了一些坑，下面介绍一下tcb-router的快速入门使用

tcb-router github链接

使用方式

首先需要安装tcb-router，先创建一个云开发项目，在云函数目录中创建一个router云函数，右键在外部终端打开，输入

npm install --save tcb-router

安装之后可以看到在router文件夹中有一个node_module目录，里面放着tcb-routert的依赖

然后引入tcb-rotuer，在router文件夹下的index.js文件中输入以下代码

// 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
    const app = new TcbRouter({event})
    app.router('hello'//路由的路径
       ,async (ctx, next) => {
        ctx.data = 'hello tcb-router';
        
    });
    return app.serve()
}

这时候可以在小程序中使用以下方法就可以获取到返回值了

const res = await wx.cloud.callFunction({
            name: 'router',//云函数名称
            data：{
                $url:'hello'//云函数路由路径
            },
            parse: true, //将返回的对象字符串解析为对象
        })
        console.log(res)

但是按照官方文档的方法只能将所有的路由和处理方法写在一个index.js文件中，所以我们需要改造一下调用方式

首先在router文件夹中新建api文件夹，用于存放所有的调用方法

然后在api文件夹中新建用户方法user.js，目录格式如下

在user.js中写入如下代码

const cloud = require('wx-server-sdk')
const user = {
    async login(ctx){
        const wxContext = cloud.getWXContext()
        ctx.body = wxContext   
    }
}

module.exports = user

将router文件夹下index.js修改为

// 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router')
const user = require('./api/user')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
    const app = new TcbRouter({event})
    app.router('/user/login', async ctx => {
        user.login(ctx)
    })
    return app.serve()
}

这样将方法和路由引用分离开来，所有的方法分类都写在api文件夹中，每一个分类是一个对象，对象中有这个分类的全部方法。将所有类在index.js文件中引入，并使用对应的路由路径去调用它。

在开发的时候就更加方便管理，当然以上方法只是个人的使用方式，如果有更好的使用方法也欢迎大神分享

下面再讲一下小程序的调用封装，在小程序中创建cloud.js文件，写入以下代码，

//cloud.js
const cloud = {
    async callFunc(url, data = {}) {
        data.$url = url //调用的路由路径
        const res = await wx.cloud.callFunction({
            name: 'router',
            data,
            parse: true, //将返回的对象字符串解析为对象
        })
        return res
    },
}
export default cloud

因为调用云函数的方法比较常用，所以将该文件在app.js中引入并挂载到全局

//app.js
import cloud from './utils/cloud'//封装方法的路径
App({
  onLaunch: function () {
    this.cloud = cloud //将cloud对象挂载到全局对象
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: '你的环境ID',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

调用的时候，调用方法如下，可以在所有的页面js文件中无需引入就可以调用啦

const res =  await getApp().cloud.callFunc('/user/login').catch(err=>{
            console.log(err)
        })
        console.log(res)

之所以将cloud文件导出为一个对象而不是直接导出一个callFunc方法是因为在项目过程中可以动态为cloud添加其他关于云函数的方法或变量，也无须再次引入其他JS文件啦。