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中显示二维码了

2.2、组件化

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

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

3、开发者技术支持

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

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