魔法降临！让小程序调用云函数如丝般顺滑，调用接口仿佛就是调用存在于本地的函数

在上一篇文章中，我们使用 rpc-server-tcb 彻底重构了云函数的服务端，让它变得前所未有的清爽。但一个完整的调用链路，客户端的体验同样至关重要。

让我们先回忆一下小程序原生调用云函数的方式：

javascript 复制代码

// 你是不是也厌倦了这样的代码？
wx.cloud.callFunction({
  name: 'rpc',
  data: {
    // 手动指定模块和方法名
    module: 'user',
    action: 'getInfo',
    params: { userId: '123' }
  },
  success: res => {
    if (res.result.success) {
      console.log(res.result.data);
    } else {
      console.error(res.result.error);
    }
  },
  fail: err => {
    console.error('调用失败', err);
  }
})

冗长的模板代码、手动拼接的参数、层层嵌套的回调...... 这简直是一场灾难！它不仅写起来痛苦，读起来更是一种折磨。

现在，准备好迎接魔法吧！

向你介绍 rpc-client-tcb ------ rpc-server-tcb 的黄金搭档。它将彻底颠覆你调用云函数的方式，让远程调用感觉就像在调用本地函数一样简单、自然。

✨ 见证奇迹的时刻

首先，在你的小程序 utils 目录下创建一个 rpc.js 文件来初始化客户端：

utils/rpc.js

javascript 复制代码

import { createRpcClient } from 'rpc-client-tcb';

// 只需要初始化一次，指定你的云函数入口名
const rpc = createRpcClient({
  functionName: 'rpc', 
});

export default rpc;

现在，假设我们要调用上一篇文章中 user 模块的 getInfo 方法，在页面中可以这样写：

javascript 复制代码

import rpc from '../../utils/rpc';

Page({
  async onGetUser() {
    try {
      // 看！就像调用一个本地的 user.getInfo 方法！
      const userInfo = await rpc.user.getInfo('123');
      
      console.log('获取成功:', userInfo); // { id: '123', name: 'Alice', role: 'admin' }
    } catch (error) {
      // 无论是网络错误还是业务错误，都能在这里被优雅地捕获
      wx.showToast({ title: error.message, icon: 'none' });
    }
  },
});

对比一下，天壤之别！

没有了 wx.cloud.callFunction 的任何踪影。
没有了手动拼装的 data 对象。
没有了烦人的 success/fail 回调。
参数 '123' 被直接、自然地传递。
完美拥抱 async/await 和 try...catch，代码逻辑清晰如画。

rpc.user.getInfo 仿佛就是一个真实存在于本地的函数，rpc-client-tcb 在底层为你处理了所有复杂的通信细节。

🚀 它如何赋能你的开发？

极致的开发体验: 获得完全"本地化"的函数调用体验，智能提示（IDE）也能更好地工作。
统一的错误处理 : try...catch 可以同时捕获网络异常、云函数执行失败、服务端业务逻辑抛出的错误，让你的错误处理逻辑空前统一和健壮。
类型友好: 虽然是动态调用，但其清晰的结构对 TypeScript 非常友好，你可以轻松地为你的 RPC 接口添加类型定义。
支持复杂应用 : 你的应用是不是像"工具箱"一样，有多个领域的云函数入口（如 rpc-pdf, rpc-image）？没问题！rpc-client-tcb 支持创建多个实例，让你的客户端架构同样清晰。

立即体验丝滑

在你的小程序项目根目录下，安装它：

bash 复制代码

npm install rpc-client-tcb

然后，构建 NPM，并开始享受这魔法般的开发体验吧！

rpc-server-tcb + rpc-client-tcb，我们为你提供了一套从云端到小程序端的完整 RPC 解决方案，旨在将开发体验提升到新的高度。

现在就去试试吧，我们保证，一旦用上，你将再也回不去了。

NPM 地址 : www.npmjs.com/package/rpc...

小程序示例片段 : developers.weixin.qq.com/s/BlGqopmS8...