微信小程序生成二维码

news2024/11/25 13:50:13

目前是在开发小程序端 --> 微信小程序。然后接到需求:根据 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() {
    // h5
    try {
      // 生成二维码
      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()?.proxy
    qr.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228634.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【论文阅读笔记】VLP: A Survey on Vision-language Pre-training

目录 前言2 特征提取&#xff08;Feature extraction&#xff09;2.1.1 图象特征提取OD-based Region feature / RoIFreeze the pre-trained object detectorsGrid features&#xff08;网格特征&#xff09;CNN-GFsEnd-to-End Training&#xff08;端到端训练&#xff09;ViT-…

【科研绘图】3DMAX管状图表生成插件TubeChart使用方法

3DMAX管状图表生成插件TubeChart&#xff0c;一款用于制作3D管状图表的工具。可以自定义切片的数量以及随机或指定切片颜色。 【版本要求】 3dMax 2008及更高版本 【安装方法】 TubeChart插件无需安装&#xff0c;使用时直接拖动插件脚本文件到3dMax视口中打开即可&#xff0…

CSS浮雕效果

效果图&#xff1a; HTML源码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Documen…

英飞凌TRAVEO-II MCU能做什么?

概述 英飞凌TRAVEO™T2G微控制器基于ArmCortex-M4(单核)/M7(单核/双核)内核,提供高性能、增强的人机界面、高安全性和先进的网络协议,专为电气化、车身控制模块、网关和信息娱乐应用等广泛的汽车应用量身定制。基于单核和双核操作的强大ArmCortexM系列内核,它提供了最先…

Ant-Dseign-Pro如何去国际化及删除oneapi.json后出现程序直接结束问题的解决方案

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;WebStorm 移除国际化 什么是国际化 在AntDesignPro当中&#xff0c;国际化就是如果你初始默认使用中文&#xff0c;想要切换英文&#xff0c;我们可以切换到英文模式。同时&#x…

UOS中读取 bitlocker加密的U盘

目前安装的1079专业版本&#xff0c;apt 安装的dislocker版本太低&#xff0c;要安个高点的 git clone https://github.com/Aorimn/dislocker sudo apt install gcc cmake make libfuse-dev libmbedtls-dev ruby-dev cd dislocker cmake . make sudo make install 这时运等l…

RHCE笔记-DNS服务器

一.DNS简介 DNS&#xff08;域名系统&#xff09;是一种互联网服务&#xff0c;负责将我们熟悉的域名&#xff08;比如 www.example.com&#xff09;转换为计算机能理解的IP地址&#xff08;比如 192.0.2.1&#xff09;。这样&#xff0c;当你在浏览器中输入网址时&#xff0c;…

自研小程序-心情追忆

在近期从繁忙的工作中暂时抽身之后&#xff0c;我决定利用这段宝贵的时间来保持我的Java技能不致生疏&#xff0c;并通过一个个人项目来探索人工智能的魅力。 我在Hugging Face&#xff08;国内镜像站点&#xff1a;HF-Mirror&#xff09;上发现了一个关于情感分析的练习项目&…

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

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

Pytorch学习--神经网络--线性层及其他层

一、正则化层 torch.nn.BatchNorm2d torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone)正则化的意义&#xff1a; 加速训练收敛&#xff1a;在每一层网络的输入上执行批量归一化可以保持数据的分布稳…

SSH免密钥登录

1: 用 ssh-key-gen 在本地主机上创建公钥和密钥 winr cmd 打开控制台 ssh-keygen -t rsa 一直按enter 2: 用 ssh-copy-id 把公钥复制到远程主机上 user 是用户名 remote_host是远程主机 ssh-copy-id -i ~/.ssh/id_rsa.pub userremote_host 3: 直接登录远程主机&#xf…

推荐一款优秀的pdf编辑器:Ashampoo PDF Pro

Ashampoo PDF Pro是管理和编辑 PDF 文档的完整解决方案。程序拥有您创建、转换、编辑和保护文档所需的一切功能。根据需要可以创建特定大小的文档&#xff0c;跨设备可读&#xff0c;还可以保护文件。现在您还能像编辑Word文档一样编辑PDF! 软件特点 轻松处理文字 如 Microso…

使用C语言实现经典贪吃蛇游戏

一、项目概述 我们的目标是创建一个基本的贪吃蛇游戏&#xff0c;它具有以下功能&#xff1a; 蛇能够根据玩家的键盘输入改变方向。 当蛇吃到食物时&#xff0c;蛇的长度增加&#xff0c;同时分数增加。 蛇可以在窗口边缘“穿墙”移动。 游戏界面包括一个蛇和一个随机出现…

Spring Boot Configuration和AutoConfiguration加载逻辑和加载顺序调整

在spring中&#xff0c; AutoConfiguration也是一个种Configuration&#xff0c;只是AutoConfiguration是不能使用proxy的。 而且spring对于两者的加载顺序也不是一视同仁&#xff0c;是有顺序的。spring会先加载SpringBootApplication可达的且标注了Configuration的类&#x…

算法速刷(LeetCode)(160.相交链表)

个人思路&#xff1a; 笨蛋做法&#xff0c;但是好用 代码如下 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution …

面试记录(1)

java中的抽象类和接口的区别&#xff1a; 相同点 (1) 都可以被继承 (2) 都不能被实例化 (3) 都可以包含方法声明 (4) 派生类必须实现未实现的方法 不同点 1.关键字不同&#xff1a; ​ ① 继承抽象类的关键字是extends&#xff0c;而实现接口的关键字是implements&#xff1b;…

MATLAB下的四个模型的IMM例程(CV、CT左转、CT右转、CA四个模型),附源代码可复制

文章目录 基于IMM算法的目标跟踪概述源代码运行结果代码结构与功能1. 初始化2. 仿真参数设置3. 模型参数设置4. 生成量测数据5. IMM算法初始化6. IMM迭代7. 绘图8. 辅助函数总结基于IMM算法的目标跟踪 概述 该MATLAB代码实现了基于交互式多模型(IMM)算法的目标跟踪,旨在估…

Jmeter实际应用

环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点&#xff0c;不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码&#xff0c;是要在jmeter中用的 keytool -import -ali…

使用 Flask 实现简单的登录注册功能

目录 1. 引言 2. 环境准备 3. 数据库设置 4. Flask 应用基本配置 5. 实现用户注册 6. 实现用户登录 7. 路由配置 8. 创建前端页面 9. 结论 1. 引言 在这篇文章中&#xff0c;我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架…

SystemC学习(3)— APB_SRAM的建模与测试

SystemC学习&#xff08;3&#xff09;— APB_SRAM的建模与测试 一、前言 二、APB_SRAM建模 编写APB_SRAM模型文件apb_sram.h文件如下所示&#xff1a; #ifndef __APB_SRAM_H #define __APB_SRAM_H#include "systemc.h"const int ADDR_SIZE 32; const int DATA_…