微信小程序把字符串或链接以二维码的形式显示 并且二维码大小自适应

本文介绍了一个使用微信小程序wxml和js实现的二维码生成案例。通过引入weapp-qrcode.js库,详细展示了如何在小程序中动态生成和更新二维码,包括设置二维码尺寸、颜色等属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

wxml
 <view class="erweima">
      <canvas class='erimg' canvas-id='canvas' style="width:{{code_w}}px; height:{{code_w}}px;"></canvas>  
 </view>
<button>点击生成二维码</button>
js
var QRCode = require('../../utils/weapp-qrcode.js')     //引入weapp-qrcode.js
var qrcode;
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
var colorDark="#000"
// 280rpx 在6s上为 140px
const code_w = 280 / rate;

Page({
	data:{
	   code_w: code_w,
	   consume:''
	}

  onLoad: function (options) {
	    let _this=this
	    qrcode = new QRCode('canvas', {
		      text: _this.data.consume,     //需要生成二维码的字符串或链接
		      width: code_w,
		      height: code_w,
		      colorDark:"#000",
		      colorLight: "white",
		      correctLevel: QRCode.CorrectLevel.H,
	    });
  },
  
   //点击生成二维码
	   button:function(){
	         this.setData({
	            consume: '12345678'
	          })
	          qrcode.makeCode(consume)
	   }
   })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值