精华内容
下载资源
问答
  • 微信小程序生成二维码,完整的二维码生成案例,可以快速应用,生成所需二维码。
  • 微信小程序生成二维码工具
  • 微信小程序生成二维码demo
  • 微信小程序生成二维码插件,可以直接生成 ,传入参数可以直接使用使用的canvas技术
  • 主要介绍了微信小程序生成二维码的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序生成二维码工具 生成二维码数据的主要代码来自,因为它这个里面生成二维码图片的功能在微信小程序里不能使用,我将这个功能改写成可以在微信小程序中使用。 截图 背景图测试中...(页面pages/test/test) ...
  • 微信小程序生成二维码js

    千次阅读 2019-04-24 12:21:53
    微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs 1、通过canvas的id来绘制二维码: 效果图:(单位是px,所以小程序的rpx要...

    hao

     

    微信小程序生成二维码js

    参考:https://github.com/tomfriwel/weapp-qrcode

    最新的二维码工具:https://github.com/KeeeX/qrcodejs

    1、通过canvas的id来绘制二维码:

                效果图:(单位是px,所以小程序的rpx要进行转换px)
        
                                                  1s
        二维码计算工具:
        /*********************************************   使用的是canvas的id,绘制在整个canvas上,包括导出图片*********************************************************************** */

          weapp-qrcode.js 下载使用

    QRCode = function (canvasId, vOption) {
    	this._htOption = {
    		width: 256,
    		height: 256,
    		typeNumber: 4,
    		colorDark: "#000000",
    		colorLight: "#ffffff",
    		correctLevel: QRErrorCorrectLevel.H
    	};
    
    	if (typeof vOption === 'string') {
    		vOption = {
    			text: vOption
    		};
    	}
    
    	// Overwrites options
    	if (vOption) {
    		for (var i in vOption) {
    			this._htOption[i] = vOption[i];
    		}
    	}
    
    	this._oQRCode = null;
    	this.canvasId = canvasId
    
    	if (this._htOption.text && this.canvasId) {
    		this.makeCode(this._htOption.text);
    	}
    };
    //创建二维码code
    QRCode.prototype.makeCode = function (sText, callback) {
    	this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
    	this._oQRCode.addData(sText);
    	this._oQRCode.make();
    	this.makeImage(callback);
    };
    //创建二维码图片
    QRCode.prototype.makeImage = function (callback) {
    	var _oContext
    	if (this._htOption.usingIn) {
    		_oContext = wx.createCanvasContext(this.canvasId, this._htOption.usingIn)
    	}
    	else {
    		_oContext = wx.createCanvasContext(this.canvasId)
    	}
    	var _htOption = this._htOption;
    	var oQRCode = this._oQRCode
    
    	var nCount = oQRCode.getModuleCount();
    	var nWidth = _htOption.width / nCount;
    	var nHeight = _htOption.height / nCount;
    	var nRoundedWidth = Math.round(nWidth);
    	var nRoundedHeight = Math.round(nHeight);
    
    	for (var row = 0; row < nCount; row++) {
    		for (var col = 0; col < nCount; col++) {
    			var bIsDark = oQRCode.isDark(row, col);
    			var nLeft = col * nWidth;
    			var nTop = row * nHeight;
    			_oContext.setStrokeStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
    			// _oContext.setStrokeStyle('yellow')
    			_oContext.setLineWidth(1)
    			_oContext.setFillStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
    			// _oContext.setFillStyle('red')
    			// if (bIsDark) {
    			_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
    			// }
    
    			// 안티 앨리어싱 방지 처리
    			// if (bIsDark) {
    			_oContext.strokeRect(
    				Math.floor(nLeft) + 0.5,
    				Math.floor(nTop) + 0.5,
    				nRoundedWidth,
    				nRoundedHeight
    			);
    
    			_oContext.strokeRect(
    				Math.ceil(nLeft) - 0.5,
    				Math.ceil(nTop) - 0.5,
    				nRoundedWidth,
    				nRoundedHeight
    			);
    			// }
    			// _oContext.fillRect(
    			//     Math.floor(nLeft) + 0.5,
    			//     Math.floor(nTop) + 0.5,
    			//     nRoundedWidth,
    			//     nRoundedHeight
    			// );
    			// _oContext.fillRect(
    			//     Math.ceil(nLeft) - 0.5,
    			//     Math.ceil(nTop) - 0.5,
    			//     nRoundedWidth,
    			//     nRoundedHeight
    			// );
    			// _oContext.clearRect(
    			//     Math.floor(nLeft) + 0.5,
    			//     Math.floor(nTop) + 0.5,
    			//     nRoundedWidth,
    			//     nRoundedHeight
    			// );
    			// _oContext.clearRect(
    			//     Math.ceil(nLeft) - 0.5,
    			//     Math.ceil(nTop) - 0.5,
    			//     nRoundedWidth,
    			//     nRoundedHeight
    			// );
    		}
    	}
    
       //二维码中间的logo(计算位置并绘制)
    	if (_htOption.image && _htOption.image != '') {
    	  _oContext.drawImage(_htOption.image, 0 + (_htOption.width - _htOption.width / 4) / 2, 0 + (_htOption.height - _htOption.height/4)/2, _htOption.width/4, _htOption.height/4)
    	}
    
    	_oContext.draw(false, callback)
    };
    
    // 保存为图片,将临时路径传给回调
    QRCode.prototype.exportImage = function (callback) {
    	if (!callback) {
    		return
    	}
    	wx.canvasToTempFilePath({
    		x: 0,
    		y: 0,
    		width: this._htOption.width,
    		height: this._htOption.height,
    		destWidth: this._htOption.width,
    		destHeight: this._htOption.height,
    		canvasId: this.canvasId,
    		success: function (res) {
    			callback(res.tempFilePath)
    		},
    		fail:res=>{
    			console.log(res)
    		}
    	})
    }
    
    QRCode.CorrectLevel = QRErrorCorrectLevel;
    

        
        生成二维码:
        

    <canvas class='canvas' style="width:{{120}}px; height:{{120}}px;" canvas-id='canvas'></canvas>
    
    .canvas{
      position: absolute;
      top: 200rpx;
      left: 240rpx;
    }
    
    var QRCode = require('../../../utils/weapp-qrcode.js')
    
    let that = this;
    new QRCode('canvas', {
      // usingIn: this,
      text: "漠天,技术开发,主要涉及android、weex、微信小程序、flutter、java等等",
      image: that.data.userIcon,
      width: 120,
      height: 120,
      colorDark: "#1CA4FC",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
    });
    


        
        
    2、通过canvas的context来绘制二维码:

        效果图:
        
                                                                    2s
        
        二维码计算工具:
                 /*********************************************   使用的是canvas的context对象,绘制在canvas的固定位置*********************************************************************** */

            weapp-qrcode.js 下载使用

     /*********************************************   使用的是canvas的context对象,绘制在canvas的固定位置*********************************************************************** */
    
    // QRCode object(传入canvas的context用来绘制,适用于在 canvas上某一部分绘制,在调用后  自己canvas.draw)
    QRCode = function (contextCanvas, vOption) {
    this._htOption = {
      width: 256,
      height: 256,
      typeNumber: 4,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRErrorCorrectLevel.H
    };
    
    if (typeof vOption === 'string') {
      vOption = {
    	text: vOption
      };
    }
    
    //   // Overwrites options
    if (vOption) {
      for (var i in vOption) {
    	this._htOption[i] = vOption[i];
      }
    }
    
    this._oQRCode = null;
    this.contextCanvas = contextCanvas
    
    if (this._htOption.text && this.contextCanvas) {
      this.makeCodeCanvas(this._htOption.text);
    }
    };
    
    //创建二维码code
    QRCode.prototype.makeCodeCanvas = function (sText, callback) {
    this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
    this._oQRCode.addData(sText);
    this._oQRCode.make();
    this.makeImageCanvas(callback);
    };
    
    //创建二维码图片
    QRCode.prototype.makeImageCanvas = function (callback) {
    var _htOption = this._htOption;
    var oQRCode = this._oQRCode
    
    var nCount = oQRCode.getModuleCount();
    var nWidth = _htOption.width / nCount;
    var nHeight = _htOption.height / nCount;
    var nRoundedWidth = Math.round(nWidth);
    var nRoundedHeight = Math.round(nHeight);
    
    for (var row = 0; row < nCount; row++) {
      for (var col = 0; col < nCount; col++) {
    	var bIsDark = oQRCode.isDark(row, col);
    	var nLeft = _htOption.startX + col * nWidth;
    	var nTop = _htOption.startY + row * nHeight;
    	this.contextCanvas.setStrokeStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
    	// _oContext.setStrokeStyle('yellow')
    	this.contextCanvas.setLineWidth(1)
    	this.contextCanvas.setFillStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
    	// _oContext.setFillStyle('red')
    	// if (bIsDark) {
    	this.contextCanvas.fillRect(nLeft, nTop, nWidth, nHeight);
    	// }
    
    	// if (bIsDark) {
    	this.contextCanvas.strokeRect(
    	  Math.floor(nLeft) + 0.5,
    	  Math.floor(nTop) + 0.5,
    	  nRoundedWidth,
    	  nRoundedHeight
    	);
    
    	this.contextCanvas.strokeRect(
    	  Math.ceil(nLeft) - 0.5,
    	  Math.ceil(nTop) - 0.5,
    	  nRoundedWidth,
    	  nRoundedHeight
    	);
      }
      // _oContext.fillRect(
      //     Math.floor(nLeft) + 0.5,
      //     Math.floor(nTop) + 0.5,
      //     nRoundedWidth,
      //     nRoundedHeight
      // );
      // _oContext.fillRect(
      //     Math.ceil(nLeft) - 0.5,
      //     Math.ceil(nTop) - 0.5,
      //     nRoundedWidth,
      //     nRoundedHeight
      // );
      // _oContext.clearRect(
      //     Math.floor(nLeft) + 0.5,
      //     Math.floor(nTop) + 0.5,
      //     nRoundedWidth,
      //     nRoundedHeight
      // );
      // _oContext.clearRect(
      //     Math.ceil(nLeft) - 0.5,
      //     Math.ceil(nTop) - 0.5,
      //     nRoundedWidth,
      //     nRoundedHeight
      // );
      //   }
    }
    
    //二维码中间的logo(计算位置并绘制)
    if (_htOption.image && _htOption.image != '') {
      this.contextCanvas.drawImage(_htOption.image, _htOption.startX + (_htOption.width - _htOption.width / 4) / 2, _htOption.startY + (_htOption.height - _htOption.height / 4) / 2, _htOption.width / 4, _htOption.height / 4)
    }
    
    };
    
    QRCode.CorrectLevel = QRErrorCorrectLevel;
    


        
        生成二维码:
        

     <canvas style="margin-top:30rpx;width:{{windowWidth/10*9}}px;height:{{windowHeight/10*9}}px;  image-rendering: pixelated" canvas-id="qrResultCanvas" bindlongtap="saveCanvasImage"></canvas>
    
    var QRCode = require('../../../utils/weapp-qrcode.js')
    
      /**
       * 页面的初始数据
       */
      data: {
    	userIcon:'',//用户头像
    	windowWidth: '',//屏幕的宽度
    	windowHeight: '',//屏幕的高度
      },
      
      
    	/**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    	let that = this;
    	//获取微信系统信息
    	wx.getSystemInfo({
    	  success: function (systemInfo) {
    		that.setData({
    		  windowWidth: systemInfo.windowWidth,
    		  windowHeight: systemInfo.windowHeight,
    		})
    	  }
    	})
      }
    
    // 使用 wx.createContext 获取绘图上下文 context
    const context = wx.createCanvasContext('qrResultCanvas')
    
    new QRCode(context, {
      // usingIn: this,
      text: "漠天,技术开发,主要涉及android、weex、微信小程序、flutter、java等等",
      image: that.data.userIcon,
      width: 90,
      height: 90,
      startX: that.data.windowWidth / 10 * 6-30 ,
      startY: that.data.windowHeight / 10 * 7-20,
      colorDark: "#1CA4FC",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
    });
    
    context.draw()

     

    weapp-qrcode.js 下载使用

    展开全文
  • 微信小程序生成二维码相关问题

    千次阅读 2020-02-26 11:28:31
    请求微信小程序生成二维码接口的时候,报如下错误 {"errcode":40169,"errmsg":"invalid length for scene, or the data is not json string hint: [g2jV05444557]"}### 是scene参数为空,或者格式问题,检查你的...

    请求微信小程序生成二维码接口的时候,报如下错误

    {"errcode":40169,"errmsg":"invalid length for scene, or the data is not json string hint: [g2jV05444557]"}###

    是scene参数为空,或者格式问题,检查你的请求参数

    或者是你的长度超了:

    scene 长度不能超过32个字符,是json字符串。

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,608
精华内容 6,643
关键字:

微信小程序生成二维码

微信小程序 订阅