微信小程式生成二維碼

1.wxml頁面

<view class="container-box">
  <view class="img-box">
    <canvas class="canvas" bindtap="previewImg" hidden="{{canvasHidden}}"canvas-id="qrcCanvas" />
  </view>
</view>
<view hidden="{{maskHidden}}" class="mask"></view>
           

2.wxss樣式

.container-box {
  background-color: #efeff4;
  height: 100vh;
}

.row-height40 {
  text-align: center;
  line-height: 40px;
  padding-top: 20px;
}

.img-box {
  padding: 32rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
  position: relative;
  top: 10%;
}

.img-box .canvas {
  width: 686rpx;
  height: 686rpx;
  background-color: #f9f9f9;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.QR {
  text-align: center;
}
           

3.js頁面

var app = getApp();
var QR = require('../../../../utils/qrcode.js');
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    OrganizationID: '', //機構ID
  },
  canvasId: "qrcCanvas",
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    this.setData({
      OrganizationID: options.OrganizationID
    })
    //ID轉成字元串
    this.getIntToStr();
  },

  //擷取需求量主表
  getIntToStr: function () {
    var that = this;
    wx.request({
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'POST',
      url: app.globalData.BaseURL + 'public/getIntToStr.html',
      data: {
        nID: that.data.OrganizationID, 
      },
      success: function (res) {
        console.log(res.data)
        var status = res.data.status;
        if (status.indexOf("SUCCESS") == 0) {
          that.setData({
            str: res.data.info.intToStr
          })
          that.drowQRcodeClick();
        } else {
          wx.showToast({
            title: '擷取錯誤',
            icon: 'none'
          })
        }
      }
    })
  },

  /**點選生成二維碼 */
  drowQRcodeClick: function () {
    this.size = this.setCanvasSize(); //動态設定畫布大小  
    this.createQrCode("LCA5" + this.data.str, this.canvasId, this.size.w, this.size.h);
  },


  /**繪制二維碼 */
  createQrCode: function (str, canvasId, cavW, cavH) {
    //調用插件中的draw方法，繪制二維碼圖檔  
    QR.qrApi.draw(str, canvasId, cavW, cavH);

  },

  //适配不同螢幕大小的canvas  
  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686; //不同螢幕下canvas的适配比例；設計稿是750寬  
      var width = res.windowWidth / scale;
      var height = width * 2; //canvas畫布為正方形  
      size.w = width;
      size.h = height;
    } catch (e) {
      console.log("擷取裝置資訊失敗" + e);
    }
    return size;
  },


  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
           

4效果圖

5.沒有參數時記得傳參過來

6.背景接口id轉換16位字段

/**
     * int 轉成字元串
     * Str 16位字元
     *
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "getIntToStr.html")
    public String getIntToStr(Integer nID) {
        AppMessageJson json = new AppMessageJson();
        try {
            List<Map<String, Object>> strToint = baseService.getQueryResultToListMap("select str= dbo.IntToStr(?,?)", new Object[]{nID,16}); //int 轉 String
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("intToStr", strToint.get(0).get("str"));
            json.setInfo(jsonObject.toString());
            json.setStatus(AppMessageJson.StatusType.SUCCESS);
        } catch (Exception e) {
            e.printStackTrace();
            json.setInfo("伺服器資料異常！");
            json.setStatus(AppMessageJson.StatusType.ERROR);
        }
        return json.getJsonText();
    }