当前位置: 首页 > news >正文

微信小程序生成二维码

目前是在开发小程序端 --> 微信小程序。然后接到需求:根据 form 表单填写内容生成二维码(第一版:表单目前需要客户进行自己输入,然后点击生成按钮实时生成二维码,不需要向后端请求,不存如数据库)。然后找了许多大神的笔记,可能是自己第一次开发小程序端,所以一直都不成功。最后找到了下面的一种方法。仅供参考。

首先需要打开终端,然后进行安装 qrcode.js 。

image-20241029093449997

// 安装
// h5
npm install qrcode
// 小程序
npm install uqrcodejs
-----------------------
// 若是安装不成,可以先查看一下镜像路径
npm config get registry
// 然后换成淘宝镜像
npm config set registry https://registry.npmmirror.com/
// 然后再安装

安装完成后页面进行导入

// h5
import QRCode from 'qrcode';
// 小程序
import UQRCode from 'uqrcodejs';

我选择的是点击生成按钮,然后用 popup 弹出框,在弹出框中让最后生成的二维码赋值给 <image :src="qrCodeImage"> 标签。

<view class="generate-code"><button @click="generateCode" type="primary" class="agree-btn">生成二维码</button><u-popup v-model="show" mode="center" width="80%" height="60%" border-radius="14"><view class="content"><view class="item-content"><view class="item-content-title">{{ marketUnit }}</view><view class="item-content-title">批次号:</view><!-- 这里需要注意:image 标签的是 h5 的生成方式,但是不能用于小程序端。想要生成小程序端,需要使用 canvas 标签来接收 --><!-- h5 --><image :src="qrCodeImage" class="item-content-title item-content-title-image"></image><!-- 小程序 --><canvas id="qrcode" canvas-id="qrcode" class="item-content-title item-content-title-image"/></view><button @click="saveOrShare" class="item-content-button">长按保存或分享	</button></view></u-popup><button @click="showQRCodeRecord" style=" background-color: #f0f2f6; color: #55aaff; font-size: 28rpx;text-align: center; padding-top: 10px; width: 50%; height: 76rpx;" >二维码生成记录</button>
</view>
data(){return{show: false,marketUnit: '',qrCodeImage: '',}
},
methods:{generateCode() {// 打开弹框this.show = true;this.createCode(); },async createCode() {// h5try {// 生成二维码const paramsString = JSON.stringify(this.dataForm)this.qrCodeImage = await QRCode.toDataURL(paramsString);} catch (error) {console.error('生成二维码失败:', error);}// 小程序const qr = new UQRCode();qr.data = JSON.stringify(this.dataForm);qr.size = 200;qr.make();const ctx = uni.createCanvasContext('qrcode', this); // 组件内调用需传this,vue3 中 this 为 getCurrentInstance()?.proxyqr.canvasContext = ctx;qr.drawCanvas();this.loading = false;this.marketUnit = "营销单位:";},saveOrShare() {// 长按保存或分享},
}
.generate-code {height: 100px;margin-top: 20%;
}
.agree-btn {color: #fff; border-color:#000; border-radius: 50rpx;width: 90%; height: 76rpx; font-size: 28rpx;
}
.content {background-color: #fffdb7;height: 100%;display: flex;flex-direction: column; /* 子元素垂直排列 */justify-content: center;align-items: center;
}
.item-content {background-color: #fff;width: 80%;height: 70%;
}
.item-content-title {margin-top: 7px; margin-left: 20px;
}
.item-content-title-image {margin-top: 10px;margin-left: 20px;width: 200px; height: 200px;
}
.item-content-button {width: 80%;height: 10%;background-color: #fff;color: #bc7a00;text-align: center;margin-top: 20px;font-size: 16px;/* text-shadow: 0.5px 0.5px 0.5px #000000; /* 字体阴影 */ 
}

效果:打码了

image-20241029095645106

相关文章:

微信小程序生成二维码

目前是在开发小程序端 --> 微信小程序。然后接到需求&#xff1a;根据 form 表单填写内容生成二维码&#xff08;第一版&#xff1a;表单目前需要客户进行自己输入&#xff0c;然后点击生成按钮实时生成二维码&#xff0c;不需要向后端请求&#xff0c;不存如数据库&#xf…...

自由软件与开源软件:异同与联系

自由软件与开源软件&#xff1a;异同与联系 随着信息技术的快速发展&#xff0c;自由软件运动与开源软件运动成为推动软件开发领域变革的重要力量。虽然这两个概念在日常对话中常被交替使用&#xff0c;但它们各自有着不同的理念和发展历程。本文将探讨自由软件运动与开源软件…...

Vue中ref、reactive、toRef、toRefs的区别

一、ref、reactive setup 函数中默认定义的变量并不是响应式的&#xff08;即数据变了以后页面不会跟着变&#xff09;&#xff0c;如果想让变量变为响应式的变量&#xff0c;需要使用 ref 和 reactive 函数修饰变量。 ref 函数可以把基本类型变量变为响应式引用reactive 函数…...

凸极式发电机的相量图分析和计算,内功率因数角和外功率因数角和功角的定义。

图1&#xff1a;同步发电机稳态相量图 若发电机为凸极式&#xff0c;由于凸极机正、交轴同步电抗不等&#xff0c;即xd≠xq&#xff0c;因此必须先借助虚构电动势 E ˙ Q E ˙ q − ( x d − x q ) I ˙ d \dot{E}_Q\dot{E}_q-(x_d-x_q)\dot{I}_d E˙Q​E˙q​−(xd​−xq​)…...

systemctl restart NetworkManager 重启后,文件/etc/resolv.conf修改失败

如果你在重启 NetworkManager 之后发现无法修改 /etc/resolv.conf 文件,这是因为 NetworkManager 会自动管理这个文件 为了解决这个问题,你可以采取以下两种方法之一: 方法一:禁用 NetworkManager 服务 使用以下命令停止 NetworkManager 服务:sudo systemctl stop Netwo…...

Admin.NET源码学习(5:swagger使用浅析)

直接启动Admin.NET.Web.Entry项目&#xff0c;会弹出swagger登录验证框&#xff0c;虽然采用Furion简化了项目加载过程及配置&#xff0c;但是学习源码过程就比较恼火&#xff0c;很多设置及功能搞不清楚到低是怎么启用的&#xff0c;本文记录学习Admin.NET项目中swagger的设置…...

在 openEuler 22.03 服务器上搭建 web 服务教程

一、项目背景与目标 在当今数字化时代,web 服务的搭建对于企业和个人来说都具有至关重要的意义。本项目旨在在 openEuler 22.03 服务器上搭建一个稳定、高效的 web 服务,以满足特定的业务需求。具体目标如下: 在 openEuler 22.03 服务器上成功安装和配置 Apache web 服务器…...

如何取消自动配置ipv4地址:步骤详解与实用指南

在现代网络环境中&#xff0c;自动配置IPv4地址&#xff08;APIPA&#xff0c;即自动专用IP寻址&#xff09;虽然为设备连接提供了便利&#xff0c;但在某些特定场景下&#xff0c;如服务器配置、网络故障排除等&#xff0c;手动设置静态IP地址成为必要之选。自动配置的IPv4地址…...

医院信息化与智能化系统(15)

医院信息化与智能化系统(15) 这里只描述对应过程&#xff0c;和可能遇到的问题及解决办法以及对应的参考链接&#xff0c;并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图&#xff0c;可以试试PlantUML&#xff0c;告诉GPT你的文件结构&#xff0c;让他给你对应…...

小红书笔记详情API接口系列(概述到示例案例)

小红书笔记详情数据API接口是小红书开放平台提供的一项服务&#xff0c;允许开发者获取小红书上的笔记详情数据。以下是对该接口及其使用方法的详细介绍&#xff1a; 一、接口概述 小红书笔记详情数据API接口提供了一系列的接口&#xff0c;允许开发者获取笔记的标题、正文、标…...

跨境电商平台系统开发

随着全球化的不断深入&#xff0c;跨境电商作为新兴的商业模式&#xff0c;越来越受到企业和消费者的关注。跨境电商平台的系统开发不仅涉及技术层面的挑战&#xff0c;更涉及到法律、物流、支付等多方面的因素。商淘云将分享跨境电商平台系统开发的主要环节&#xff0c;包括需…...

开源模型应用落地-qwen模型小试-Qwen2.5-7B-Instruct-玩转ollama-Modelfile文件(二)

一、前言 在AI大模型百花齐放的时代,很多人都对新兴技术充满了热情,渴望尝试。然而,实际上要入门AI技术的门槛非常高。除了需要高端设备外,还需要面对复杂的部署和安装过程,这让许多人望而却步。在这样的背景下,Ollama的出现为广大开发者和爱好者提供了一条便捷的道路,极…...

链表详解(一)

目录 顺序表的问题及思考链表链表的概念及结构链表的分类单链表的实现链表功能实现遍历链表void SLTprint(SLNode* phead)代码 创造新节点SLNode* CreateNode(SLNDataType x)代码 顺序表的问题及思考 中间/头部的插入删除&#xff0c;时间复杂度为O(N),效率低,但是尾部插入效率…...

npm入门教程6:npm脚本

一、npm脚本的基本用法 定义脚本 在package.json文件的scripts字段中&#xff0c;你可以定义多个脚本命令。每个脚本都是一个键值对&#xff0c;其中键是脚本的名称&#xff0c;值是要执行的命令。例如&#xff1a; "scripts": {"start": "node index…...

用Python脚本执行安卓打包任务

这个样例是基于windows系统写的python打包安卓的脚本&#xff1a; 一、配置AndroidStudio下的打包任务 1.在Android项目根目录下的build.gradle文件配置生成Release包的任务&#xff1a; task cleanAll(type: Delete) {delete rootProject.buildDirrootProject.subprojects.e…...

制作安装k8s需要的离线yum源

制作安装k8s需要的离线yum源 添加docker在线源制作安装k8s命令行工具需要的离线yum源传到内网k8s节点&#xff0c;通过如下命令导出镜像&#xff1a; 要全内网环境安装docker、k8s和相关依赖&#xff0c;需要在内部提供安装k8s、docker需要的yum源 添加docker在线源 yum-confi…...

Node学习记录-events

来自&#xff1a;https://juejin.cn/post/7285915718666354723 和 https://nodejs.cn/api/events.html Nodejs核心API都是采用异步事件驱动架构&#xff0c;在该架构中&#xff0c;某些类型的对象&#xff08;触发器&#xff09;触发命名事件&#xff0c;导致调用Function对象(…...

Java Collection/Executor DelayedWorkQueue 总结

前言 相关系列 《Java & Collection & 目录》《Java & Executor & 目录》《Java & Collection/Executor & DelayedWorkQueue & 源码》《Java & Collection/Executor & DelayedWorkQueue & 总结》《Java & Collection/Executor &a…...

《TCP/IP网络编程》学习笔记 | Chapter 1:理解网络编程和套接字

《TCP/IP网络编程》学习笔记 | Chapter 1&#xff1a;理解网络编程和套接字 《TCP/IP网络编程》学习笔记 | Chapter 1&#xff1a;理解网络编程和套接字基本概念服务端客户端 基于 Linux 平台的 "Hello world!" 服务端和客户端基于 Linux 的文件操作打开文件关闭文件…...

服务端监控工具:Nmon使用方法

在性能测试过程中&#xff0c;对服务端的各项资源使用情况进行监控是很重要的一环。这篇博客&#xff0c;介绍下服务端监控工具&#xff1a;nmon的使用方法。 一、认识nmon 1、简介 nmon是一种在AIX与各种Linux操作系统上广泛使用的监控与分析工具&#xff0c;它能在系统运行…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...

比特币:固若金汤的数字堡垒与它的四道防线

第一道防线&#xff1a;机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”&#xff08;Hashing&#xff09;就是一种军事级的加密术&#xff08;SHA-256&#xff09;&#xff0c;能将信函内容&#xff08;交易细节&#xf…...

AWSLambda之设置时区

目标 希望Lambda运行的时区是东八区。 解决 只需要设置lambda的环境变量TZ为东八区时区即可&#xff0c;即Asia/Shanghai。 参考 使用 Lambda 环境变量...