HaaS UI小程序解决方案进阶教学之二：Canvas显示二维码

名词解释

AliOS Things： 阿里云智能IoT团队自研的物联网操作系统

HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务

HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言

二维码

二维码(本文主要介绍qrcode)是目前在移动设备上应用特别广泛的一种编码方式，是用某种特定的几何图形按一定规律在平面（二维方向上）分布的、黑白相间的、记录数据符号信息的图形。

 

1、QRCode.js

在前端领域，有不少支持创建显示二维码的开源库，而QRCode.js是其中一个比较简单实用的库，github地址：https://github.com/davidshimjs/qrcodejs

QRCode.js支持使用svg或者canvas来创建二维码，使用起来也非常方便：

// "qrcode"组件可以是svg或者canvas
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "123456",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
// 或者
qrcode.clear(); // clear the code.
qrcode.makeCode("abcdef"); // make another code.

2、在HaaS UI上运行QRCode.js

因为HaaS UI支持了Canvas组件，所以移植QRCode.js是非常容易的（其他二维码库，如果支持canvas渲染，也是非常容易移植的）。

2.1、移植QRCode.js

移植QRCode.js的基本思路很简单：

1. 删除不支持的svg相关逻辑
2. 将不兼容的canvas操作(qrcode.js会调用一些浏览器支持的api)调整一下

1. 1. canvas.getContext('2d')修改为createCanvasContext(canvas)   (HaaS UI中使用createCanvasContext方法获取canvas上下文)
   2. canvas组件宽高不支持动态设置(canvas.width=width)，由组件初始化时设置

此时，使用修改后的qrcode.js已经可以在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、组件化

在移植好QRCode.js之后，已经可以直接在页面中引入并生成二维码。为了更方便使用，可以通过之前文章介绍的自定义组件的方法封装一个qrcode组件。

<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: {              // 二维码显示宽度
      type: Number,
      default: 100,
      validator(val) {
        return val > 0;
      }
    },
    height: {              // 二维码显示高度
      type: Number,
      default: 100,
      validator(val) {
        return val > 0;
      }
    },
    text: {               // 二维码内容
      type: String,
    }
  },
  mounted() {
    this.makeCode();
  },
  methods: {
    makeCode() {
      // 生成二维码
      if (this.text) {
        let qrcode = new QRCode(this.$refs.canvas, {
          width : this.width, 
          height : this.height,
        });
        qrcode.makeCode(this.text);
      }
    },
  },
  watch: {
    text() {
      // text属性发生变化，重新生成二维码
      this.makeCode();
    },
  }
}
</script>

然后在页面或者组件中使用qrcode组件：

<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">钉钉开发者群</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、开发者技术支持

如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号

更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/

 

转载：https://blog.csdn.net/HaaSTech/article/details/112979757