3. Unaipp applet QR code generation

        Recently, I have encountered the need to display QR codes for small programs. I use the vue2+uniapp development environment. Because the small program has a package size limit, it cannot be downloaded using npm. You need to download the file and put it directly in the public file for display.

         Okay, let's see the usage process.

download file

      First download the lib of qrcode

      Address: https://download.csdn.net/download/qq_43185384/86543462

The approximate content is

// Core code comes from https://github.com/davidshimjs/qrcodejs

var QRCode;



(function () {

    /**

         * Get the type by string length

         * 

         * @private

         * @param {String} sText

         * @param {Number} nCorrectLevel

         * @return {Number} type

         */

    function _getTypeNumber(sText, nCorrectLevel) {

        var nType = 1;

        var length = _getUTF8Length(sText);



        for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {

            var nLimit = 0;



            switch (nCorrectLevel) {

                case QRErrorCorrectLevel.L:

                    nLimit = QRCodeLimitLength[i][0];

                    break;

                case QRErrorCorrectLevel.M:

                    nLimit = QRCodeLimitLength[i][1];

                    break;

                case QRErrorCorrectLevel.Q:

                    nLimit = QRCodeLimitLength[i][2];

                    break;

                case QRErrorCorrectLevel.H:

                    nLimit = QRCodeLimitLength[i][3];

                    break;

            }



            if (length <= nLimit) {

                break;

            } else {

                nType++;

            }

        }



        if (nType > QRCodeLimitLength.length) {

            throw new Error("Too long data");

        }



        return nType;

    }



    function _getUTF8Length(sText) {

        var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');

        return replacedText.length + (replacedText.length != sText ? 3 : 0);

    }



    。。。更多内容


    QRCode.CorrectLevel = QRErrorCorrectLevel;

})();



module.exports = QRCode

quote

Where it is used use:

html:

        The html part contains a picture and a refresh button, or a canvas, the picture is used for display, and the canvas is used to draw the QR code.

<template>
  <view class="content">
    <view class="cont-img">
      <img :src="popupURL" alt="" class="popupURL-box" />
      <view class="cont-refresh" @click="creadCode()">
        刷新
        <u-icon name="reload"></u-icon>
      </view>
    </view>
    <!--创建一个画布，将它移出屏幕外看不到的地方-->

    <canvas
      class="canvas-code"
      canvas-id="myQrcode"
      style="left: -800px; position: absolute"
    />
  </view>
</template>

js part

The top part of the js part contains the introduction of qrcode, and the bottom part defines an address variable, which is called every time it is loaded in onshow to ensure that the QR code can be displayed. The mounted part is not good, but it is the first time the page enters the loading, which is easy lost. Below is the calling method, and the text field is the address that your QR code needs to jump to.

<script>
import QRCode from './../../../common/weapp-qrcode.js'
export default {
  data() {
    return {
      popupURL: '',
    }
  },
  onShow() {
    // this.getReceivedOrder()
    this.creadCode()
  },
  mounted() {
    // this.creadCode()
  },
  methods: {
    creadCode() {
      new QRCode('myQrcode', {
        text:
          'http://www.xxx.com/electronicReceipt/#/?id=' +
          uni.getStorageSync('userAccount'),
        width: 120, //canvas 画布的宽
        height: 120, //canvas 画布的高
        padding: 8, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          //工具回调数据
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求

          this.popupURL = res.path
        },
      })
    },
  },
}
</script>

css part:

The css part is mainly because it needs to be centered, and the flex layout is used to adjust the position.

<style lang="scss" scoped>
.content {
  min-height: 1100rpx;
  background-color: #eeeeef;
  padding: 200rpx 20rpx;
  .cont-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    .popupURL-box {
      width: 400rpx;
      height: 380rpx;
    }
    .cont-refresh {
      padding: 10px 0;
    }
  }
}
</style>

add route

        This part of the code is mainly a reference to the route of the page. Of course, there is also a pages array on the tabbar that also imports the page. This part is the root cause of your page being able to come out. The page of my project is composed of four parts, and the third part of my bill of lading is a QR code.

{

   ...//这部分代码主要是页面的路由的引用。
  "tabBar": {
    "color": "#909399",
    "selectedColor": "#303133",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/tabbar/receivedispatchlist/receivedispatchlist",
        "iconPath": "static/subscribe.png",
        "selectedIconPath": "static/subscribe-selected.png",
        "text": "收货派车单"
      },
      {
        "pagePath": "pages/tabbar/dispatchlist/dispatchlist",
        "iconPath": "static/subscribe.png",
        "selectedIconPath": "static/subscribe-selected.png",
        "text": "发货派车单"
      },
      {
        "pagePath": "pages/tabbar/bill/index",
        "iconPath": "static/bill.png",
        "selectedIconPath": "static/bill-selected.png",
        "text": "我的提单"
      },
      {
        "pagePath": "pages/tabbar/my/my",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my-selected.png",
        "text": "我的"
      }
    ]
  }
}

Effect

This is the final display effect, which is the actual page seen on the WeChat developer tools.

The above is the process and method of using the small program to generate the QR code. I hope it will be useful for everyone to learn and use.