生成二维码

axml

<view class="codeBox">
      <canvas id="barcode" onTap="previewBarcode" class="{{isClick ?'rotateAndScale':''}}">
      </canvas>
      <view a:if="{{isClick}}" onTap="previewBarcode" class="fullScreen" style="width:{{width+'px'}};height:{{height+'px'}}">
      </view>
      <view class="see-barCode">
        <view>{{qr_codeSign}}</view>
        <view onTap="seeCode" a:if="{{qr_codeSign}}">查看条形码数字</view>
      </view>
      <view class="qr-code">
        <canvas id="qrcode" />
      </view>
      <view class="remind" a:if="{{isCard==2}}">每隔1分钟自动
        <text style="margin-left:20rpx;" class="{{blue==true?'refresh':''}}" onTap="refreshSecond">刷新{{showSecond}}</text>
      </view>
      <view class="remind" a:if="{{isCard!=2}}">
      {{isCard}}
      </view>
    </view>

js

import { toBarcode, toQrcode } from '../../utils/utils';
import util from '../../utils/curtime.js';
var app = getApp();
var timer;
Page({
  data: {
    showSecond: '',
    blue: true,
    barCode: '',
    qr_code: '',
    qr_codeSign: '',
    qr_str: '',
    //是否绑卡
    isCard: 2,
    isClick: false,
    tapTime: '',        // 防止两次点击操作间隔太快
   },
  onLoad(options) {
    this.setData({
      width: my.getSystemInfoSync().screenWidth,
      height: my.getSystemInfoSync().screenHeight
    })
    console.log("width" + this.data.width);
    console.log("height" + this.data.height);
  },

  //点击条形码旋转放大
  previewBarcode() {
    this.setData({
      isClick: !this.data.isClick
    })
    console.log("===点击了条形码====");
  },

  //查看条形码数字
  seeCode() {
    console.log("==========================")
    if (this.data.qr_codeSign.indexOf("*") != -1) {
      this.setData({
        qr_codeSign: this.data.qr_code
      })
    } else {
      this.setData({
        qr_codeSign: this.data.qr_str
      })
    }
  },

  //生成二维码
  getCode() {
    let qr_code = "123456789";
    let code = "123456789";
    let str1 = code.substring(0, 4) + "******";
    this.setData({
      qr_code,
      qr_codeSign: str1,
      qr_str: str1
    })
    toBarcode('barcode', this.data.qr_code, 300, 60);
    toQrcode('qrcode', this.data.qr_code, 140, 140);
    console.log("========二维码=====")
  },
    onShow() {
      this.getCode();
      //定时器-60s刷新
      timer = setInterval(() => {
        this.getCode();
        console.log("====")
      }, 60000)
    },
    //刷新二维码
    refreshSecond() {
    var nowTime = new Date();
    if (nowTime - this.data.tapTime < 11000) {
      console.log('阻断')
      return;
    }
    clearInterval(timer);
    console.log("==点击了刷新==");
    if (this.data.blue == true) {
      this.getCode();
      console.log("==code==")
    }
    var _this = this;
    var coden = 10;//定义10s倒计时
    var time = setInterval(function () {
      _this.setData({
        showSecond: '(' + (coden--) + 's)',
        blue: false
      })
      if (coden == -1) {
        clearInterval(time);
        _this.setData({
          showSecond: '',
          blue: true
        })
      }
    }, 1000);
    timer = setInterval(() => {
      this.getCode();
      console.log("====")
    }, 60000)
    console.log('执行')
    this.setData({ tapTime: nowTime });
  },
})

acss

.codeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20rpx 0;
  z-index: 20;
  background: #fff;
}
.see-barCode {
  color: #92949a;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}
.see-barCode>view:nth-of-type(2n){
  margin-left: 20rpx;
}
.qr-code image {
  width: 200rpx;
  height: 200rpx;
}
.remind {
  color: #92949a;
  font-size: 26rpx;
}
.remind .refresh {
  color: #1164e0;
}
#barcode{
 margin: auto;
 z-index: 20;
 width: 300px;
 height: 60px;
}

#qrcode{
 width: 140px;
 height: 140px;
 box-sizing: border-box;
 margin: auto;
}

.barRotate{
    transform: scale(1.1);
}


/***********************************/
.rotateAndScale {
  transform: rotate(90deg) scale(2) translateX(30%);
}
/*适配，5*/
@media only screen and (max-width: 320px) and (max-height: 568px) {
    .rotateAndScale {
    transform: rotate(90deg) scale(1.5) translateX(15%);
  }
}
@media only screen and (min-width: 360px) and (max-height: 640px) {
    .rotateAndScale {
    transform: rotate(90deg) scale(1.5) translateX(25%);
  }
}
@media only screen and (min-width: 375px) and (max-height: 667px) {
    .rotateAndScale {
    transform: rotate(90deg) scale(1.5) translateX(25%);
  }
}
@media only screen and (min-width: 414px) and (max-height: 736px) {
    .rotateAndScale {
    transform: rotate(90deg) scale(1.5) translateX(25%);
  }
}
.fullScreen {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#barImg {
  width: 100%;
  height: 100rpx;
}
#qrImg {
  width: 300rpx;
  height: 300rpx;
}