搞定签到码，一切皆可码！！！微信小程序篇

2024-07-09 04:50| 来源: 网络整理| 查看: 265

此篇是摸鱼的时候写的（活gan完了），嘘嘘嘘....

很多人买了我的课堂签到，基于此，我打算写一写里面最有趣的签到码功能到底是如何实现的。

来个图，先理解一下业务逻辑

简单理解，生成二维码的过程就是把有用的信息藏在二维码，扫码就是取出有用的信息。

理解这个后，生成签到码其实就是把签到ID藏在二维码，扫码就是取出签到码ID。

为什么藏的是签到ID，而不是签到名称等等其他信息呢？这是个好问题。

举个例子：

存在数据库里的一条签到记录里大概如下：

{

qiandao_id:xxxxxxxx,

qiandao_name:第一节课签到

......

}

藏在二维码的信息一般是唯一性的信息，也就是不会重复的信息。例如签到ID。而签到名称可能会重复，所以不适合藏在二维码里。

那为什么藏的信息要唯一呢？这又是个好问题。

因为我们需要根据扫码取出来的信息去进行查询或更改数据库信息。例如我们扫签到码根据取出来的签到ID去查询获取该签到记录的签到名称等等其他信息进行展示。假设藏的是签到名称，数据库可能存了2条以上同名的签到记录。那程序就不知道该显示哪个签到名称等等信息了。

有了前面概念的基础，我们开始实操代码。

1、使用云函数生成签到码，并且把二维码存储到数据库。

生成签到码的云函数如下：

// 云函数入口文件const cloud = require('wx-server-sdk');cloud.init({ env:'你的云环境ID',});// 云函数入口函数exports.main = async (event, context) => { const result = await cloud.openapi.wxacode.getUnlimited({ // 调用生成小程序码的接口，携带一些参数,例如:scene page:event.page, //扫码后进入的页面 scene: event.qiandao_id, //把签到ID藏在二维码里 }); const upload = await cloud.uploadFile({ // 生成的小程序码上传到云存储中 cloudPath: 'qrcode/' + Date.now() + '-' + Math.random() + '.png', // 生成的小程序码存储到云存储当中去的路径 fileContent: result.buffer, }); return upload.fileID; // 返回文件的fileID,也就是该图片的网址。};

前端调用云函数：

//调用云函数 chang_code(){ let that = this; wx.showLoading({ title: '正在生成', }) //调用云函数获取云函数生成的小程序码 wx.cloud.callFunction({ name:'get_code', data:{ qiandao_id:that.data.qiandao_id, page:'pages/code_qiandao/code_qiandao', }, success:function(res){ //res.result就是云函数生成返回的签到码 //此处可以写存储签到码到数据库的代码 }, fail(er){ console.log(er) wx.hideLoading() wx.showToast({ title: '生成失败，请重试', icon: 'none', duration: 2000 }) } }) },

2、扫码获取签到ID，并且处理业务逻辑。

//扫码进来，这个函数就会自动执行，获取到签到ID onLoad: function (options) { this.setData({ qiandao_id:options.scene, // options.scene就是藏在二维码的签到ID }) //示例：此函数去查询获取该签到的基本信息并展示（想怎么操作就怎么操作） this.get_xinxi(options.scene) },

微信小程序的二维码都是如此而来，代码实现不同而已。例如核酸码、绿码、取餐码.....

甚至你也可以弄个简历码、表白码

由此可见，一切皆可码！！！

打工只是生存的手段，生活才是目的。

（下班做饭，生活的气息）

下期再会~

【本文地址】

公司简介

联系我们