几行代码封装,让小程序云函数变为真正云函数,开发体验直接起飞

一、目标

像调用普通方法那样使用云函数。

二、效果演示(以电影查询小程序为例)

三、小程序使用流程

  1. 核心封装代码:在 utils 目录创建 cloudFunction.js 文件
javascript 复制代码
/**
 * 导入云函数
 * @param {String} name 云函数名
 * @returns {Promise} 返回云函数处理结果
 */
globalThis.importCloudFunction = function (name) {
  return new Proxy(
    {},
    {
      get(target, prop) {
        return async function (...args) {
          let res = await wx.cloud.callFunction({
            name,
            data: {
              method: prop,
              params: args,
            },
          });
          return res.result;
        };
      },
    }
  );
};
  1. 导入封装代码:在 app.js 引入 cloudFunction.js
arduino 复制代码
// app.js
import "./utils/cloudFunction.js";
  1. 前端使用:在需要用的地方导入方法
scss 复制代码
// 某个页面.js
const { method1,method2,method3 } = importCloudFunction("函数名");
​
Page({
  data: {},
  onLoad() {
      method1();
  },
});

四、云函数使用流程

  1. index.js 封装的代码
ini 复制代码
exports.main = async (event, context) => {
  globalThis.originInfo = { event, context };
  const { method, params = [] } = event || {};
  if (method) {
    return require("./handle")[method](...params);
  }
  return { ...originInfo };
};
  1. 在同级目录创建handle.js
javascript 复制代码
module.exports = {
    method1(a,b){
        return a;
    },
    method2(a,b){
        return b;
    },
}

五、小程序电影示例逻辑源代码片段

developers.weixin.qq.com/s/Az8Mo3m47...

相关推荐
名字被你们想完了3 分钟前
Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(三)
前端·flutter
用户12039112947266 分钟前
从零掌握 React JSX:为什么它让前端开发像搭积木一样简单?
前端·react.js·面试
Jonathan Star6 分钟前
git commit --amend 是 Git 中用于修改最后一次提交的核心命令
前端·chrome·git
在掘金8011010 分钟前
RequireJS 详解
前端·javascript
cindershade12 分钟前
我对防抖(Debounce)的一点理解与实践:从基础到立即执行
javascript
morning_judger26 分钟前
JavaScript封装演进史:从全局变量到闭包
开发语言·javascript
spencer_tseng28 分钟前
jquery.min.js v1.12.4
javascript·jquery
派大鑫wink30 分钟前
Python 流程控制实战:打造文字版数独小游戏(新手友好)
服务器·前端·microsoft
飛67939 分钟前
玩转 Flutter 自定义 Painter:从零打造丝滑的仪表盘动效与可视化图表
开发语言·javascript·flutter
JIngJaneIL1 小时前
基于Java+ vueOA工程项目管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端