微信小程序生成二维码

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();
    }