目录
- 1 创建数据源
- 2 搭建管理后台
- 3 生成餐桌码
- 4 找到自己的appid和secret
- 5 小程序里获取餐桌信息
- 总结
我们上一篇介绍了点餐界面的菜品展示功能。现实中如果你去餐馆用餐，总是给餐桌贴一个二维码，服务员会告诉你扫码点餐。
扫码大家现在都已经非常熟练了，一般是打开微信，用扫一扫的功能扫码，会打开餐馆的小程序，在顶部会显示当前餐桌的编号，之后就是点餐了。
那这种一桌一码是如何实现的呢？我们本篇就介绍一下利用小程序码来实现一桌一码的功能。
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，显示餐桌编号等诸多功能。总体上，低代码如果涉及到云函数开发的，还是比较复杂的。一个是要知道微信小程序服务部分各个接口的调用逻辑关系，另外就是选用合适的第三方库调用接口，过程中还涉及到云开发的接口调用，还需要仔细调试才可以。
