二维码做为一种快速获取信息的工具,已经被广泛应用至各个领域中。而在小程序中,如何同时实现短按辨识二维码,也沦为许多开发者关心的问题。在这篇文章中,我将互动一些同时实现短按辨识二维码的方法。
方法一:采用wx.previewImage API
在小程序中,可以采用wx.previewImage API,通过短按图片或辨识二维码去同时实现预览图片或辨识二维码的功能。具体内容操作步骤如下:
1.在wxml文件中嵌入图片组件
2.在js文件中嵌入previewImage方法
previewImage: function (event) {
wx.previewImage({
urls: [event.currentTarget.dataset.src], //当前图片地址
success:function(res){
console.log('预览图片顺利!')
},
fail:function(res){
console.log('预览图片失利!')
}
})
}
3.运转小程序,短按二维码图片,即可展开二维码辨识或预览图片。
方法二:采用第三方插件
除了采用wx.previewImage API之外,还可以采用第三方插件去同时实现短按辨识二维码的功能。知名的插件存有“QR Code Detector”和“QRCode-Weapp”。这两个插件都可以同时实现短按辨识二维码的功能,而且采用也十分直观。只须要在小程序中导入适当的插件,并调用适当的API即可。
下面以“QRCode-Weapp”为基准,了解具体内容的操作步骤:
1.在小程序根目录下,建立lib文件夹,并将“QRCode-Weapp”插件放进该文件夹中。
2.在项目app.js文件中导入插件,并调用initQrCode方法
var qrcode = require('./lib/qrcode-weapp.js'); //导入插件
App({
onLaunch: function () {
qrcode.initQrCode(); //初始化插件
}
})
3.在wxml文件中嵌入二维码图片组件
4.在js文件中嵌入scan方法
scan: function (e) {
var that = this;
qrcode.scanCode(e, function (res) { //传达事件和反弹函数
that.setData({
result: res //将二维码辨识结果留存至result中
});
});
}
5.运转小程序,短按二维码图片即可展开二维码辨识。
总结:
以上就是两种同时实现小程序中长按辨识二维码的方法。其中,wx.previewImage API就是小程序中自带的辨识二维码的功能,采用直观,适宜直观辨识二维码的场景;而第三方插件则适宜对辨识二维码展开订制化市场需求的场景。总之,相同的场景可以挑选相同的方法去同时实现短按辨识二维码的功能。