如何在微信小程序中实现二维码生成与扫描？

微信小程序就是近年来火热的一种移动应用领域模式，它可以快速方便快捷地同时实现各种功能和体验。二维码就是一种方便快捷的信息传达方式，可以使用户随心所欲以获取有关信息。那么，在微信小程序中如何同时实现二维码分解成与读取呢？本文将为大家分别了解二维码分解成与读取的具体内容同时实现方法。

一、在微信小程序中同时实现二维码分解成

1.导入QRCode.js库

二维码分解成通常须要导入QRCode.js库，它就是一个JavaScript代码库，可以将选定的文本或网址切换为二维码图片。在微信小程序中，我们可以通过npm加装该库。

命令行中输出以下代码，就可以加装QRCode.js库：

npm install qrcode

2.导入QRCode.js库并同时实现二维码分解成

导入QRCode.js库后，我们就可以采用qrcode.js中的API同时实现二维码分解成了。比如，我们可以通过以下代码同时实现将一个网址分解成对应的二维码图片：

// pages/index/index.js

var QRCode = require('../../utils/qrcode.js')

Page({

onLoad: function () {

this.createQrCode('https://www.baidu.com')

},

createQrCode(url) {

var size = this.setCanvasSize() //动态设置画布大小

new QRCode({

canvasId: 'mycanvas',

text: url,

width: size.w,

height: size.h,

})

},

setCanvasSize: function () {

var size = {}

try {

var res = wx.getSystemInfoSync()

var scale = 375 / 750 //相同屏幕之下canvas的内置比例；设计宽度750之下

var width = res.windowWidth * scale //canvas画布宽度

var height = width //canvas画布高度

size.w = width

size.h = height

} catch (e) {

console.log("以获取设备信息失利" + e)

}

return size

}

})

代码表述：

（1）首先，我们通过require()方法导入了QRCode.js库。

（2）在onLoad()方法中，我们调用createQrCode()方法，将须要转换成二维码的网址传至。

（3）createQrCode()方法中，我们调用setCanvasSize()方法动态设置画布大小，并将传至的url、宽度、高度等参数托付给QRCode()构造函数。

（4）setCanvasSize()方法中，我们采用wx.getSystemInfoSync()以获取设备信息，然后根据相同设备的屏幕尺寸动态排序分解成的二维码画布大小。

（5）最后，我们将分解成的二维码画布图形至页面上即可。

二、在微信小程序中同时实现二维码读取

1.调用微信小程序API

在微信小程序中，我们可以轻易调用微信提供更多的API同时实现二维码读取。只须要导入wx.scanCode()方法，用户读取二维码后就可以立即获得读取结果。

2.导入wx.scanCode()方法并同时实现二维码读取

接下来，我们来看一下在微信小程序中同时实现二维码读取的具体步骤。

（1）首先，在wxml文件中嵌入一个按钮，命名为“读取二维码”，并给按钮嵌入一个页面事件。

（2）在js文件中，在Page()函数里嵌入scanCode()方法，并通过wx.scanCode()方法调用微信提供更多的读取二维码功能。读取二维码后，我们可以通过参数res以获取至读取结果。

// pages/index/index.js

Page({

scanCode: function () {

wx.scanCode({

success: (res) => {

console.log(res.result)

wx.showToast({

icon: 'none',

title: res.result,

duration: 2000

})

}

})

}

})

代码表述：

（1）我们在Page()函数里嵌入了一个名叫scanCode()的方法，该方法用作同时实现读取二维码功能。

（2）我们通过wx.scanCode()方法调用微信提供更多的扫码功能，并以电邮箭头函数的形式传达success反弹函数做为参数。

（3）在success反弹函数中，我们可以通过参数res以获取至读取结果，并将结果显示在页面上。

总结：

在微信小程序中，通过导入QRCode.js库可以方便快捷地分解成二维码图片。而通过调用微信提供更多的wx.scanCode()方法，用户可以通过小程序快速同时实现读取二维码的功能。二维码的分解成与读取在微信小程序中的同时实现，无疑大大提高了小程序的可视化体验。