最小化裁剪 2023微信小程序云开发 快速入门

114 阅读4分钟

对微信云开发进行瘦身,快速打通前后端调用,记录过程中的数据传递完整样本。
通过一个按钮的点击去调用云函数,捕获过程中的各种数据
微信小程序界面端(类前端A)和云开发端(类后端C)。

正向编程思维:为了便于新手快速理解,忽略错误防护,确定唯一正确的执行路径。

一、微信小程序界面端(类前端)

为微信主体文件 app.js瘦身并完全中文化,便于新手理解。
将环境配置文件envList.js直接硬编码到app.js中,默认只有云开发,减少原有的配置判断。

图片.png

优化后的app.js,只有两个核心函数。在onLaunch中 获取wx.cloud 并赋值给 this.微信云,然后进行初始化

let 参数 =  { 
    
    微信云:{},// 默认实例 wx.cloud
    onLaunch(e) {
        let 参数 ={
            traceUser: true,    //是否在将用户访问记录到用户管理中,在控制台中可见
            env: 'wish2023-百万牛牛向前冲'   //环境ID,指定接下来调用 API 时访问哪个环境的云资源
        }
        this.微信云 = wx.cloud
        this.微信云.init(参数) //云能力初始化(注意小程序需先开通云服务
       
    },
    async 云函数(obj){
        let 参数 ={ // 调用云函数
            name: obj.name, //name 顶层云函数名字
            data: obj.data  //Object 自定义数据
        }
        console.log('【传入参数】',参数)
        try{
            const res = await this.微信云.callFunction(参数)
            return res
        }catch(e){
            console.dir(e)
            return {
                err:'发生某种错误'
            }
        }
        
    },
}//参数

App(参数)

在空白的test页面,为按钮绑定事件调用微信云函数my,函数入口对应服务器上相应的my文件夹

图片.pngpages/test/index.js中 使用const app = getApp()获取到小程序全局唯一的 App 实例,

图片.png

二、云开发端(类后端)

my/index.js代码,在微信小程序界面端通过按钮点击,传递参数

    async 点击(){
        let obj = {
            name:'my',
            data:{    //必须是对象
                a:'123'
            }
        }
        let  res = await app.云函数(obj)
        console.log(res)
    }

在云开发端(类后端) async (event, context)
event: 包含了界面传过来data中的参数和用户登录态 openId 和小程序 appId 信息

      "event": {
        "a": "123",
        "userInfo": {
          "appId": "wx0c386f46a46a6fed",
          "openId": "oo-OR66xdXSq8Pn5JD6otjT3GvrU"
        }
      }

context: 包含了用户和环境等信息

图片.png

图片.png

以下是 云服务端 my/index.js 代码

const 云开发端 = require('wx-server-sdk') // 云开发服务端SDK引入
云开发端.init({ // 初始化云开发环境  当前环境的常量
    env: 云开发端.DYNAMIC_CURRENT_ENV  
})
const db = 云开发端.database() // 取出数据库操作对象
// index.js 是入口文件,云函数被调用时会执行该文件导出的 main 方法
// event 包含了调用端(小程序端)调用该函数时传过来的参数,
// 同时还包含了可以通过 getWXContext 方法获取的用户登录态 `openId` 和小程序 `appId` 信息
exports.main = async (event, context) => {
    const { OPENID, APPID,ENV } = 云开发端.getWXContext() // 获取微信上下文
    //插入数据      // Error: access_token missing 微信未登陆 无授权
    let 数据 = {
        isAccept: true, // 是否接受
        isReply: false, // 是否回复
        createTime: new Date(), // 创建时间
        updateTime: new Date(), // 修改时间
        event: event,
        context:context,
    }
    
    const data = event.data; // 获取从小程序端传递过来的数据
    const res = await db.collection('my').add({
        data: 数据
    })

    let 返回值 ={OPENID,APPID,ENV,event,context, res}
    return 返回值
}//main

三、附:云函数过程中完整数据

{
    "result": {
      "OPENID": "oo-用户ID",
      "APPID": "应用ID",
      "ENV": "wish2023-百万牛牛向前冲",
      "event": {
        "a": "123",
        "userInfo": {
          "appId": "应用ID",
          "openId": "oo-用户ID"
        }
      },
      "context": {
        "callbackWaitsForEmptyEventLoop": false,
        "memory_limit_in_mb": 256,
        "time_limit_in_ms": 3000,
        "request_id": "0c09ea07-8bc5-4b69-b901-0edc5e0a933a",
		"environment": "环境信息",
		"environ": "环境信息",
        "function_version": "$LATEST",
        "function_name": "my",
        "namespace": "wish2023-百万牛牛向前冲",
        "tencentcloud_region": "ap-shanghai",
        "tencentcloud_appid": "132XXXX086",
        "tencentcloud_uin": "10003XXXX031"
      },
      "res": {
        "_id": "7dc1d50265226fa405e13dda11b09e3c",
        "errMsg": "collection.add:ok"
      }
    },
    "requestID": "0c09ea07-8bc5-4b69-b901-0edc5e0a933a"
  }

其中,当数据库调用成功,返回值为

图片.png

 "res": {
        "_id": "7dc1d50265226fa405e13dda11b09e3c",
        "errMsg": "collection.add:ok"
 }