微信小程序-二维码生成

1. 下载qrcode.js/qrcode.mini.js

2. 使用方式

wxml：

<view>
    <canvas class='canvas' mode="widthFix" canvas-id='canvas' bindlongtap="_saveQRcode"></canvas>
    <button bindtap="_makeQrcode">点击生成</button>
 </view>

wxss:

.canvas {
  margin: 10rpx auto ;
  margin-top: 20rpx;
  width: 200px;
  height: 200px;
  border: 10px solid var(--white);
  border-radius: 5%;
  background-color: var(--white);
}

js: 主要代码

var qrcode;

Page({

 data: {
    ...
 },

 /*点击按钮生成二维码*/
 _makeQrcode:function(){
    var text = "ssssssssssssss"
    qrcode.makeCode(text,function(){ 
      console.log("回调")
    });
 },

 /*长按保存*/
 _makeQrcode:function(){
    qrcode.exportImage(function(path) {
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success(res) {
          wx.showToast({
            title:'保存成功',
            icon:'success'
          })
        }, fail(err) {
          console.log(err.errMsg)
          if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
            wx.getSetting({
              success: (res) => {
                /* 页面初始化 */
                if(!res.authSetting["scope.writePhotosAlbum"]){
                  wx.showToast({
                    icon:'none',
                    title:'无法保存图片\r\n请开启“保存到相册”权限',
                    duration: 2000
                  });
                }
              }
            });
          }
        }
     })
   })
 },

 onload:function(){
     /* 初始化qrcode */
    qrcode = new QRCode('canvas', {
      usingIn: this,
      width: 200,
      height: 200,
      padding: 10,
      colorDark: "#1F1F1F",
      colorLight: "white",
      correctLevel: QRCode.CorrectLevel.H,
    });
  }
    
})

在以上基础上加点样式，效果如下

 

　　-------- 转载请标注