HaaS UI Mini Program Solution Advanced Teaching II: Canvas Display QR Code

Glossary

AliOS Things: An IoT operating system developed by the Alibaba Cloud Intelligent IoT team

HaaS: The full name is Hardware as a Service, the hardware as a service launched by the Alibaba Cloud Intelligent IoT team based on the AliOS Things system

HaaS UI: The full name is Hardware as a Service User Interface, which is a set of application & graphic solutions derived from the AliOS Things operating system, supporting C/C++ and JS two development languages

QR code

Two-dimensional code (this article mainly introduces qrcode) is a coding method that is particularly widely used on mobile devices at present. It uses a certain geometric figure to be distributed on a plane (two-dimensional direction) according to a certain rule, black and white, The graph that records the data symbol information.

 

1、QRCode.js

In the front-end field, there are many open source libraries that support the creation of QR codes, and QRCode.js is one of the relatively simple and practical libraries, github address: https://github.com/davidshimjs/qrcodejs

QRCode.js supports the use of svg or canvas to create QR codes, and it is very convenient to use:

// "qrcode" component can be svg or canvas
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "123456",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
// or
qrcode.clear(); // clear the code.
qrcode.makeCode("abcdef"); // make another code.

2. Run QRCode.js on HaaS UI

Because HaaS UI supports Canvas components, it is very easy to port QRCode.js (other QR code libraries, if they support canvas rendering, are also very easy to port).

2.1, transplant QRCode.js

The basic idea of ​​porting QRCode.js is very simple:

1. Delete unsupported svg related logic
2. Adjust the incompatible canvas operation (qrcode.js will call some browser-supported apis)

1. 1. Canvas.getContext('2d') is modified to createCanvasContext(canvas) (in HaaS UI, use createCanvasContext method to get canvas context)
   2. Canvas component width and height does not support dynamic setting (canvas.width=width), which is set when the component is initialized

At this point, using the modified qrcode.js can already display the QR code in the HaaS UI

<template>
  <div class="page">
    <canvas ref="canvas" class="canvas" width="200" height="200" />
  </div>
</template>
<script>
import QRCode from './qrcode.js';
export default {
  mounted() {
    let qrcode = new QRCode(this.$refs.canvas, {
      width : 200, 
      height : 200,
    });
    qrcode.makeCode('https://www.taobao.com');
  },
};
</script>
<style scoped>
.page {
  flex: 1;
  align-items: center;
  padding: 30px;
}
</style>

2.2, componentization

After the QRCode.js is transplanted, the QR code can be directly imported and generated on the page. For more convenient use, a qrcode component can be encapsulated by the custom component method introduced in the previous article.

<template>
  <canvas ref='canvas' :style="{'width': width+'px', 'height': height+'px'}" :width='width' :height='height'>
  </canvas>
</template>
<script>
import QRCode from './qrcode.js';
export default {
  name: 'FlQRCode',
  props: {
    width: {// QR code display width
      type: Number,
      default: 100,
      validator(val) {
        return val > 0;
      }
    },
    height: {// QR code display height
      type: Number,
      default: 100,
      validator(val) {
        return val > 0;
      }
    },
    text: {// QR code content
      type: String,
    }
  },
  mounted() {
    this.makeCode();
  },
  methods: {
    makeCode() {
      // Generate QR code
      if (this.text) {
        let qrcode = new QRCode(this.$refs.canvas, {
          width : this.width, 
          height : this.height,
        });
        qrcode.makeCode(this.text);
      }
    },
  },
  watch: {
    text() {
      // The text property changes, and the QR code is regenerated
      this.makeCode();
    },
  }
}
</script>

Then use the qrcode component in the page or component:

<template>
  <div class="page">
    <QRCode text="https://www.taobao.com" />
    <text class="text">https://www.taobao.com</text>
    <QRCode :width="200" :height="200" style="margin-top:30px;" text="https://h5.dingtalk.com/circle/healthCheckin.html?corpId=ding14654f721f769db5304b958c1afbff6a&5238e=ab6ba&cbdbhh=qwertyuiop&origin=1" />
    <text class="text">Dingding Developer Group</text>
  </div>
</template>
<script>
import QRCode from "../packages/qr-code/index.vue";
export default {
  components: {
    QRCode,
  },
};
</script>
<style scoped>
.page {
  flex: 1;
  align-items: center;
  padding: 30px;
}
.text {
  font-size: 20px;
}
</style>

3. Developer technical support

If you need more technical support, you can join the DingTalk developer group or follow the WeChat public account

For more technology and solution introduction, please visit the Aliyun AIoT homepage https://iot.aliyun.com/