【RISC-V 生态软件系列】 HaaS UI进阶教学二：Canvas之显示二维码

名词解释

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

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

Haa：全称是 H 即服务用户界面，是语言硬件开发应用和 iOS 物联网操作系统上的一套图形解决方案

二维码

（本文主要二维码）上应用广泛的一种编码方式，是当前在特定方位上的特定维度的几何图形，是方向上特定的方位上的几何图形（二维）分布的、黑白相间的、记录数据符号信息的图形。

二维码.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",
      正确级别: QRCode.CorrectLevel.H
});
// 或者
qrcode.clear(); // 清除代码。
qrcode.makeCode("abcdef"); // 制作另一个代码。在HaaS UI上运行QRCode.js

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

移植QRCode.js

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

删除不支持的svg相关逻辑
将不会触及的画布操作(qrcode.js)会调用一些浏览器支持的api)调整一下

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

此时，使用修改后的 qrcode.js 已经可以在 HaaS UI 中显示二维码了

组件化

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

<模板>

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

文章转载自：平头哥芯片开放社区作者：sucool

更多回帖

李猛

【RISC-V 生态软件系列】 HaaS UI进阶教学二：Canvas之显示二维码

相关帖子

【RISC-V 生态软件系列】 HaaS UI进阶教学三：Canvas之动画实践

【RISC-V 生态软件系列】HaaS UI进阶教学之HaaSUI系统框架扩展JSAPI之异步操作及调度

【RISC-V 生态软件系列】 HaaS UI基础教学十：JSAPI之IoT平台连接

【RISC-V 生态软件系列】 HaaS UI基础教学九：JSAPI之应用包管理

【RISC-V 生态软件系列】 HaaS UI基础教学三：JSAPI之页面导航

【RISC-V 生态软件系列】 HaaS UI基础教学二：第一个UI页面搭建

【RISC-V 生态软件系列】 HaaS UI基础教学八：JSAPI自动化测试方法

【RISC-V 生态软件系列】 HaaS UI基础教学一：快速开始

二维码软件中制作Dot Code二维码的步骤

【RISC-V 生态软件系列】HaaS UI进阶教学五：使用QuickJS原生方式扩展JSAPI（一）添加JSAPI模块

20万+工程师都在用，免费PCB检查工具

李猛

【RISC-V 生态软件系列】 HaaS UI进阶教学二：Canvas之显示二维码

相关帖子

【RISC-V 生态软件系列】 HaaS UI进阶教学三：Canvas之动画实践

【RISC-V 生态软件系列】HaaS UI进阶教学之HaaSUI系统框架扩展JSAPI之异步操作及调度

【RISC-V 生态软件系列】 HaaS UI基础教学十：JSAPI之IoT平台连接

【RISC-V 生态软件系列】 HaaS UI基础教学九：JSAPI之应用包管理

【RISC-V 生态软件系列】 HaaS UI基础教学三：JSAPI之页面导航

【RISC-V 生态软件系列】 HaaS UI基础教学二：第一个UI页面搭建

【RISC-V 生态软件系列】 HaaS UI基础教学八：JSAPI自动化测试方法

【RISC-V 生态软件系列】 HaaS UI基础教学一：快速开始

二维码软件中制作Dot Code二维码的步骤

【RISC-V 生态软件系列】HaaS UI进阶教学五：使用QuickJS原生方式扩展JSAPI（一） 添加JSAPI模块

20万+工程师都在用，免费PCB检查工具

【RISC-V 生态软件系列】HaaS UI进阶教学五：使用QuickJS原生方式扩展JSAPI（一）添加JSAPI模块