文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

教你简单搞定小程序扫一扫以及生成普通二维码功能

2023-10-22 06:16

关注

问题:

在生活中时常需要用小程序扫描识别相应的二维码(不包含小程序二维码),通过进入到相应的小程序,然后调起手机的相机进行扫一扫。那么将会更加方便简单的实现相应的功能。生成普通的二维码用weapp-qrcode.js来实现,识别二维码用wx.scanCode()或camera来实现,下面下面将会介绍实现步骤,也会介绍用识别这两种方法的优缺点。

例如:厂库的获取,用来扫一扫就不需要输入相应的编码规格直接就可以找到相应的商品,简单又高效


实现方法:

一、生成普通的二维码。

实现方法:通过引用weapp-qrcode.js来生成相应的二维码。如下所示

 

 

 (上面图片作展示效果,不作过多样式调整,需要的拿功能去慢慢优化自己样式)

下面作主要代码介绍

var QRCode = require('../../utils/weapp-qrcode.js')import rpx2px from '../../utils/rpx2px.js'const qrcodeWidth = rpx2px(300) //生成二维码图片set_img(){    qrcode = new QRCode('canvas', {      usingIn: this,      // text: "https://github.com/tomfriwel/weapp-qrcode",      image: '/images/bg.jpg',      width: qrcodeWidth,      height: qrcodeWidth,      // width: 150,      // height: 150,      colorDark: "#1CA4FC",      colorLight: "white",      correctLevel: QRCode.CorrectLevel.H,    });    // 生成图片,绘制完成后调用回调    qrcode.makeCode(z.data.text)}//下面是保存图片// 长按保存  save: function() {    console.log('save')    wx.showActionSheet({      itemList: ['保存图片'],      success: function(res) {        console.log(res.tapIndex)        if (res.tapIndex == 0) {          qrcode.exportImage(function(path) {            wx.saveImageToPhotosAlbum({              filePath: path,            })          })        }      }    })  }

二、识别二维码(除微信的二维码)。

 实现方法:通过引用wx.scanCode()或camera来识别二维码。如下所示

 (上面图片作展示效果,不作过多样式调整,需要的拿功能去慢慢优化自己样式)

下面作主要代码介绍

方法一:get_scanCode(){        var a = this;        wx.scanCode({            scanType: [ "barCode", "qrCode", "datamatrix", "pdf417" ],            success: function(t) {                console.log(t);                var o = t.result;                let data= a.SceneToObj(o,false);                console.log(data)                console.log(o), a.setData({                    show: o                });            },            complete() {                // 扫码震动                                // 播放音乐                //a.playMusic()            }        });},方法二:                 // 扫一扫 scancode: function(e) {        var that = this;        var result = e.detail.result;        if(result) {            that.setData({                scanResult: result,                canScan: false            });            wx.setNavigationBarColor({                backgroundColor: '#ffffff',                frontColor: '#000000'            });        }        that.setData({            show:result        })        // 扫码震动                // 播放音乐        //that.playMusic() },

 wx.scanCode()使用方法识别,点击扫描时候,会进入一个全屏识别扫描页面,该页面不可控,也不能在里面加入自定义样式等。

camera使用方法识别,可以自定义页面布局及样式,但初次未授权时候,会提示打开手机相机才行,不然将不会进行。


总结:

需要的源代码已经放到资源文件里面,将资源下载即可使用,里面也包含扫描需要的微信声音等。

资源下载

来源地址:https://blog.csdn.net/weixin_43452154/article/details/131705880

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯