我们上一篇介绍了点餐界面的菜品展示功能。现实中如果你去餐馆用餐，总是给餐桌贴一个二维码，服务员会告诉你扫码点餐。
扫码大家现在都已经非常熟练了，一般是打开微信，用扫一扫的功能扫码，会打开餐馆的小程序，在顶部会显示当前餐桌的编号，之后就是点餐了。
那这种一桌一码是如何实现的呢？我们本篇就介绍一下利用小程序码来实现一桌一码的功能。
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 Tokenconst token = await getAccessToken();console.log("token",token)// Step 2: Generate QR Code using the native requestconst 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 fileconst tempFilePath = '/tmp/qrcode.png'; // Temporary path for cloud functionsfs.writeFileSync(tempFilePath, response.data); // Save QR code image to temp file// Step 4: Upload QR code to Cloud Storageconst uploadResult = await app.uploadFile({cloudPath: `qrcodes/table-${scene}.png`, // Cloud storage pathfileContent: fs.createReadStream(tempFilePath) // Read the temp file as stream});// Step 5: Clean up the temporary filefs.unlinkSync(tempFilePath); // Delete the temp file after uploadreturn {success: true,fileID: uploadResult.fileID, // Return file ID for further access};} catch (err) {console.error(err); // Log the error for debuggingreturn {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，显示餐桌编号等诸多功能。总体上，低代码如果涉及到云函数开发的，还是比较复杂的。一个是要知道微信小程序服务部分各个接口的调用逻辑关系，另外就是选用合适的第三方库调用接口，过程中还涉及到云开发的接口调用，还需要仔细调试才可以。
