微信小程序生成二维码

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

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

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

安装完成后页面进行导入

js 复制代码
// h5
import QRCode from 'qrcode';
// 小程序
import UQRCode from 'uqrcodejs';

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

vue 复制代码
<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>
js 复制代码
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() {
  	// 长按保存或分享
  },
}
css 复制代码
.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; /* 字体阴影 */ 
}

效果:打码了

相关推荐
小远yyds6 小时前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
万岳科技程序员小金7 小时前
从源码到成品应用:互联网医院系统与在线问诊APP的开发全解析
小程序·软件开发·app开发·在线问诊系统源码·在线问诊app开发
V+zmm101348 小时前
社区养老服务小程序ssm+论文源码调试讲解
java·服务器·前端·javascript·小程序·毕业设计·1024程序员节
说私域8 小时前
以客户为导向在开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序内容创作中的实践与价值
人工智能·小程序·开源
qq22951165029 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
2401_8441390311 小时前
Java爱情交友婚恋系统小程序源码
微信·微信小程序·小程序·微信公众平台·交友·微信开放平台
qq229511650211 小时前
asp.net+uniapp养老助餐管理系统 微信小程序
微信小程序·uni-app·asp.net
qq229511650212 小时前
微信小程序 uniapp网络记账设计个人理财系统
微信小程序·小程序·uni-app
阿斌_bingyu70913 小时前
一个小程序如何对接多个收款账户?
小程序·车载系统
guanpinkeji13 小时前
酒店民宿小程序,探索行业数字化管理发展
大数据·小程序·小程序开发·小程序制作·民宿小程序·酒店民宿小程序