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

梅米儿

于 2018-12-18 10:52:48 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41625322/article/details/85061477

本文介绍了一个使用微信小程序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)
	   }
   })