文章目录
- 一、需求
- 二、技术实现 - 利用qrcode-generator库
- 三、代码实现
一、需求
客户的需求是能将特定的url生成二维码，以便将二维码分享或贴到合同纸上给他的客户扫描查看信息。
这个url包含的内容类似于如下格式：
https://www.example.com/contract?bhid=HXDB-L-2024121503&bhcode=Swf3
效果如下：
二、技术实现 - 利用qrcode-generator库
我用的是wordpress，基于PHP，而且需要将二维码上传到服务器，并且写入到数据库中。所以最好的方式就是直接用PHP来写功能，而不是JS来实现。
能生成二维码的库不少，其中有一个不错，简单易用：qrcode-generator（https://github.com/kazuhikoarase/qrcode-generator）。
它可以用你最喜欢的编程语言来生成二维码，JS，java，PHP等都可以生成，案例地址：https://kazuhikoarase.github.io/qrcode-generator/js/demo/.
那么如何生成呢，我的思路就是，在保存保函的时候，通过wp的保存文章的钩子函数save_post调用二维码生成函数，生成二维码后，存储图片到服务器中，返回url写入到对应保函记录中。
三、代码实现
在wp的主题下，有个function.php，它允许开发者为主题添加功能、修改默认行为以及注册新的功能或功能模块等。比如我刚刚说的保函即为一种自定义文章类型，在该类型下，来生成保函信息和二维码的查询url等。
如果你还不了解wp的
function.php的作用，可以看这篇文章：https://blog.csdn.net/imqdcn/article/details/144529634
完成生成二维码图片，上传到服务器，并返回图片url的核心代码如下：
1、到qrcode-generator 的github仓库中下载 qrcode.php库，并且放在主题的inc文件夹下（你也可以放在主题根目录下）
然后在funnction.php中导入：
require_once get_template_directory() . '/inc/qrcode.php';
2、实现保存文章的钩子函数
function generate_qr_on_save($post_id) {// 检查是否是自动保存，防止重复执行if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return;}// 检查是否是特定的文章类型（可选）if (get_post_type($post_id) == 'baohan') {// echo '正在生成二维码...';// 获取文章的 bhid 和 bhcode 元数据$bhid = get_post_meta($post_id, 'bhid', true);$bhcode = get_post_meta($post_id, 'bhcode', true);// 确保必要数据存在if (empty($bhid) || empty($bhcode)) {return;}// 拼接要生成二维码的url$url = home_url() . '/baohan';$search = "bhid={$bhid}&bhcode={$bhcode}";$qr_content = $url . '?' . $search;// 生成二维码图像$qr = QRCode::getMinimumQRCode($qr_content, QR_ERROR_CORRECT_LEVEL_L);$im = $qr->createImage(4, 4);// 保存二维码到文件$upload_dir = wp_upload_dir();$file_path = $upload_dir['path'] . '/qr_' . $post_id . '.gif'; // 文件名以文章ID命名避免冲突imagegif($im, $file_path);imagedestroy($im);// 检查文件是否保存成功if (file_exists($file_path)) {// 构建二维码的 URL$qr_url = $upload_dir['url'] . '/qr_' . $post_id . '.gif';// 保存二维码 URL 到文章的 qrCode 元数据update_post_meta($post_id, 'qrCode', $qr_url);} else {error_log("Failed to save QR code for Post ID $post_id.");}}
}
add_action('save_post', 'generate_qr_on_save');
这样就可以保存二维码到wp的上传目录，且写入该二维码的url到当前文章的qrCode字段了。
因为我不需要在媒体库中管理，所以，并没有调用上传到媒体库的钩子函数，无法在后台的媒体库中看到。
3、如何显示到wp的管理后台（如图一效果）
只需要在遍历列表时，添加如下判断：
$qr_url = get_post_meta( $post->ID, 'qrCode', true );
if($qr_url){echo "<img src='{$qr_url}' width='100' height='100' />";
}else{echo "编辑或新建后保存一次，二维码才会生成";
}
这样就完美实现了如上需求。
也就是说二维码包含的信息可以是任意的，本文所实现的无非就是将特定的url转为二维码，并且将二维码图片上传到服务器而已。
如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。
免费答疑，行业深潜多年的技术牛人帮你解决bug。
并可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务。
祝你能成为一名优秀的WEB前端开发工程师！