当前位置：首页 > article >正文

点餐小程序实战教程13餐桌管理

article 2024/11/19 1:27:14

1 创建数据源

要管理餐桌，我们先需要创建一个数据源来录入餐桌的信息。打开应用编辑器，切换到数据源视图，点击+号创建数据源
在这里插入图片描述
录入数据源的名称餐桌

点击添加一列，输入字段名称编号，类型选择自动编号，最小位数选择1，起始值选择1

继续添加列，输入餐桌容纳人数，类型选择数字

继续添加列，输入餐桌状态，类型选择枚举
在这里插入图片描述
枚举值设置为空闲、使用中

2 搭建管理后台

切换到应用视图，打开我们的管理后台应用
在这里插入图片描述
点击创建页面图标

选择表格与表单页模板，在右侧选择餐桌数据源，布局选择左侧导航布局

切换到页面布局视图

选择左侧导航布局，选中布局组件，在右侧点击添加平级菜单，选择餐桌列表页面

点击页面设计视图，回到设计状态
在这里插入图片描述
点击实时预览，查看具体的效果

录入几条数据

3 生成餐桌码

后台搭建好之后，我们需要创建一个API来生成餐桌码。具体的思路是先调用小程序的token接口，获取接口的token。得到token之后再去调用小程序码接口，将返回的二进制数据写入到云存储，保存成图片。

有了图片之后，我们需要给后台增加一个下载二维码的功能，这样餐馆就可以打印二维码贴到餐桌上

为了保存我们的图片，我们需要在数据源再增加一列，餐桌码，类型选择图片
在这里插入图片描述
切换到APIs视图，点击+号创建API

选择云开发云函数

输入名称和标识，点击管理云函数

点击新建云函数

输入函数名称，createQRCode

点击确定完成云函数的创建

点击列表的函数名称，打开我们的云函数
在这里插入图片描述
切换到函数代码

点击文件，添加一个package.json文件

在package.json里输入如下配置信息

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@cloudbase/node-sdk": "latest",
    "axios":"latest",
    "fs":"latest"
  }
}

在index.js里输入如下代码

const axios = require('axios');
const tcb = require('@cloudbase/node-sdk');
const fs = require('fs');

const app = tcb.init();

async function getAccessToken() {
  const appid = '****';//替换成你自己的
  const secret = '***';//替换成你自己的
  const response = await axios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`);
  return response.data.access_token;
}

exports.main = async (event, context) => {
  const { scene, page } = event;

  try {
    // Step 1: Get Access Token
    const token = await getAccessToken();
    console.log("token",token)
    // Step 2: Generate QR Code using the native request
    const response = await axios.post(`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`, {
      scene: scene || 'a=1',
      page: page || 'pages/index/index',
      width: 430,
      env_version:"trial"
    }, {
      responseType: 'arraybuffer'  // Get the image as binary data
    });
    console.log(response.data)
    // Step 3: Save the QR code as a temporary file
    const tempFilePath = '/tmp/qrcode.png'; // Temporary path for cloud functions
    fs.writeFileSync(tempFilePath, response.data); // Save QR code image to temp file

    // Step 4: Upload QR code to Cloud Storage
    const uploadResult = await app.uploadFile({
      cloudPath: `qrcodes/table-${scene}.png`, // Cloud storage path
      fileContent: fs.createReadStream(tempFilePath) // Read the temp file as stream
    });

    // Step 5: Clean up the temporary file
    fs.unlinkSync(tempFilePath); // Delete the temp file after upload

    return {
      success: true,
      fileID: uploadResult.fileID, // Return file ID for further access
    };
  } catch (err) {
    console.error(err); // Log the error for debugging
    return {
      success: false,
      error: err,
    };
  }
};

代码的意思是访问二维码的接口并上传到云存储里

代码写好之后，点保存并安装依赖，安装完毕后会多一个node_modules文件夹，这个就是我们云函数需要使用到的第三方的库
在这里插入图片描述
之后点击测试，输入如下入参

{
    "scene": "3",
    "page": "pages/index/index"
}

点击运行测试可以看到结果
在这里插入图片描述
我们上传完毕后会返回文件的fileID，这个时候点击云存储，在对应的目录下查看文件是否上传成功

云函数开发好之后，回到我们的API界面，选择我们创建好的云函数，设置好入参和出参

在我们的后台应用，给表格的组件操作列添加一个按钮，内容修改为生成餐桌码，调用我们的云函数即可
在这里插入图片描述

云函数调用成功之后我们将生成的图片回写到表里

4 找到自己的appid和secret

打开微信公众平台，打开开发管理，在开发设置下找到你自己的appid和secret
在这里插入图片描述
一般密钥是需要点击重置获取，在弹窗里复制重置后的密钥，保存到电脑里，之后打开云函数替换就可以

5 小程序里获取餐桌信息

打开我们的小程序，在顶部添加一个文本组件
在这里插入图片描述
在代码区我们创建一个变量用来接收扫码之后的餐桌编号

餐桌编号我们是在页面加载的时候从入参里得到，点击右下角的代码编辑器

在onLoad函数里我们进行赋值操作

$w.page.dataset.state.table = query.scene

这样用户扫码之后就可以显示对应的餐桌编号信息，后续在点餐的时候就可以和餐桌进行关联

总结

我们本篇带着大家实现了一下扫码点餐时显示餐桌信息的功能，涉及到创建数据源，编制API，显示餐桌编号等诸多功能。总体上，低代码如果涉及到云函数开发的，还是比较复杂的。一个是要知道微信小程序服务部分各个接口的调用逻辑关系，另外就是选用合适的第三方库调用接口，过程中还涉及到云开发的接口调用，还需要仔细调试才可以。

查看全文

http://www.kler.cn/a/325304.html