微信小程序中生成二维码工具以及扫一扫

曾经终败给现在 2022-11-15 06:28 413阅读 0赞

微信小程序中生成二维码工具：[wxapp.qrcode.min.js][]

//画布的宽高和id必须给
    <canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
    <view>
          <button bindtap="scanCode">扫一扫</button>
    </view>

//将weapp.qrcode.min.js 拷贝至项目中，然后引用js文件
    let drawQrcode = require('../../utils/wxapp.qrcode.min.js');
    //再调用 drawQrcode() 绘制二维码
    qr(){ 
        drawQrcode({ 
          //宽度
            width: 200,
            //高度
            height: 200,
            //画布id
            canvasId: 'myQrcode',
            //要生成的内容
            text: 'https://baidu.com'
          })
      },
      //扫一扫
      // 允许从相机和相册扫码
      scanCode: function () { 
        wx.scanCode({ 
        scanType:['barCode', 'qrCode'],
          success(res) { 
            console.log(res)
            //result 所扫码的内容
            //scanType 所扫码的类型
            //charSet 所扫码的字符集
            //path 当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path
            //rawData 原始数据，base64编码
          }
        })
      },
      onLoad: function (options) { 
       this.qr()
      	//微信小程序码
       // let appid = '###'//小程序appid
        // let secret = '###'//秘钥
        // wx.request({ 
        // url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
        // method: 'GET',
        // success: function (res) { 
        // console.log(res.data.access_token, 'res.access_token')
        // wx.request({ 
        // url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,
        // method: 'POST',
        // data: { 
        // scene: 1012,
        // // 是否为Png，默认jpeg
        // is_hyaline: true,
        // // 是否自动取色
        // auto_color: true,
        // page: 'pages/index/index',
        // },
        // responseType: 'arraybuffer',
        // complete: function (res) { 
        // console.log(res, "图片地址")
        // let url= "data:image/png;base64," + wx.arrayBufferToBase64(res.data);//解析bae64图片
        // that.setData({ 
        // url: url
        // })
        // },
        // })
        // }
        // })
      }

[wxapp.qrcode下载地址][wxapp.qrcode]

[wxapp.qrcode.min.js]: https://download.csdn.net/download/weixin_49295874/16267574
[wxapp.qrcode]: https://codechina.csdn.net/mirrors/yingye/weapp-qrcode?utm_source=csdn_github_accelerator